The jQuery Grid component by Shield UI boasts exceptional performance and a high level of customizability. This page lists some of its main features. View Demo Paging Load only a subset of the data to adjust the control to the screen and scenario limitations. Allow intuitive interaction for the user through the fully customizable, built-in navigation pager. Apr 11, 2015 Make sure that you have a reference to jquery.js, bootstrap.css, grid.css and grid.js files in the pages where you are planning to use the jquery grid. In order to use the grid plugin, you will need a HTML table tag for a base element of the grid.
Kendo UI's Responsive and Adaptive HTML5 Grid widget is ready to roll right out of the box. Enjoy over 100 features from filtering and sorting data, to advanced features like pagination and hierarchical data grouping.
Powerful HTML5 web development has never been so easy. It's the most advanced data grid on the market. But don't just take our word for it, check out the demo.
Column InteractionsRe-size and reorder the columns you have provided on the client, without any requests to the server. Additionally, the provided context menu allows them to easily hide or display columns.
HierarchyQuickly create an N-level hierarchical Grid to represent your data. This hierarchy can be set up using both server driven and HTML5 driven approaches, ensuring that you can implement the hierarchical Kendo UI Grid component in any application.
Progress Kendo UI Grid component adds advanced data visualization and manipulation functionality to your AngularJS applications. The Grid (as well as all 70+ Kendo UI widgets) supports AngularJS directives so that you can leverage all of its functionality with just a few lines of code.
Useful when going through large amounts of data, the Frozen Columns feature of our Grid widget lets you lock chosen columns by simply specifying locked in the column properties. Furthermore, the Grid also automatically provides a column menu to allow the user to unlock and lock columns.
Page, Sort, Filter and Group DataPage, sort, filter and even group your data using the intuitive interface of the Kendo UI Grid component. Using a few easy-to-implement properties, any Grid can have this rich user experience.
Progress Kendo UI Grid widget has Google-style autocomplete filtering. The functionality filters records intuitively when browsing through large amount of data.
Insert, Update and DeleteUsers can create, update or even delete data from your underlying data source. Edit forms can be presented in-line, in-form or in a pop-up, allowing you to grant the user with the exact user experience they are looking for. You can even do batch updates.
Editing: Batch, Inline, Popup and Custom Editor
You can enable automatic data editing for 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.
Data-Binding: Local, Remote, Backend ServicesUse 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 Kendo UI Grid can bind to these various sources allowing you to pick the most optimal solution for your implementation.
TemplatesHave full control over the way your Progress Kendo UI Grid looks to the end user. Using the template feature of the Grid component, you can easily customize the display and layout of columns and rows.
Provide your users with a method to interact with the Progress Kendo UI Grid component without needing the mouse. With keyboard navigation, you can create an application that fits users preferring to utilize keystrokes, or create a highly accessible application by offering a mouse alternative.
The Grid component is perfect for scenarios where accessibility is important for your application. The Grid complies with Section 508 and WCAG guidelines, ensuring that individuals with disabilities can still view and interact with it.
The Grid is a powerful control for displaying data in a tabular format.
It provides options for executing data operations, such as paging, sorting, filtering, grouping, and editing, which determine the way the data is presented and manipulated. The Grid supports data binding to local and remote sets of data by using the Kendo UI for jQuery DataSource component.
The Grid is part of Kendo UI for jQuery, a professional grade UI library with 90+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Because of the numerous functionalities it supports, the Grid is the most complex of the Kendo UI widgets. To gain greater confidence before you start working with it, make sure you get familiar with the following concepts:
- DataSource—The DataSource is one of the pivotal Kendo UI components. It is an abstraction for using local or remote data and a key concept in understanding how the Grid functions.
- Remote CRUD operations—The section elaborates on scenarios, in which data is retrieved from and submitted to a remote data service through HTTP requests made by the Kendo UI DataSource.
- Remote data binding—The article provides information on server filtering, paging, and other features of the Grid.
- Kendo UI editing functionality—The editing functionality in some Kendo UI widgets, including the Grid, is implemented with a specific editor element or form that is bound to the model by using the Kendo UI MVVM bindings.
Initializing the Grid
To initialize the Grid, use either of the following approaches:
Using an Empty div
When you initialize the Grid from an empty
Using an HTML Table
When you initialize the Grid from an HTML table, the widget uses a Kendo UI DataSource instance. The content of the cell is extracted and populates the DataSource in the following way:
- The names of the data fields in the DataSource are either created from the content of the header cells or from the
data-fieldattributes of the header cells.
data-fieldattributes. Otherwise the cell content of the header has to meet the following requirements:
- No spaces
- No special characters
- The first character has to be a letter
If you create the Grid from an HTML table but the DataSource is configured to use transport and remote operations, a remote request is made for the initial Grid state even though the table might be already populated. This behavior is defined by design and cannot be avoided except when using the MVC wrapper of the Grid.
When the Grid is created from an existing table, the Grid provides the following
column settings that can be defined through the HTML attributes. Except for the width column styles, all attributes have to be applied to the
idattributes define the id of the columns.
data-fieldattributes define the names of the data fields.
widthstyles when applied to the respective
<col>elements set the width of the columns.
data-typeattributes define the data types.
data-templateattributes set the column templates.
data-menuattributes enable or disable the column menu.
data-sortableattributes enable or disable sorting.
data-filterableattributes enable or disable filtering.
data-groupableattributes enable or disable grouping.
data-indexattributes define a zero-based number indicator for the columns.
To associate the
aria-describedby attribute of the cells to the corresponding column header in a navigable Kendo UI Grid, define the
data-index attributes for each
It is not possible to define other column-related settings through HTML attributes in the
data-columns attribute when using the declarative widget initialization.
As the previous and the following examples demonstrate, the client object of the Grid is attached to a
<div> in the first case and to a
<table> in the second case. However, the generated HTML output of the Grid entirely depends on the settings of the widget and it will always be the same regardless of the way the widget is initialized. For the complete example, refer to the demo on initializing the Grid from an HTML table.
Jquery Grid Example
Functionality and Features
- Data operations
- Export options
- Advanced implementations
- More settings
For more information on implementing specific scenarios, refer to the Knowledge Base section.
Referencing Existing Instances
Jquery Grid Inline Editing Example
To refer to an existing Grid instance:
- Use the
Once a reference is established, use the Grid API to control its behavior.