Blazor DataGrid - Overview
- EXAMPLE
- VIEW SOURCE
- EDIT IN TELERIK REPL
- Change Theme
default
| Product Name | Cost | Discontinued | Category | In Stock | Quantity Per Unit |
|---|
|
Category: Beverages |
||||||||
| Chai | $18.00 | Available | Beverages | 10 boxes x 20 bags | ||||
| Chang | $19.00 | Available | Beverages | 24 - 12 oz bottles | ||||
| Guaraná Fantástica | $4.50 | Discontinued | Beverages | 12 - 355 ml cans | ||||
| Sasquatch Ale | $14.00 | Available | Beverages | 24 - 12 oz bottles | ||||
| Steeleye Stout | $18.00 | Available | Beverages | 24 - 12 oz bottles | ||||
| Côte de Blaye | $263.50 | Available | Beverages | 12 - 75 cl bottles | ||||
| Chartreuse verte | $18.00 | Available | Beverages | 750 cc per bottle | ||||
| Ipoh Coffee | $46.00 | Available | Beverages | 16 - 500 g tins | ||||
| Laughing Lumberjack Lager | $14.00 | Available | Beverages | 24 - 12 oz bottles | ||||
| Outback Lager | $15.00 | Available | Beverages | 24 - 355 ml bottles | ||||
- Overview.razor
- ProductService.cs
- CategoryService.cs
- ProductDto.cs
- CategoryDto.cs
The Grid component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
Description
Visualize data and let users edit it with the powerful Blazor DataGrid component. With support for paging, sorting, filtering, lazy loading, flexible data binding to any application data source, export, selection, powerful state management, templates and many other features, this comprehensive control can be trivially setup to cover a variety of use cases. For a detailed overview, see the Blazor Grid documentation.
This demo demonstrates some of the most popular features of the Telerik UI for Blazor DataGrid. By default the items in the component are grouped by their Category which is done through the Blazor Grid State. You can filter them by using the filter icon next to the name of the column in the respective column header. You can customize the rendering of a column by using the Template as shown in the Image Column. To group the Blazor DataGrid by another column, drag the column header and drop it in the designated place. The Grid fetches its data from a SQL database connected through service and you can Add, Edit, and Delete items by using the respective buttons.
Key Functionalities and Features
- DataGrid Filtering - The Grid component offers different options to filter the records.
- DataGrid Grouping - The Grid component offers support for grouping data.
- DataGrid Selection - select one or multiple rows via clicks or checkboxes
- DataGrid State - get or set the Grid configuration programmatically
- DataGrid Virtual Scrolling - allow the user to scroll vertically through all records
- DataGrid Row Drag&Drop - allows you to move a row or a multitude of rows between different parents in the same Grid
- DataGrid Sorting - The Grid component offers support for sorting data.
- DataGrid Hierarchy - nest Grids and visualize parent-child relations between data records