Basic Scenario

Grid with filtering, editing, inserting, deleting, sorting and paging. Data provided by controller.

OData Service Scenario

Controller loadData method requests data from OData service with ajax. Any asynchronous source could be used instead. Just return jQuery.promise from controller method. Field option itemTemplate allows to render any custom cell content, just return your markup as string, DOM Node or jQuery Element.

Sorting Scenario

Sorting can be done not only with column header interaction, but also with sort method.

Validation Scenario

Grid supports field values validation for inserting and editing. There are plenty of built-in validators available. Furthermore custom validators can be easily added.

Loading by Page

Grid allows to load data by pages. It helps to reduce data loading time and of course necessary for large data sources.

Custom View

All components of the grid can be easily configured. Heading, filtering, inserting, editing, sorting, paging and row selection could be switched with a single corresponding boolean option.

       

Batch Delete

Cell content of every column can be customized with itemTemplate, headerTemplate, filterTemplate and insertTemplate functions specified in field config. This example shows how to implement batch deleting with custom field for selecting items.

External Pager

The pager could be placed anywhere outside of the grid. Just specify pagerContainer option.