Blazor DataGrid Example - Adaptive Rendering
Order ID Press Enter to sort. Press Alt Down to open filter Menu | Customer ID Press Enter to sort. Press Alt Down to open filter Menu | Order Date Press Enter to sort. Press Alt Down to open filter Menu | Freight 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 DataGrid component, including the rendering order of row elements and adaptive dialog functionality.
The EnableAdaptiveUI property enables adaptive rendering of grid filter, sort, edit, and column chooser dialogs, providing an optimized user experience across different device sizes.
The RowRenderingMode property controls how DataGrid row elements are rendered:
- Horizontal - Displays grid row elements in a traditional horizontal layout.
- Vertical - Renders grid row elements in a vertical layout, ideal for mobile and responsive designs.
You can customize the pager dropdown by configuring the PageSizes property in the GridPageSettings class. This allows you to define a specific set of page size options displayed in the pager dropdown.
For more detailed information about implementing adaptive UI features in the DataGrid component, refer to the Adaptive Layout documentation.