CODEWITHSUNDEEP
mobilemvvmkendo-ui
Trent Torkelson
Trent Torkelson

Reputation: 11

Kendo Mobile UI MVVM listview filter not working

I have this linked demo code, which was extrapolated from this code here.

For whatever reason, when I switch to the local json datasource, the sorting and filtering functionality breaks.

I am obviously missing something here, can anyone point out what that may be?

I'll post my code here in case going to the links is annoying to anyone:

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/mobile-listview/mvvm">
    <style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.metro.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.dataviz.metro.min.css" />
    <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.mobile.all.min.css" />

    <script src="http://cdn.kendostatic.com/2015.1.318/js/jquery.min.js"></script>
    <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
    <link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
    <script src="../content/shared/js/console.js"></script>
</head>
<body>
<div data-model="mobileListViewModel" data-role="view" id="mobile-listview-events" data-title="ListView MVVM"  data-use-native-scrolling="true">
    <form data-bind="events: { submit: add }">
        <ul data-role="listview" data-style="inset" data-type="group">

            <li>
                Items:
                <ul data-role="listview"
                    data-bind="source: source"
                    data-filterable="{field: 'ProductName', operator: 'startswith'}"
                    data-template="mobile-listview-filtering-template"></ul>
            </li>
        </ul>
    </form>
</div>

<script type="text/x-kendo-tmpl" id="mobile-listview-filtering-template">
    <div class="product">
        <h3>#:ProductName#</h3>
        <p>#:kendo.toString(UnitPrice, "c")#</p>
    </div>
</script>

<script>
        var jsdata = {
        "d" : [
        {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)", "type": "SampleModel.Product"
        }, "ProductID": 1, "ProductName": "Chai", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "10 boxes x 20 bags", "UnitPrice": "18.00", "UnitsInStock": 39, "UnitsOnOrder": 0, "ReorderLevel": 10, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(1)/Supplier"
        }
        }
        }, {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)", "type": "SampleModel.Product"
        }, "ProductID": 2, "ProductName": "Chang", "SupplierID": 1, "CategoryID": 1, "QuantityPerUnit": "24 - 12 oz bottles", "UnitPrice": "19.00", "UnitsInStock": 17, "UnitsOnOrder": 40, "ReorderLevel": 25, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(2)/Supplier"
        }
        }
        }, {
        "__metadata": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)", "type": "SampleModel.Product"
        }, "ProductID": 3, "ProductName": "Aniseed Syrup", "SupplierID": 1, "CategoryID": 2, "QuantityPerUnit": "12 - 550 ml bottles", "UnitPrice": "10.00", "UnitsInStock": 13, "UnitsOnOrder": 70, "ReorderLevel": 25, "Discontinued": false, "Category": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Category"
        }
        }, "Order_Details": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Order_Details"
        }
        }, "Supplier": {
        "__deferred": {
        "uri": "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Products(3)/Supplier"
        }
        }
        }]
        };

        var mobileListViewModel = kendo.observable({
            source: new kendo.data.DataSource({
                type: "json",
                transport: {
                  read: function(options) {
                    options.success(jsdata);
                  }
                },
                schema: {
                  data: "d"
                },
                sort: {
                    field: "ProductName",
                    dir: "asc"
                },
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true,
                pageSize: 50
            })
        });

    </script>


    <script>
        var app = new kendo.mobile.Application(document.body, {skin: "nova"});
    </script>
</body>
</html>

Upvotes: 0

Views: 226

Answers (1)

dimodi
dimodi

Reputation: 4139

Please remove or disable all the settings related to server data operations (serverPaging, serverFiltering, serverSorting), as you don't need server operations with local data. Moreover, server and client data operations cannot be mixed, which is the case in the provided Dojo.

Here is an updated example that works:

http://dojo.telerik.com/iFuRE/11

Upvotes: 1

Related Questions