Skip to main content

Blazor Grid

  • 10 minutes to read

The DevExpress Grid for Blazor (DxGrid) allows you to display, manage, and shape tabular data.

Grid Overview

Read Tutorial: Get Started Run Demo: Overview Watch Video: Get Started

Data Binding

The DevExpress Blazor Grid supports various data binding scenarios:

Run Demo: Data Binding Run Demo: Integrate Grid into Loading Panel

Sort Data

Users can sort data by an unlimited number of columns. The sort glyph indicates the current sort order (ascending or descending). You can also sort data in code.

Blazor Grid Sort Data

Read Tutorial: Sort Data Run Demo: Sort Data Watch Video: Sort Data

Group Data

The Grid supports grouping by value and display text, interval grouping, and custom grouping algorithms. Users can drag and drop column headers onto the group panel to group Grid data. You can also group data by any number of columns in code.

Blazor Grid Group Data

Read Tutorial: Group Data Run Demo: Group Data Watch Video: Group Data

Edit Data

Use the EditMode property to choose one of the following data edit modes:

  • Edit Form (Default) – The Grid displays the edit form instead of the edited data row.
  • Popup Edit Form – The Grid displays the edit form in a pop-up window.
  • Edit Row – The Grid displays inline editors instead of the edited row.
  • Edit Cell – The Grid displays an in-place editor instead of the focused cell’s content. Unlike other modes, the Grid in EditCell mode allows users to click a data cell to edit it. The Grid validates and saves all cell values simultaneously when focus leaves the edited row.

Blazor Grid Edit Data

Read Tutorial: Edit Data Run Demo: Edit Data Watch Video: Edit Data

Validate User Input

The Grid uses the standard DataAnnotationsValidator to validate user input (based on data annotation attributes defined in an edit model). Once a user removes focus from data editors or attempts to save an edited row, the Grid component marks editors with colored outlines or displays validation icons.

You can implement your custom validator components and declare them in the CustomValidators template. To disable input validation, set the ValidationEnabled option to false.

Blazor Grid Validation in Cell Editors

Read Tutorial: Validate User Input Run Demo: Input Validation

Filter Data

The DevExpress Blazor Grid ships with the following elements that allow users to filter data.

Filter Row

The filter row displays in-place editors where users can type filter values. The grid can filter data by value or display text. You can also manage filter options in code.

Blazor Grid Filter Row

Read Tutorial: Filter Row Run Demo: Filter Row

Users can type text in the search box to filter and highlight data. You can use the SearchText property to specify the search text in code.

Search Box Overview

Read Tutorial: Search Box Run Demo: Search Box

Column Filter Menu

The Excel-inspired filter menu displays unique column values as a checklist with a Select All option. An integrated search box is also available. You can modify the value list or implement a template to completely customize the menu.

Grid Filter Menu

Read Tutorial: Column Filter Menu Run Demo: Column Filter Menu

Filter in Code

The DevExpress Blazor Grid allows you to filter its data in code. To apply filter criteria, create a criteria operator object that specifies the filter expression and send this object to one of the following methods:

SetFilterCriteria
Applies a filter to grid data.
SetFieldFilterCriteria
Applies a filter to the specified data field.

These methods allow you to filter grid data by every data source field, including fields that are not displayed in the grid. When a filter is applied, the Grid raises the FilterCriteriaChanged event.

Read Tutorial: Filter API Run Demo: Filter API

Summary

You can compute summaries across all Grid records (total summaries) or for individual groups (group summaries).

The Grid includes predefined aggregate functions: Sum, Min, Max, Avg, and Count. In addition to these functions, custom logic can also be used to calculate summary values.

Blazor Grid Summary

Read Tutorial: Summary Run Demo: Total Summary Watch Video: Summary

Selection

The DevExpress Blazor Grid supports single and multiple row selection. Users can click rows or use a specially-designed column to select/deselect records. You can also manage selection in code.

Blazor Grid Selection

Read Tutorial: Selection and Focus Run Demo: Selection Column

Focus

Set the FocusedRowEnabled property to true to display the focused row in the grid. Users can click a row to focus it. You can call the SetFocusedDataItemAsync(Object) and SetFocusedRowIndex(Int32) methods to move focus. When the focused row changes, the component raises the FocusedRowChanged event.

Blazor Grid Focused Row

Run Demo: Focused Row View Example: How to display the Chart based on the Grid focus

Master-Detail View

Row Preview

The grid can display preview sections under each data row across all columns. These sections can display any content, including tables, values from data source fields, custom text, etc. Use the DetailRowTemplate to create a template for the row preview section.

Blazor Grid Preview Row

Run Demo: Row Preview

Nested Grid

The DevExpress Blazor Grid allows you to build hierarchical layouts of any complexity and depth. To implement the layout with a nested grid, add the DetailRowTemplate to the master grid’s markup, and add the detail grid to the template.

Blazor Grid Master Detail View

Run Demo: Nested Grid View Example: How to add a nested Grid to create a master-detail layout View Example: Master-Detail with partial loading

Templates

The Grid implements a number of template properties that allow you to customize content and appearance of different Grid elements. Templates implement a context parameter that contains element-related data and a reference to the Grid component, so you can access its API.

Read Tutorial: Templates Run Demo: Column Templates Run Demo: Group Row Templates

Columns

The DevExpress Blazor Grid includes different column types:

Data column
You can supply values from the bound data source or implement a custom value calculation logic.
Command column
Displays CRUD-related buttons (New, Edit, and Delete) and the Clear button that resets values in the filter row.
Selection column
Allows users to select and deselect rows. Displays checkboxes in multiple selection mode and radio buttons in single selection mode.
Band Column
You can combine columns into logical groups called bands. Each group has its own header.

