What is the appropriate way to filter a kendo grid with knockoutjs?

Question

What is the appropriate way to filter a grid using the knockout-kendo kendoGrid binding?

I am currently filtering a grid by binding it to a computed array, using the technique shown here: Utility Functions in KnockoutJS - see "Filtering an Array."

self.filteredItems = ko.dependentObservable(function() {

    var filter = self.filter().toLowerCase();
    if (!filter) {
        return self.items();
    } else {
        return ko.utils.arrayFilter(self.items(), function(item) {
             return item.name().toLowerCase().indexOf(filter) !== -1;
        });
    }
}, self);

This works, however if you are not on Page #1, it does not reset the grid to page #1, so if there are less "pages" of results than what your search ends up with, the grid will be blank until paged to page 1.

To see the issue, 1. go to this JSFIDDLE - http://jsfiddle.net/xW9yc/11/ 2. go to page 3 3. enter "P" in the search input

Answer 1

You can store the reference to the grid in an observable in your view model like so:

function ViewModel() {
    // ....
     self.grid = ko.observable();
}

and your HTML would be

<div data-bind="kendoGrid: {data:filteredItems, pageable: { buttonCount: 5, pageSize: 5 }, widget: grid }" />

Now, once the grid has been instantiated, you can reference it with self.grid() instead of $("#MyGrid").data("kendoGrid") - it's a looser coupling between your view model and your view because you don't have to hardcode a jQuery selector.

I've updated your fiddle to reflect these changes.

You can find the documentation for the widget option at the bottom of this page in the Knockout-Kendo documentation

Answer 2

If you are not averse to using the kendo javascript api, you can do the following :

var grid = $("#MyGrid").data("kendoGrid");
            if(grid)
            {
            grid.dataSource.page(1);
            }

[edited jsfiddle] (http://jsfiddle.net/3CrMR/)

Hope this is of some help!