Custom text filter on Kendo Grid that uses declarative initialization

0
votes

I've made a JSBin that should explain what I'm looking to do:

http://jsbin.com/inikib/9/edit

I'm creating a Kendo UI Grid using Declarative Initialization...

<div data-role="grid"
    data-columns="[ {field: 'name', title: 'Name'}, {field: 'price', title: 'Price'} ]"
    data-bind="source: products">
 </div>

...and I want to create a text field that will filter the name field.

This is simple with a regular Kendo Grid, but is it possible to do with declarative initialization like above?

Edit:

I think I'm a little closer in this JSbin using $(el).data("kendoGrid").filter = {...};

(but not quite there yet)

1
kendo-uikendo-grid

1 Answers

0
votes

Answering my own question...

Working JSBin here

What I needed was:

$('.grid-filter').keyup(function() {
  var filterText = $(this).val();

  $('.data-grid').data("kendoGrid").dataSource.filter = function () {
    return { field: "name", operator: "contains", value: filterText };
  };

  $('.data-grid').data("kendoGrid").dataSource.fetch();

});

I was missing $('.data-grid').data("kendoGrid").dataSource.filter and then $('.data-grid').data("kendoGrid").dataSource.fetch();