Read Tutorial: Columns Watch Video: Column Types, Column Resize and Visibility

Column Reorder

Users can reorder Grid columns at runtime. The Grid also supports the Column Chooser that allows users to manage column visibility and position. You can prevent users from reordering columns.

Blazor Grid Column Chooser

Run Demo: Column Chooser Run Demo: Responsive Grid

Column Resize

Users can resize columns at runtime. You can also call the AutoFitColumnWidths method to adjust column widths to their content automatically.

Grid - NextColumn Resize Mode

Run Demo: Grid - Column Resize Run Demo: Fit Column Widths

Fixed Columns

The Grid allows you to anchor columns to the Grid’s left or rightmost edge. The anchored columns remain visible when a user scrolls the Grid horizontally. Users can display and hide fixed columns or change their order and size. However, users cannot move regular columns to a fixed column zone and vice versa.

Set a column’s FixedPosition property to Left or Right to freeze the column.

Fixed Columns

Run Demo: Fixed Columns View Example: Display a Context Menu

Toolbar

You can add a toolbar at the top edge of a Grid component and implement data shaping operations to perform in the UI. Use the ToolbarTemplate to attach a custom toolbar to Blazor Grid.

Blazor Grid with Toolbar

Run Demo: Toolbar View Example: Implement CRUD-Related Buttons in Toolbar

Save and Restore Layout

You can save and restore the Grid’s layout. Layout information includes the current page, column sort order and direction, column position, filter values, and grouped columns.

To save and restore the component layout, handle the following events:

LayoutAutoSaving
Raised when the layout settings change. The event’s Layout argument contains a GridPersistentLayout object with updated layout settings. Save this object to the desired storage.
LayoutAutoLoading
Raised when the Grid is initialized. The component starts loading the layout after it applies the initial state specified in the markup. To load layout settings from a previously saved GridPersistentLayout object, assign it to this event’s Layout argument.

You can call the SaveLayout and LoadLayout methods to save and restore the Grid layout on demand.

DevExpress Blazor Grid - Save and Restore the Layout

Run Demo: Save and Restore the Layout View Example: Save and load layout information

Export Data

The Grid allows you to export data to XLS, XLSX, and CSV formats. When exporting to Excel formats, the resulting file can maintain data grouping, sorting, filtering, totals, and group summaries. Call the following methods to export data:

All these methods accept the options parameter that allows you to customize export settings. The grid exports data of every data column. A column whose Visible property is set to false is hidden in the document (has a zero width). Set a column’s ExportEnabled property to false to prevent the export of a specific column’s data.

Read Tutorial: Export Data Run Demo: Export Data

Appearance

Handle the CustomizeElement event to customize the appearance of most Grid UI elements based on custom conditions.

Blazor Grid Appearance Customization

Run Demo: Conditional Formatting Run Demo: Alternating Row Style View Example: Customize cell appearance based on custom conditions

Size Mode

Specify the SizeMode property to display Grid elements (for instance, text size and row height) and other built-in grid components (for instance, pager and buttons) in small, medium, or large predefined size.

Editor Render Mode

The Grid component can render editors in filter row and edit row cells in the following modes:

Integrated

The Grid renders editors so that they occupy the entire cell. Editor borders are not displayed.

Integrated Render Mode

Detached

The Grid renders standalone editors with borders and paddings between an editor and cell borders.

Detached Render Mode

Use the EditorRenderMode property to specify how the Grid renders editors.

Paging and Scrolling

Paging

The DevExpress Blazor Grid splits data rows across multiple pages and displays a pager to enable data navigation. The pager can contain the page size selector, which allows users to change page size at runtime.

Blazor Grid Paging

Read Tutorial: Paging Run Demo: Paging

Scrolling

The DevExpress Blazor Grid can display horizontal and vertical scrollbars.

Blazor Grid: Horizontal and Vertical Scrolling

For more information about scrolling, refer to the following topic: Scrolling in Blazor Grid.

Virtual Scrolling

Set the VirtualScrollingEnabled property to true to enable virtual scrolling in the Grid. In this mode, the Grid hides the pager, lists all data rows on the same page and displays the vertical scrollbar for navigation.

To optimize performance, our Grid only renders rows that appear in the component viewport. For server-side data, the Grid requests data in small chunks as the user scrolls (up/down).

Virtual Scrolling

Run Demo: Virtual Scrolling

Keyboard Support

Users can access every UI element in the Grid with a keyboard. Keyboard navigation is implemented on the client and works seamlessly even in Blazor Server apps with a slow connection.

Read Tutorial: Keyboard Support

Responsive Layout

The DevExpress Layout Breakpoint component allows you to adapt page layouts to different screen sizes. You can modify the grid layout (for instance, add and hide columns) when a screen size breakpoint is activated.

Responsive Grid Layout

Run Demo: Responsive Grid

Drag and Drop Rows

If your DxGrid uses an ObservableCollection<T> data source, you can incorporate row drag and drop support for the following usage scenarios:

  • Drag rows in a single grid (reorder rows)
  • Drag rows between two grids
  • Drag rows between two grids and drop them at a specified position

Our drag-and-drop implementation uses three jQuery widgets: (draggable, droppable, and sortable).

View Example: Incorporate Drag and Drop Support

Loading Panel

The DevExpress Loading Panel component can display a loading indicator while its content is loading. You can use this component to indicate that grid data is loading.

Loading Panel

Run Demo: Loading Panel