Modify the visibility of columns using IsVisible Parameter of GridColumn

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor

@@ -1,14 +1,14 @@
-<Grid TItem="Employee1"
-      Class="table table-hover table-bordered table-striped"
-      DataProvider="EmployeesDataProvider"
-      AllowFiltering="true"
-      AllowPaging="true"
-      PageSize="5"
-      AllowSorting="true"
-      AllowSelection="true"
-      SelectionMode="GridSelectionMode.Multiple"
-      SelectedItemsChanged="OnSelectedItemsChanged"
-      Responsive="true">
+<Grid TItem="Employee1"
+       Class="table table-hover table-bordered table-striped"
+       DataProvider="EmployeesDataProvider"
+       AllowFiltering="true"
+       AllowPaging="true"
+       PageSize="5"
+       AllowSorting="true"
+       AllowSelection="true"
+       SelectionMode="GridSelectionMode.Multiple"
+       SelectedItemsChanged="OnSelectedItemsChanged"
+       Responsive="true">
 
     <GridColumns>
         <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor

@@ -0,0 +1,95 @@
+<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="ToggleActiveColumnVisibility">
+    Toggle Active Column Visibility
+</Button>
+
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      AllowSelection="true"
+      SelectionMode="GridSelectionMode.Multiple"
+      SelectedItemsChanged="OnSelectedItemsChanged"
+      Responsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive" IsVisible="@isActiveColumnVisible">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
+</Grid>
+
+<div class="mt-3">
+    Selected Items Count: @selectedEmployees.Count
+</div>
+
+<div class="mt-2">
+    Selected Employees:
+    <ul>
+        @foreach (var emp in selectedEmployees)
+        {
+            <li>@emp.Name</li>
+        }
+    </ul>
+</div>
+
+@code {
+    private IEnumerable<Employee1> employees = default!;
+
+    private HashSet<Employee1> selectedEmployees = new();
+
+    public bool isActiveColumnVisible = true;
+
+    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
+    {
+        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+            employees = GetEmployees(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(employees));
+    }
+
+    private async Task ToggleActiveColumnVisibility()
+    {
+        isActiveColumnVisible = !isActiveColumnVisible;
+    }
+
+    private IEnumerable<Employee1> GetEmployees()
+    {
+        return new List<Employee1>
+        {
+            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
+            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
+            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+        };
+    }
+
+    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
+    {
+        selectedEmployees = employees is not null && employees.Any() ? employees : new();
+        return Task.CompletedTask;
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor

@@ -37,6 +37,11 @@
     <Demo Type="typeof(Grid_Demo_05_Specify_Custom_Column_Header)" Tabs="true" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Hide columns" PageUrl="@pageUrl" Link="hide-columns">
+    <div class="mb-3">Set the <code>IsVisible</code> parameter to <b>false</b> to hide the column.</div>
+    <Demo Type="typeof(Grid_Demo_06_Hide_Columns_Dynamically)" Tabs="true" />
+</Section>
+
 @code {
     private const string pageUrl = RouteConstants.Demos_Grid_OtherExamples_Documentation;
     private const string pageTitle = "Blazor Grid - Other examples";

blazorbootstrap/Components/Grid/Grid.razor

@@ -22,6 +22,10 @@
                     }
                     @foreach (var column in columns)
                     {
+                        @if (!column.IsVisible)
+                        {
+                            continue;
+                        }
                         @column.HeaderTemplate
                     }
                 </tr>
@@ -38,6 +42,10 @@
                         }
                         @foreach (var column in columns)
                         {
+                            @if (!column.IsVisible)
+                            {
+                                continue;
+                            }
                             var columnClassList = new HashSet<string>();
                             var columnStyleList = new List<string>();
 
@@ -78,7 +86,7 @@
             </thead>
             <tbody>
                 @{
-                    var columnCount = columns.Count;
+                    var columnCount = columns.Where(c => c.IsVisible).Count();
                     if (AllowSelection) columnCount += 1;
                     if (AllowDetailView) columnCount += 1;
                 }
@@ -158,6 +166,10 @@
 
                                 @foreach (var column in columns)
                                 {
+                                    @if (!column.IsVisible)
+                                    {
+                                        continue;
+                                    }
                                     @column.CellTemplate(item)
                                 }
                             </tr>

blazorbootstrap/Components/Grid/Grid.razor.cs

@@ -25,6 +25,8 @@ public partial class Grid<TItem> : BlazorBootstrapComponentBase
 
     private RenderFragment? headerSelectionTemplate;
 
+    private bool isColumnVisibilityChanged = false;
+
     private bool isFirstRenderComplete = false;
 
     private List<TItem>? items = null;
@@ -53,6 +55,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             isFirstRenderComplete = true;
         }
 
+        // As Rendering now complete we can reset the column visibility change to false
+        isColumnVisibilityChanged = false;
+
         await base.OnAfterRenderAsync(firstRender);
     }
 
@@ -135,6 +140,15 @@ protected override Task OnParametersSetAsync()
 
     internal void AddColumn(GridColumn<TItem> column) => columns.Add(column);
 
