Typical usage
Here is an example of a data grid that uses in-memory data and enables features including pagination, sorting, filtering, column options, row highlighting and column resizing.
All columns, except 'Bronze', have a Tooltip
parameter value of true
.
When using this for a TemplateColumn
(like 'Rank' here), you need to also supply a value for the TooltipText
parameter. No value given equals no tooltip shown.
When using this for a PropertyColumn
, a value for the TooltipText
is not required. By default, the value given for Property
will be re-used for the tooltip. If you do supply a value for TooltipText
its outcome will be used instead.
TooltipText
is a lambda function that takes the current item as input and returns the text to show in the tooltip (and aria-label
).
Look at the Razor tab to see how this is done and how it can be customized.
The Country filter option can be used to quickly filter the list of countries shown. Pressing the ESC key just closes the option popup without changing the filtering currently being used. Pressing enter finishes the filter action by the current input to filter on and closes the option popup.
To test set ResizeType on the DataGrid to either DataGridResizeType.Discrete or DataGridResizeType.Exact
Remove the parameter completely to get the original behavior
Use ResizeColumnOnAllRows="false" to limit column resizing to header cells only (default is true for all rows)
Rank | Name of the country | Gold | Silver | Bronze | Total |
---|---|---|---|---|---|
United States of America | 40 | 44 | 42 | 126 | |
People's Republic of China | 40 | 27 | 24 | 91 | |
Japan | 20 | 12 | 13 | 45 | |
Australia | 18 | 19 | 16 | 53 | |
France | 16 | 26 | 22 | 64 | |
Netherlands | 15 | 7 | 12 | 34 | |
Great Britain | 14 | 22 | 29 | 65 | |
South Korea | 13 | 9 | 10 | 32 | |
Italy | 12 | 13 | 15 | 40 | |
Germany | 12 | 13 | 8 | 33 |