New to Telerik UI for Blazor? Download Free 30-day trial

MediaQuery - Grid Integration

Resize the browser to see how columns hide for small devices in the responsive grid layout based on the resolution.
1 Chai $18.00 39 10 boxes x 20 bags False
2 Chang $19.00 17 24 - 12 oz bottles False
3 Aniseed Syrup $10.00 13 12 - 550 ml bottles False
4 Chef Anton's Cajun Seasoning $22.00 53 48 - 6 oz jars False
5 Chef Anton's Gumbo Mix $21.35 0 36 boxes True
6 Grandma's Boysenberry Spread $25.00 120 12 - 8 oz jars False
7 Uncle Bob's Organic Dried Pears $30.00 15 12 - 1 lb pkgs. False
8 Northwoods Cranberry Sauce $40.00 6 12 - 12 oz jars False
9 Mishi Kobe Niku $97.00 29 18 - 500 g pkgs. True
10 Ikura $31.00 31 12 - 200 ml jars False
  • Grid-integration.razor
  • ProductService.cs
  • ProductDto.cs
Loading the demo source code...please wait.

Description

The Telerik Blazor Media Query component can be easily integrated with the grid. This example shows how to build responsive grid layout, and toggling column visibility based on the resolution.

To hide a column, you set its Visible parameter to false. With the media query component, you can easily add flags to set that parameter based on the screen size.

Support & Learning Resources

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