Blazor DataGrid Example - Adaptive Rendering
This sample shows the rendering order of DataGrid row elements as well as adaptive dialogs.
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 |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.11 |
| 10002 | ANATR | 4/4/1990 | $4.11 |
| 10003 | ANTON | 11/30/1957 | $6.11 |
| 10004 | BLONP | 10/22/1930 | $8.11 |
| 10005 | BOLID | 2/18/1953 | $10.11 |
| 10006 | ALFKI | 5/15/1991 | $3.33 |
| 10007 | ANATR | 4/4/1990 | $9.33 |
| 10008 | ANTON | 11/30/1957 | $15.33 |
| 10009 | BLONP | 10/22/1930 | $21.33 |
| 10010 | BOLID | 2/18/1953 | $27.33 |
| 10011 | ALFKI | 5/15/1991 | $6.33 |
| 10012 | ANATR | 4/4/1990 | $12.33 |
Items per page
The EnableAdaptiveUI property is used to render the grid filter, sort, edit, and column chooser dialogs adaptively. The RowRenderingMode property is used to render the DataGrid row elements in the following ways,
- Horizontal - Displays the grid row elements horizontally.
- Vertical - Renders the grid row elements vertically.
By defining the PageSizes property in the GridPageSettings , you can specify a customized list of page sizes, and it will be displayed in the pager dropdown.
More information about the Adaptive UI feature can be found in this documentation section.