jQuery Grid

The jQuery Grid by jQWidgets, called jqxGrid, is designed to provide rich functionality, cross-browser support, easy to use APIs and works on PC and mobile devices. It offers intuitive support for interacting with data, including paging, grouping and sorting. jqxGrid delivers the features and flexibility to match the ultimate demands of the modern web-based applications. It providers modern UI and unbeatable end-user capabilities.

Features

• Great Performance
• Unique Flexibility
• Touch & Mobile devices support
• Data Binding
• Outlook-Style Grouping
• Sorting
• Filtering
• Paging
• Nested Grids
• Row Details
• Column Types
• Pinned Columns
• Cells Editing and Validation
• Aggregates
• Columns Hierarchy
• Cells Formatting
• Custom Cells Rendering
• Localization
• Cross-browsers compatibility
• Web Standards Compliant
• Optimized for Performance
• Appearance and Themes

Great Performance

jQuery Grid offers fast data updates on all end-user features such as grouping, sorting, paging, and scrolling. jQuery Grid also comes with row and column virtualization, which minimizes the amount of items that need to be rendered, and ensures unbeatable performance in spread-like scenarios with thousands of rows and columns.

Unique Flexibility

jQuery Grid is developed on top of the jQWidgets UI Framework and delivers a combination of unique features which can be easily enabled, disabled or customized. jQuery Grid provides the ultimate flexibility over your data and its presentatios including paging, grouping and sorting.

Data Binding

jQuery Grid has a built-in data binding logic designed to support various data sources and to handle large datasets. The Grid supports several modes of databinding allowing you to choose the most appropriate for your web application scenario.

• Local Data – can be implemented with minimal configuration. jQuery Grid is loaded from local array data.
• Xml Data – jQuery Grid can be loaded from XML data using Ajax request.
• JSON Data – jQuery Grid can be loaded from JSON data using Ajax request.
• CSV Data – load the data grid from CSV.
• Tab Data – load data data grid from Tab-Delimited (TSV).
• Remote Data- load the data grid using JSONP. JSONP (JSON with Padding) represents JSON data wrapped in a function call. JSONP is an effective cross-domain communication technique frequently used to bypass the same-origin policy limitations.
• Virtual Data – jQuery Grid can be populated with data on demand when the end-users scroll or change the current page.

Outlook-Style Grouping

With jQuery Grid, users can easily group data with dragging a column header to a group panel which defines the grouping order and hierarchy. Users can also rearrange the grouping hierarchy by dragging and dropping the grouping headers in the group panel.

Sorting

The jQuery Grid supports built-in powerful sorting capabilities like one-click automatic sorting, selection of sort option from a context menu, and sorting through APIs. The data grid automatically chooses the most appropriate comparison. Users can also implement and use a custom sort comparer. The sorting works well with all possible configurations including rows grouping and paging. jQuery Grid also has an option to display an additional background in the sorted column.

Paging

The GridView has integrated paging functionality that lets the users to view large data sets in multiple pages for faster loading and intuitive navigation. Users also have an option to select how many records they would like to see on a page by using a page-size dropdown. To navigate to a page, users can enter the page number in the page-input box and click the ‘enter’ key or they can click the ‘next’ and ‘previous’ navigation buttons to navigate to the next or the previous page.

Nested Grids

jQuery Grid has a very flexible layout that enables easy nesting of any content or UI component including nested data grids.

Row Details

Row details are built-in the data grid and are easy to use. Users can change the height of the row details area and use custom data templates. The Grid APIs also allow programmatic expand and collapse of the row details.

Column Types

jQuery Grid offers several built-in column types. In this version it has built-in ‘Number’ and ‘CheckBox’ columns.

jQuery Grid supports custom columns rendering. Users can easily replace the default rendering logic and specify custom rendering of a column’s header and cells.

Pinned Columns

jQuery Grid supports Excel-like pinned (frozen) rows. This feature allows users to pin columns to the left the gridview’s canvas, which is indicated by a different background color for the pinned column. This feature is very suitable for very large tables where columns need to be visible during scrolling.

Cells Formatting

The jQuery Grid Cells Formatting feature allows users to specify a formatting string to a Grid column and easily format numeric values like decimal numbers, floating-point numbers, integer numbers, currency and percentage values. Dates formatting is supported, too.

Custom Cells Rendering

The datagrid programming model is very flexible and extensible. It allows users to create their own cells rendering functions and apply them to the datagrid columns. This feature enables the user to display any html content in the grid cells.

Localization

jQuery Grid is designed to support localization for multi language web-based applications. All strings of Grid buttons, menu items and elements can be changed.

Works across devices and browsers

jQuery Grid takes the JavaScript & HTML UI development to a new level. It is platform independent, cross-browser compatible and works on PC and mobile devices.

Web Standards Compliant

Don’t spend time testing on different devices and browsers. Use a reliable, CSS compliant JavaScript Grid based on jQuery, HTML5 and CSS3.

Optimized for Performance

Small footprint, highly responsive, carefully optimized to deliver outstanding experience on a wide range of devices, operating systems and browsers.

Appearance and Styling

jQuery Grid ships with 5 professionally designed themes. Each theme is stored in a separate CSS file which makes it easy to export, customize and re-use. The themes can be easily switched using a single property. In addition, the visual appearance of any grid cell, row or column can be changed.