Kendo UI for jQuery Grid Overview
- EXAMPLE
- VIEW SOURCE
-
Change Theme
defaultDefault Theme
- Main
- Main Dark
- Nordic
- Ocean Blue
- Ocean Blue A11Y
- Purple
- Turquoise
Bootstrap Theme- Main
- Bootstrap 3
- Bootstrap 3 Dark
- Main Dark
- Nordic
- Turquoise
- Turquoise Dark
- Urban
- Vintage
Material Theme- Main
- Arctic
- Lime Dark
- Main Dark
- Nova
Classic Theme- Main
- Green
- Green Dark
- Lavender
- Lavender Dark
- Main Dark
- Metro
- Metro Dark
- Moonlight
- Opal
- Opal Dark
- Silver
- Silver Dark
- Uniform
Fluent Theme- Main
Also available for:
API REFERENCEDescription
The Kendo UI for jQuery Grid component renders data in a tabular format and supports a vast range of powerful data management and customization features such as filtering, grouping, sorting, editing, and many more. The jQuery Grid comes with local and remote data-binding capabilities which are implemented over the Kendo UI for jQuery DataSource component.
This demo shows a Grid component with enabled paging, sorting, filtering, grouping, Excel and PDF export, search panel, checkbox selection, aggregates, frozen columns, and a column menu. The Grid also uses the template engine to customize its appearance and incorporate external Kendo UI for jQuery components such as the Badge, Chart, Rating, and DropDownList.
The jQuery Grid control is part of Kendo UI for jQuery, a comprehensive, professional-grade UI library for building modern and feature-rich applications. The Kendo UI for jQuery collection provides 110+ UI components, an abundance of data-visualization gadgets, client-side data source, and a built-in MVVM (Model-View-ViewModel) library.
This Grid example is part of a unique collection of hundreds of jQuery demos, with which you can see all Kendo UI for jQuery components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Kendo UI for jQuery Dojo or ThemeBuilder.
Functionality and Features
- Data binding–By default, the Grid automatically binds to data through the DataSource component. However, you can disable this behavior and bind the component to local arrays of data and to remote data of your choice.
- Editing–The Grid supports various types of editing scenarios such as creating and saving batch updates, editing data inline on row click, or in a popup, and also enables you to implement custom column editors and specify your own validation rules.
- Filtering–You can control the filtering functionality of the Grid and implement header row, checkbox, and custom menu filtering.
- Grouping–The Grid enables you to group its data by using row templates and while paging is enabled. Additionally, you can load groups on demand and page through the groups at the same time and display aggregated number results.
- Paging–You can render your Grid data in pages as required and optimize the performance of the control by applying the paging operations on the server.
- Sorting–The Grid allows you to cover a set of sorting approaches by providing the single-, multi-, and mixed-sort modes.
- Column enhancements–The Grid provides various options to control its column behavior by delivering features such as locked and sticky columns, built-in column operations, multi-column headers as well as supporting column resizing and column reordering actions.
- Accessibility–The Grid is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.
- And a lot more.