#Kendo grid event types update#
#Kendo grid event types code#

The following simple function will clear all filters on the grid.The issue that I have is that the dataSource is an abstraction, it can be an ajax source, it can be client-side javascript array of objects. You can read up on various different filter operators at the following Telerik Grid Filter Operators. This example uses eq or equal filter operation. applyFilter function accepts the Field Name and the new value to use for filter.įunction applyFilter(filterField, filterValue)

#Kendo grid event types code#

Here is the Javascript code to accomplish all this. It will also remove a single filter if the dummy value is chosen for the dropdown. This function will let you progressively apply multiple filters. If the value is not 0, create a new filter object and add it to the filters array.Iterate through current filters, if a filter is found for the currently specified field, remove it.If no filters are applied, created an empty array to hold new filter(s).Get currently applied filter(s) to the Grid.It applies a filter based on the following logic: The following function takes a field name to filter on and a value for the filter. attach click event for Clear Filters button attach change event to the 'network' dropdown. The javascript event handlers are defined below: // attache change event for 'OS' dropdown I'll skip the HTML code for the dropdowns and the button.

The button will be used to clear all filters.

#Kendo grid event types update#

The dropdown will dynamically update the filter via change event handler. filters specifies an array containing the individual filter objects.įor my example, I have defined two dropdowns and one button.logic specifies and or or logic for the filters.The currentFilterObj contains logic and filters fields. Var grid = $('#MachinesGrid').data('kendoGrid') Kendo Grid provides a client side API, which you can leverage to access and manipulate the Grid object. Initialize Kendo Grid from a table with the ID of 'TableGrid'. Read(read => read.Action('GetGridData', 'Machine'))įor a simpler dataset, represented as an HTML table, you can use the following code to quickly initialize a grid around it.

Sortable(sortable => sortable.AllowUnsort(false)) Here's the code for my grid embedded in a Razor =>

I have a Machines table, which lists some machine names along with their operating system and the network they are on. My aim was to provide dropdown boxes, with distinct values for the users to filter on. The filtering interface, although very powerfull, can be confusing.A previous Web Forms based version of the application was already using dropdown boxes for filtering Telerik Rad Grid. In my case, the built-in filtering interface was not desirable. To give you a quick example, here are different filter interfaces for different data type: Built-in filters offered by Kendo UI Grid However, it is generic to accommodate for all kind of data that you can throw at it. The default filtering interface for Kendo Grid is very powerful. Kendo Grid provides a lot of features out of the box, such as filtering, grouping, paging, sorting, and support for various data formats. Kendo UI Grid is a feature rich HTML5 Grid control provided as part of Telerik's Kendo UI Web framework.