Example of Adaptive Layout in Blazor DataGrid Component
This sample shows the rendering order of DataGrid row elements as well as adaptive dialogs.
Order ID | Customer ID | Order Date | Freight |
|---|
| 10001 | ALFKI | 5/15/1991 | $2.30 |
| 10002 | ANATR | 4/4/1990 | $3.30 |
| 10003 | ANTON | 11/30/1957 | $4.30 |
| 10004 | BLONP | 10/22/1930 | $5.30 |
| 10005 | BOLID | 2/18/1953 | $6.30 |
| 10006 | ALFKI | 5/15/1991 | $4.60 |
| 10007 | ANATR | 4/4/1990 | $6.60 |
| 10008 | ANTON | 11/30/1957 | $8.60 |
| 10009 | BLONP | 10/22/1930 | $10.60 |
| 10010 | BOLID | 2/18/1953 | $12.60 |
| 10011 | ALFKI | 5/15/1991 | $6.90 |
| 10012 | ANATR | 4/4/1990 | $9.90 |
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.