Template Listview Button Styling Issue

by Vojtech Mares

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.mobile.all.min.css">
<div data-role="view" id="v1">
    <header data-role="header">
        <div data-role="navbar"> <span data-role="view-title">Filtered for {b: '2b'}</span>

        </div>
    </header>
    <ul id="stages_listview" data-role="listview" data-style="inset"></ul>
    <ul id="stages_listview2" data-role="listview" data-style="inset"></ul>
    <script type="text/x-kendo-template" id="stages_listview_template1">
        # = stagename#
    </script>
</div>
<div data-role="view" id="v2">
    <ul id="lv2" data-role="listview" data-style="inset">
        <li><a data-role="button" href="#v1">1</a>
        </li>
    </ul>
</div>

JavaScript

new kendo.mobile.Application();

var ds1 = new kendo.data.DataSource({
    data: [{
        stagename: "ds1 A",
        b: "1b"
    }, {
        stagename: "ds1 B",
        b: "2b"
    }, {
        stagename: "ds1 C",
        b: "2b"
    }, {
        stagename: "ds1 D",
        b: "2c"
    }, {
        stagename: "ds1 E",
        b: "2c"
    }],
    filterable: true
    
});


var lw = $("#stages_listview").kendoMobileListView({
    dataSource: ds1,
    template: $("#stages_listview_template1").html(),
    filterable: {
        field: 'stagename',
        operator: 'contains',
        ignoreCase: true
    }
}).data('kendoMobileListView');


lw.dataSource.originalFilter = lw.dataSource.filter;
lw.dataSource.filter = function() {
    arguments[arguments.length]= { field: "b", operator: "eq", value: "2b" };
    arguments.length += 1;
    debugger;
    var result = lw.dataSource.apply(this, arguments);
    return result;
}

$("#stages_listview2").kendoMobileListView({
    dataSource: ds1,
    template: $("#stages_listview_template1").html(),
    filterable: {
        field: 'stagename',
        operator: 'contains',
        ignoreCase: true
    }
});