aspnet-5823-components-grid-view.md
The GridView control allows you to display data from a data source in a grid. The grid displays data source fields and records as columns and rows in a table.
ASPxGridView is the GridView Control on the server side, and ASPxClientGridView is its client-side equivalent.
The control 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. DataSourceID and DataSource specify the data source’s ID and data source object.
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 control supports unbound columns that are not bound to any data source field. Use the CustomUnboundColumnData event or specify the UnboundExpression property to populate an unbound column with data.
The grid includes the following built-in edit modes that allow users to edit grid data (Mode):
You can use any controls to create a custom layout for the edit form.
The EditFormLayoutProperties property allows you to customize the edit form layout.
The grid control displays data in a table format. Data sources contain data as fields and records. The grid control 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 control supports drag-and-drop functionality that allows you to move a column to a different position. You can use the AllowDragDrop property to allow users to move all grid columns or a column’s Settings.AllowDragDrop property to enable drag and drop for an individual column.
The grid control enables you to organize columns in logical groups (bands) and display them in multiple rows. Header bands (GridViewBandColumn) organize grid columns into logical groups and display hierarchical multi-row headers.
Data cell bands (Columns) allow you to display a data record hierarchically. Specify the CellRowSpan and CellRowSpan properties to arrange a column header and data cells in a data cell band layout.
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. To fix a column, enable horizontal scroll (HorizontalScrollBarMode) and set the column’s FixedStyle property to Left.
The grid can truncate cell values and display an ellipsis (‘…’) if they don’t fit the cell width (AllowEllipsisInText).
You can sort grid data by an unlimited number of columns. Use a column’s AllowSort property or the grid’s AllowSort option to allow 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 users 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 GroupInterval property enables you to change how data rows are grouped, especially for columns that contain date/time values.
The grid allows you to group data by multiple columns at once and combine them into a single group (MergeGroupsMode).
The grid allows you to display a brief description about groups of rows or individual data columns (summaries) in the footer (ShowFooter). The following summary types are available:
Total Summary - Add the ASPxSummaryItem object(s) to the TotalSummary collection.
Group Summary - Add the ASPxSummaryItem object(s) to the GroupSummary collection.
Custom Summary - Set the SummaryType property to SummaryItemType.Custom and handle the ASPxGridBase.CustomSummaryCalculate event to calculate the custom summary.
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.
You can validate data in grid data rows and display error icons/messages for invalid fields.
Validate Rows - RowValidating, DoRowValidation()
Validate Edit Cells - ValidationSettings
Custom Validation - EnableCustomValidation
The grid allows you to export data in the following formats: PDF, XLS, XLSX, RTF, CSV, DOCX.
The grid can automatically merge adjacent cells with the same values (ASPxGridViewBehaviorSettings.AllowCellMerge, GridViewDataColumnSettings.AllowCellMerge).
You can use the UI elements (AllowSelectByRowClick, ShowSelectCheckbox, ShowSelectButton, SelectAllCheckboxMode) or APIs on the client and server side to select grid data.
The grid includes a built-in pager (SettingsPager) that enables users to navigate through data. The pager consists of navigation buttons: “next”, “last”, “previous”, “first”, and “All”.
Set the Mode property to EndlessPaging to enable endless paging mode, which enables you to load grid rows on demand when a user scrolls the grid.
Use the HorizontalScrollBarMode and VerticalScrollBarMode properties to enable the horizontal and vertical scroll bars.
The grid supports virtual paging mode (VerticalScrollBarStyle), which allows users to use the vertical scroll bar to navigate through grid pages.
Built-in keyboard support allows you to use the keyboard to navigate the grid (KeyboardSupport).
You can highlight alternate (odd) grid rows with a different style (Enabled).
A preview row displays large memo fields or custom data across all grid columns (ShowPreview, PreviewFieldName).
The grid allows you to display horizontal and/or vertical grid lines (GridLines).
You can focus a row in the grid. Note that you can select multiple records simultaneously, but you can focus only one record at a time.
Learn more | See demo | Learn more
The toolbar enables you to group grid commands. The grid stores toolbars (GridViewToolbar) in its Toolbars collection. You can add or remove toolbars, change their availability and position, and populate them with toolbar items (GridViewToolbarItem).
The customization dialog enables users to sort, group, filter, and hide/show columns in the grid on mobile devices.
The grid includes the following context menu types (Enabled):
The column chooser allows users to drag column headers to show/hide columns in the grid (EnableCustomizationWindow).
The grid allows you to build adaptive or responsive page layouts. The control can automatically resize or hide its elements when a user resizes the browser window (SettingsAdaptivity).
The grid supports templates and allows you to customize its UI elements’ appearance and layout.
You can apply format rules (GridFormatConditionBase object descendants) to the grid (FormatConditions) to customize the appearance of the grid’s data.
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.
You can save the grid’s layout to a database and then restore it.
The grid is designed to comply with Section 508 Standards and W3C’s latest accessibility recommendations such as WCAG (2.0) and WAI-ARIA (1.0). The control implements the AccessibilityCompliant property that allows more accessible markup to be generated for the control.
See Also