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

Grid - Columns Visibility

Configurator
You can tie the Visible parameter of the column to your business logic, such as responsive design.
May 01, 2021Hot-8
May 04, 2021Freezing10
May 06, 2021Balmy33
April 30, 2021Scorching27
May 08, 2021Balmy20
May 14, 2021Balmy35
May 14, 2021Hot-15
May 05, 2021Balmy22
May 12, 2021Scorching1
May 08, 2021Sweltering-12
April 30, 2021Hot-14
May 05, 2021Mild19
May 07, 2021Warm8
April 26, 2021Balmy27
April 29, 2021Chilly27
May 03, 2021Sweltering20
May 11, 2021Mild0
May 09, 2021Cool-18
May 08, 2021Balmy34
May 08, 2021Cool-19
May 07, 2021Scorching-1
May 02, 2021Bracing37
May 11, 2021Cool36
May 02, 2021Sweltering35
May 09, 2021Mild26
May 10, 2021Balmy22
May 15, 2021Scorching42
May 09, 2021Sweltering45
May 06, 2021Freezing-10
May 13, 2021Scorching30
  • Columns.razor
  • WeatherForecastService.cs
  • WeatherForecast.cs
Loading the demo source code...please wait.

Description

This demo for the Telerik Grid for Blazor showcases the feature to programatically show and hide columns in the component. This example shows how to achieve that by clicking a button and toggling the value for the Visible parameter set to the specific column.

When you hide a column and show it again, it will persist its order in the Grid columns. You can see that live by clicking on the Show / Hide Summary Column button.

You can also tie the Visible parameter to a flag coming from responsive design media query to hide columns for small screens.

Support & Learning Resources

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