Blazor Grid - Overview

Category: Beverages

Chai $18.00 Available Beverages
In stock:39
In stock:39
10 boxes x 20 bags
Chang $19.00 Available Beverages
In stock:17
In stock:17
24 - 12 oz bottles
Guaraná Fantástica $4.50 Discontinued Beverages
In stock:20
In stock:20
12 - 355 ml cans
Sasquatch Ale $14.00 Available Beverages
In stock:111
In stock:111
24 - 12 oz bottles
Steeleye Stout $18.00 Available Beverages
In stock:20
In stock:20
24 - 12 oz bottles
Côte de Blaye $263.50 Available Beverages
In stock:17
In stock:17
12 - 75 cl bottles
Chartreuse verte $18.00 Available Beverages
In stock:69
In stock:69
750 cc per bottle
Ipoh Coffee $46.00 Available Beverages
In stock:17
In stock:17
16 - 500 g tins
Laughing Lumberjack Lager $14.00 Available Beverages
In stock:52
In stock:52
24 - 12 oz bottles
Outback Lager $15.00 Available Beverages
In stock:15
In stock:15
24 - 355 ml bottles
  • Overview.razor
  • ProductService.cs
  • CategoryService.cs
  • ProductDto.cs
  • CategoryDto.cs
Loading the demo source code...please wait.
blazor ui ninja image

The Grid component is part of Telerik UI for Blazor, a professional grade UI library with 95+ 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 Grid 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.

This demo demonstrates some of the most popular features of the Telerik UI for Blazor Grid. By default the items in the component are grouped by their Category which is done through the 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 Grid 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.

This Blazor Grid - Overview demo is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik Blazor components and their features in action. View the source code of each of the demos or directly adapt and edit them, including their theme appearance, in some of our dedicated playgrounds for Blazor projects - Telerik REPL for Blazor.

Support & Learning Resources

Additional Resources

An error has occurred. This application may no longer respond until reloaded.
Reload