javascript - Filtering a Kendo UI Grid in MVC with Remote Data Binding using controls outside of the Grid -

i working on project client wants able have "control" on page user can start typing , data grid filter each keystroke.

the filter should use starts operator, , removing of characters inside of input ("control") reset grid original unfiltered state.

my controller, don't want modify or add additional parameters:

public jsonresult getfoo([datasourcerequest]datasourcerequest request, bool active = true) {     list<foo> model = foocontext.foo.getfoo(active);     model = model.orderby(m => m.name).tolist();     return json(model.todatasourceresult(request),jsonrequestbehavior.allowget); } 

this current gird:

@(html.kendo().grid<foo>()     .name("footable")     .prefixurlparameters(settings.grid.prefixurlparameters)     .columns(columns =>     {         columns             .bound("fooname")             .clienttemplate("<a href='#= id #'>#= fooname #</a>");         columns             .bound("statename")             .title("state").width(120);         columns.bound("previousyearshomes")             .title("previous years homes")             .width(120);          columns.bound("currentyearshomes")             .title("current years homes")             .width(120);     .sortable()     .resizable(q => q.columns(true))     .datasource(datasource => datasource         .ajax()             .read(read => read.action("getbuilders", "builders", new { area = "administrator", active = true }))     ) ) 

the filter should filter 'fooname' column.

i recommend specifying .data(string handler) method available on data source, example

.datasource(datasource => datasource     .ajax()     .read(read => read         .action("getbuilders", "builders", new { area = "administrator", active = true })         .data("getdataparams")     ) ) 

this allows specify javascript function returns json object defining additional parameters append ajax request.

you can use this:

var getdataparams = function (e) {     var result = {         name: $('#foonameinput').val()     }     return result; }; 

and trigger refresh of grid (from key event or similar):

$("#footable").data("kendogrid").datasource.read(); 

some docs assist:

kendo forums working example

mvc fluent docs