Blazor DataGrid Example - Adaptive Rendering
Tracking ID Press Enter to sort. Press Alt Down to open filter Menu | Recipient Press Enter to sort. Press Alt Down to open filter Menu | Status Press Enter to sort. Press Alt Down to open filter Menu | Weight (kg) Press Enter to sort. Press Alt Down to open filter Menu | Charges Press Enter to sort. Press Alt Down to open filter Menu | Origin Press Enter to sort. Press Alt Down to open filter Menu | Region Press Enter to sort. Press Alt Down to open filter Menu |
|---|
| No records to display |
Items per page
This sample demonstrates the adaptive rendering capabilities of the Syncfusion® Blazor DataGrid, including row rendering modes and adaptive dialog functionality for actions such as filtering, sorting, searching, editing, and column selection.
The EnableAdaptiveUI property enables optimized, responsive rendering of grid dialogs across various screen sizes and devices.
The RowRenderingMode property defines how row elements are displayed:
- Horizontal - Displays rows in a traditional horizontal layout.
- Vertical - Displays rows in a vertical layout, ideal for mobile and responsive designs.
The pager dropdown is customized by configuring the PageSizes property in the GridPageSettings class to define a specific set of page size options displayed in the pager dropdown.
Column-level aggregates are configured via GridAggregates; the sample displays the Charges column total in a FooterTemplate.
For more detailed information about implementing adaptive UI features in the DataGrid component, refer to the Adaptive Layout documentation.