- 7 minutes to read
The GridView extension allows you to display data source fields and records as columns and rows in a table.
The extension works only in bound mode. You can bind the grid to any standard data source type: SqlDataSource, ObjectDataSource, XmlDataSource, AccessDataSource, and SiteMapDataSource.
Use the KeyFieldName property to set a data source’s key field name. The extension’s Bind, BindToCustomData, BindToEF, BindToLINQ, and BindToXML methods allow you to bind the extension to data.
Database Server Mode
The grid supports database server mode. In this mode, the grid loads only required items to the server memory and implements data-aware operations (for example, filtering) at the database level.
The grid extension displays data in a table format. Data sources provide data as fields and records. The grid extension displays data fields as columns and records - as data rows.
You can resize a column header to modify the column’s width (SettingsResizing).
The grid extension supports drag-and-drop functionality that allows you to move a column to the desired position among other columns. You can use the AllowDragDrop property to allow end users to move all grid columns or a column’s Settings.AllowDragDrop property to enable drag and drop for an individual column.
Header and Data Cell Bands
The grid extension enables you to organize columns in logical groups (bands) and display them in multiple rows. Header bands (MVCxGridViewBandColumn) organize grid columns into logical groups and display hierarchical multi-row headers.
Data cell bands (Columns) allow you to display a data record hierarchically.
The grid allows you to fix columns on the left side and display these columns onscreen when the columns’ total width exceeds the grid width. Enable the horizontal scrolling (HorizontalScrollBarMode) and set a column’s FixedStyle property to Left to fix the column.
Truncate Cell Text
The grid can truncate cell (‘…’) values if they don’t fit the cells width ( AllowEllipsisInText).
The grid provides the following built-in edit modes that allow end-users to edit grid data (Mode):
Edit Form Template
You can use any extensions to create a custom layout for the edit form.
Edit Form Layout
The EditFormLayoutProperties property allows you to customize the edit form layout.
You can sort the grid data by an unlimited number of columns. Use a column’s AllowSort property or the grid’s AllowSort option to allow end users to sort the specified column or all columns in the grid.
You can use the following UI elements to filter grid data:
Auto-Filter Row (See demo)
Built-in Search Panel (See demo)
Column Header Filter Dropdowns (See demo)
Filter Control (See demo)
The grid enables you to use drag-and-drop operations (ShowGroupPanel) or APIs to group data against an unlimited number of data columns. Use a column’s AllowGroup property or the grid’s AllowGroup option to allow end users to group the specified column or all columns in the grid.
The grid allows you to group grid data by multiple columns at once and combine them into a single grouping level (MergeGroupsMode).
The grid allows you to display brief information about groups of rows or individual data columns (summaries) in the footer (ShowFooter). The following summary types are available:
The grid supports master-detail data. You can link a master table to multiple detail tables. Each detail table can be the master of another table.
The grid supports a model-based data validation when you use jQuery validation and decorate model class properties with the DataAnnotations attributes.
The grid allows you to export data in the following formats: PDF, XLS, XLSX, RTF, CSV, DOCX.
The grid provides the built-in pager (SettingsPager) that enables end-users to navigate through data. The pager consists of navigation buttons: “next”, “last”, “previous”, “first”, “All”.
Set the Mode property to EndlessPaging to enable endless paging mode that enables you to load grid rows on demand when an end user scrolls the grid.
The grid supports virtual paging mode (VerticalScrollBarStyle) that allows end-users to use the vertical scroll bar to navigate through grid pages.
The built-in keyboard support allows you to use the keyboard to navigate the grid (KeyboardSupport).
You can highlight alternating (odd) grid rows with a different style (Enabled).
The grid allows you to display the horizontal and/or vertical grid lines (GridLines).
You can focus a row in the grid. Note that you can select several records simultaneously but you can focus only one record at a time.
The toolbar enables you to group grid commands. The grid stores toolbars (MVCxGridViewToolbar) in its Toolbars collection. You can add or remove toolbars, change their availability and position, and populate them with toolbar items (MVCxGridViewToolbarItem).
The customization dialog enables users to sort, group, filter, and hide/show columns in the grid on mobile devices.
The grid provides the following context menu types (Enabled):
- Row (EnableRowMenu)
- Column header (EnableColumnMenu)
- Footer (EnableFooterMenu)
- Group footer (EnableGroupFooterMenu)
- Group panel (EnableGroupPanelMenu)
The column chooser allows users to use drag and drop to show/hide columns in the grid (EnableCustomizationWindow)
The grid allows you to build adaptive or responsive page layouts. The extension can automatically resize or hide its elements when the browser window is resized (SettingsAdaptivity).
The grid supports templates and allows you to customize its UI elements’ appearance and layout.
The grid supports cookies that allow your site’s visitors to personalize pages. If cookies are enabled, the browser saves grid options that can be restored in future sessions.
Save and Restore Layout
You can save the grid’s layout to a database and then restore it.