Menu

Kendo Grid Datasource and passing read parameters

Kendo Grid Ajax Data source

The kendo grid can be configured so that it will pull its data from the server with an Ajax call rather than using view data at server page build time.
Its easily done by using the grids DataSource and a controller action for its Read operation.

The request parameters contains all the filtering, sorting, paging details from the grid.
The myservice.getdata just returns a list of the mydataviewmodel that the grid is looking for.
The .ToDataSourceResult(request) part takes your data and performs the paging, sort, filtering the grid is looking for.
Improtant to note that its best to past an Iqueryable to this as that will allow the filtering etc. to be applied at the time of data gathering and minimise data passed around. See section for more details.

The filtering etc. can be applied server or client side. .ServerOperation(false) To pull all data and do the grid filter etc. client side. Only valid if small data set. .ServerOperation(true) To only pull down the filtered data for display. Used for large data sets. It does incur a server call each user operation.

Kendo Grid Ajax Data Source with Parameters

You have a data grid that is being populated by the Ajax read in its datasource.
This read gets passed all the sorting/filtering details on the grid but say you have additional parameters that are out with the grid normal operation. In this case you want to pass additional parameters.
For example: Say you only want data from a specific customer thus need to pass the customer id to the data read or another drop down list elsewhere on the page needs to limit the grid data.

Its easy to do.
Build the Kendo grid as normal but with the DataSource modified to

Kendo Grid Controlled by Kendo Combo

We have a Kendo grid and its datasource is required to be filtered by a Kendo combo box elsewhere on the page.
To achieve this we want to use the same data source with parameters as covered done before but modified that the javascript pulls it data from the combo

The combo doesn’t have anything other than normal Kendo stuff. The value is bound to the customerId that we want to use in the grid parameter.
The on change event is specified (Used rather than onselect as it triggers even if the user selects the existing selection)
The javascript for the onchange refreshes the grid forcing it to go fetch its data then redraw itself

The grid:
It remains the same but we change the filterdata function to

This sets the customer id to the currently selected value of the combo. The check with "" is there for when the users enters the page and nothing is selected. It returns 0 which is assumed will return no data. Change as required.