Blazor DataGrid Example - Custom Command Buttons
Employee ID | First Name | Last Name | Hire Date | Country | View Details |
|---|
| 1 | Nancy | Davolio | 1/5/1992 | USA | |
| 2 | Andrew | Fuller | 3/8/1993 | USA | |
| 3 | Janet | Leverling | 11/4/1992 | UK | |
| 4 | Steven | Peacock | 5/5/1992 | USA | |
| 5 | Margaret | Buchanan | 7/5/1993 | UK | |
| 6 | Micheal | Suyama | 8/5/1993 | UK | |
| 7 | Robert | King | 9/5/1993 | USA | |
| 8 | Laura | Callahan | 10/5/1993 | UK | |
| 9 | Anne | Dodsworth | 11/5/1993 | USA |
This sample demonstrates the DataGrid custom command button column feature.
Create custom command buttons by setting the Type property of the GridCommandColumn component to None. Use the CommandClicked event to capture user interactions with the custom buttons. The CommandClickEventArgs provides access to the corresponding row details.
In this demo, the following implementation is demonstrated:
- A custom View Details column with command button configuration using
GridCommandColumn. - The
CommandClickedevent captures user button clicks. - The SfDialog component displays detailed information about the selected row.
Click the view icon in the View Details column to see additional information about that row.
For more detailed information about custom command columns, refer to the custom command column documentation.