+    internal void ColumnVisibilityUpdated()
+    {
+        if (!isColumnVisibilityChanged)
+        {
+            isColumnVisibilityChanged = true;
+            StateHasChanged();
+        }
+    }
+
     internal async Task FilterChangedAsync()
     {
         if (cancellationTokenSource is not null

blazorbootstrap/Components/Grid/GridColumn.razor.cs

@@ -14,6 +14,8 @@ public partial class GridColumn<TItem> : BlazorBootstrapComponentBase
 
     private string filterValue = default!;
 
+    private bool isVisible = true;
+
     private RenderFragment? headerTemplate;
 
     #endregion
@@ -109,6 +111,11 @@ or StringConstants.PropertyTypeNameDecimal
             if (filterOperator == FilterOperator.None)
                 FilterOperator = filterOperator = FilterOperator.Equals;
         }
+        if (isVisible != IsVisible)
+        {
+            isVisible = IsVisible;
+            Parent?.ColumnVisibilityUpdated();
+        }
     }
 
     internal void SetFilterOperator(FilterOperator filterOperator) => FilterOperator = this.filterOperator = filterOperator;
@@ -420,6 +427,15 @@ private async Task OnSortClickAsync()
     [Parameter]
     public bool IsDefaultSortColumn { get; set; } = false;
 
+    /// <summary>
+    /// Gets or sets visibility of the Grid column.
+    /// </summary>
+    /// <remarks>
+    /// Default value is true.
+    /// </remarks>
+    [Parameter]
+    public bool IsVisible { get; set; } = true;
+
     [CascadingParameter(Name = "Parent")]
     public Grid<TItem> Parent { get; set; } = default!;
 

docs/docs/05-components/grid.mdx

@@ -103,6 +103,7 @@ Grid requires either `Data` or `DataProvider` parameter, but not both.
 | StringComparison | `StringComparison` | `StringComparison.OrdinalIgnoreCase` | | Gets or sets the StringComparison. Use `StringComparison.CurrentCulture` or `StringComparison.CurrentCultureIgnoreCase` or `StringComparison.InvariantCulture` or `StringComparison.InvariantCultureIgnoreCase` or `StringComparison.Ordinal` or `StringComparison.OrdinalIgnoreCase`. | 1.0.0 |
 | TextAlignment | `Alignment` | `Alignment.Start` | | Gets or sets the text alignment. Use `Alignment.Start` or `Alignment.Center` or `Alignment.End`. | 1.0.0 |
 | TextNoWrap | bool | false | | Gets or sets text nowrap. | 1.0.0 |
+| IsVisible | bool | true | | Gets or sets visibility of the Grid column. | 3.4.0 |
 
 ## GridSettings Properties
 
@@ -4078,3 +4079,112 @@ To create a nested grid, we first need to enable the detail view. To enable the
 ```
 
 [See demo here](https://demos.blazorbootstrap.com/grid/nested-grid)
+
+
+### Hide columns
+
+Set the <code>IsVisible</code> parameter to **false** to hide the column.
+
+<img src="https://i.imgur.com/R19yb1X.png" alt="Blazor Bootstrap: Grid Component - Hide columns" />
+
+```cshtml {} showLineNumbers
+<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="ToggleActiveColumnVisibility"> 
+    Toggle Active Column Visibility 
+</Button>
+
+<Grid TItem="Employee1"
+      Class="table table-hover table-bordered table-striped"
+      DataProvider="EmployeesDataProvider"
+      AllowFiltering="true"
+      AllowPaging="true"
+      PageSize="5"
+      AllowSorting="true"
+      AllowSelection="true"
+      SelectionMode="GridSelectionMode.Multiple"
+      SelectedItemsChanged="OnSelectedItemsChanged"
+      Responsive="true">
+
+    <GridColumns>
+        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
+            @context.Designation
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
+            @context.DOJ
+        </GridColumn>
+        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive" IsVisible="@isActiveColumnVisible">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
+</Grid>
+
+<div class="mt-3">
+    Selected Items Count: @selectedEmployees.Count
+</div>
+
+<div class="mt-2">
+    Selected Employees:
+    <ul>
+        @foreach (var emp in selectedEmployees)
+        {
+            <li>@emp.Name</li>
+        }
+    </ul>
+</div>
+```
+
+```cshtml {} showLineNumbers
+@code {
+    private IEnumerable<Employee1> employees = default!;
+
+    private HashSet<Employee1> selectedEmployees = new();
+
+    public bool isActiveColumnVisible = true;
+
+    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
+    {
+        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
+            employees = GetEmployees(); // call a service or an API to pull the employees
+
+        return await Task.FromResult(request.ApplyTo(employees));
+    }
+
+    private async Task ToggleActiveColumnVisibility()
+    {
+        isActiveColumnVisible = !isActiveColumnVisible;
+    }
+
+    private IEnumerable<Employee1> GetEmployees()
+    {
+        return new List<Employee1>
+        {
+            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
+            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
+            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
+            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
+            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
+            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
+            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
+            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
+            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
+            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
+            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
+        };
+    }
+
+    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
+    {
+        selectedEmployees = employees is not null && employees.Any() ? employees : new();
+        return Task.CompletedTask;
+    }
+}
+```
+
+[See demo here](https://demos.blazorbootstrap.com/grid/other#hide-columns)