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

Do you want the grid to start from page 1 when some filter is applied or just go to the last available page? — thispatchofsky, May 08 '14 at 19:52

rwisch45 · Accepted Answer · 2014-05-09T15:34:55.693

3

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

edited May 09 '14 at 15:34

answered May 08 '14 at 23:25

rwisch45

3,692
2
25
36

This is good - I don't see self.grid being set anywhere - how does that happen?! I couldn't find any doc on the "widget" tag – user210757 May 09 '14 at 15:00
@user210757 `self.grid` is just declared as an empty observable in the view model, and then in the HTML adding the `widget: grid` fills the observable when the kendo grid is instantiated. I used `grid` as a variable name - it could be anything you want though. I'll look for some docs on the `widget` parameter and post them here if I find anything – rwisch45 May 09 '14 at 15:33
@user210757 See my edit to the answer for a link to the documentation – rwisch45 May 09 '14 at 15:35

score 1 · Answer 2 · answered May 08 '14 at 20:22

1

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!

answered May 08 '14 at 20:22

thispatchofsky

854
6
15

The only thing I am opposed to is the ViewModel interacting directly with the View. The ViewModel probably shouldn't know about #MyGrid. If there was a way to trigger this strictly from the View, that would work better. Thanks for the reply! – user210757 May 08 '14 at 20:31
1

i would have accepted both answers if I could since it was a collaboration of the two that I used. this was definitely a huge help thank you – user210757 May 09 '14 at 15:41

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

2 Answers2