Kendo UI for jQuery
Create fast, responsive and highly customizable jQuery data grids with the Progress® Kendo UI® for jQuery Data Grid. Equipped with essential and advanced features like sorting, filtering, paging, editing and exporting, the Grid component adapts to any scenario—from simple jQuery tables to complex business dashboards.
You can enable automatic data editing for the jQuery Data Grid when it’s bound to a DataSource control like SqlDataSource, LinqDataSource, EntityDataSource, etc., or use the extensive API to handle the CRUD operations in a custom manner. Display the edit form inline, as a regular form or in a popup. Enable batch editing to allow users to edit multiple items and save them all by hitting the Save button just once.
Use any declarative data source control (AccessDataSource, SqlDataSource, LinqDataSource, EntityDataSource, ObjectDataSource, XmlDataSource, OpenAccessDataSource), or bind the grid to your custom objects on the fly. Take advantage of the server events, which are executed only when the grid needs to get fresh data from the server. Declarative and programmatic client-side binding to ASP.NET Web Services, WCF, ADO.NET, OData services and Page Methods is also supported. Whether you want to use local data, or to serve your data via calls back to the server, you are covered. Out-of-the-box, the jQuery Grid can bind to these various sources allowing you to pick the most optimal solution for your implementation.
The jQuery Grid component enables you to easily resize the grid rows to meet your specific needs. For even more convenience, you can select multiple rows and resize them simultaneously.
In cases where you need to work with large amounts of data, the jQuery Data Grid supports virtualization of columns and rows and endless scrolling scenarios. With this feature, an initial data set is loaded and when the user scrolls to then end, the next set is retrieved.
Export the data from your grid to Excel or PDF using client-side, server agnostic export functionality. You can provide buttons that export the contents in their entirety or export the current selection. You can even provide a button to copy to Excel.
The Kendo UI for jQuery Data Grid enables users to paste content from an Excel sheet to the grid table cells.
Effortlessly guide users to any data point with the Kendo UI for jQuery Grid “scroll to item” method. Whether it needs to initially display a specific row or to auto-navigate based on certain triggers or user actions, the scrollToItem() method makes it easy to deliver intuitive user experiences.
In a scrollable Grid case, the ID of the data item is passed to the scrollToItem() method, while in a virtual scrolling scenario, when the row is not yet loaded, the ID of the data item is passed and a callback function to the scrollToItem() is triggered.
Improve accessibility and productivity with keyboard-only navigation. This component supports keyboard navigation to help navigate and interact with items.
The jQuery Data Grid component is compliant with Section 508 standards, is AA rated with WCAG 2.0 and follows WAI-ARIA standards.
Connect your grid to local JavaScript arrays, JSON data, OData, Web API services or custom transports. The Grid makes it easy to populate and manipulate tabular data in real time.
Enable single or multi-column sorting and apply built-in or custom filters with intuitive UI components. Filter modes include row filtering, menu filtering and checkbox selection.
Improve performance by loading data in chunks with paging, virtualization and infinite scrolling. Ideal for working with large data sets without sacrificing speed.
Choose from multiple editing approaches like inline, popup or batch editing and customize the editor for each column to match your data entry workflows.
Group rows by any column and display aggregates like sum, average, count or custom calculations in group headers or footers.
Export grid content to PDF or Excel with customizable file names, page setup and formatting. Exports honor applied filters, sorting and groupings.
Let users reorder, resize, show/hide, lock or freeze columns as needed. Enhance data exploration with sticky headers and column menus.
Deliver a consistent experience across devices. The Grid supports adaptive rendering for smaller screens and responsive layout adjustments.
Fully compliant with WCAG, ARIA and Section 508 standards. The Grid supports full keyboard navigation, screen readers and high‑contrast themes.
Nest additional grids or templates within rows to display related records or master‑detail layouts. Expand and collapse detail rows easily.
The Kendo UI for jQuery Data Grid contains a vast number of features able to virtually any user need:
See the jQuery Context Menu demo - Enable right-click interactions within the grid
See the jQuery State Persistence demo - Save and restore user settings like column order and filters
See the jQuery Selection Aggregates demo - Show totals or averages for selected rows
See the jQuery Clipboard Support demo - Copy and paste directly from Excel
See the jQuery Scroll to Row demo - Jump to a specific row programmatically or scroll endlessly
See the jQuery Custom Editors demo - Replace default editors with dropdowns, date pickers, or any custom input
See the jQuery Column Templates demo - Display formatted values or interactive components in grid cells
See the jQuery Toolbar demo - Add search boxes, custom buttons, or export tools to the grid header
See the jQuery Column Menu demo- Offer sorting, filtering and visibility toggles from a unified dropdown
See the jQuery Globalization and RTL demo- Localize strings, formats and layout for any culture or language
Trusted by thousands of developers worldwide, the Kendo UI for jQuery Grid is optimized for performance, flexibility and extensibility. Whether you’re building enterprise admin panels, line‑of‑business apps or reporting dashboards, the Grid component delivers the functionality and reliability needed to manage complex data with confidence.
The jQuery Data Grid component supports any globalization or localization scenarios. You can also enable RTL mode to display the control’s text and UI elements from left to right.
A jQuery Data Grid (sometimes called a jQuery grid table or jQuery UI table) is a component that presents data in rows and columns and provides rich features such as sorting, filtering, paging, editing, exporting and more.
Absolutely! You can embed a detail template or child grids within each row to create expandable master‑detail layouts, enabling you to display related records without leaving the current context.
You can explore the extensive online demos and API reference on the Kendo UI for jQuery docs site, including a comprehensive jQuery grid table example for every feature.