From bcf371541f781cae6547abada12e8fc6895bc552 Mon Sep 17 00:00:00 2001 From: Raj Kumar Sri Ramulu Date: Sun, 9 Mar 2025 13:33:54 -0600 Subject: [PATCH 1/4] Added IsVisible Parameter to Grid Column --- blazorbootstrap/Components/Grid/Grid.razor | 14 +++++++++++++- blazorbootstrap/Components/Grid/Grid.razor.cs | 14 ++++++++++++++ .../Components/Grid/GridColumn.razor.cs | 16 ++++++++++++++++ 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/blazorbootstrap/Components/Grid/Grid.razor b/blazorbootstrap/Components/Grid/Grid.razor index 30d0bf10a..0f1b3936c 100644 --- a/blazorbootstrap/Components/Grid/Grid.razor +++ b/blazorbootstrap/Components/Grid/Grid.razor @@ -22,6 +22,10 @@ } @foreach (var column in columns) { + @if (!column.IsVisible) + { + continue; + } @column.HeaderTemplate } @@ -38,6 +42,10 @@ } @foreach (var column in columns) { + @if (!column.IsVisible) + { + continue; + } var columnClassList = new HashSet(); var columnStyleList = new List(); @@ -78,7 +86,7 @@ @{ - 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) } diff --git a/blazorbootstrap/Components/Grid/Grid.razor.cs b/blazorbootstrap/Components/Grid/Grid.razor.cs index 57fe01434..1fc7b01b2 100644 --- a/blazorbootstrap/Components/Grid/Grid.razor.cs +++ b/blazorbootstrap/Components/Grid/Grid.razor.cs @@ -25,6 +25,8 @@ public partial class Grid : BlazorBootstrapComponentBase private RenderFragment? headerSelectionTemplate; + private bool isColumnVisibilityChanged = false; + private bool isFirstRenderComplete = false; private List? 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 column) => columns.Add(column); + internal void ColumnVisibilityUpdated() + { + if (!isColumnVisibilityChanged) + { + isColumnVisibilityChanged = true; + StateHasChanged(); + } + } + internal async Task FilterChangedAsync() { if (cancellationTokenSource is not null diff --git a/blazorbootstrap/Components/Grid/GridColumn.razor.cs b/blazorbootstrap/Components/Grid/GridColumn.razor.cs index f992de32c..3fc98aebe 100644 --- a/blazorbootstrap/Components/Grid/GridColumn.razor.cs +++ b/blazorbootstrap/Components/Grid/GridColumn.razor.cs @@ -14,6 +14,8 @@ public partial class GridColumn : 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; + /// + /// Gets or sets visibility of the Grid column. + /// + /// + /// Default value is true. + /// + [Parameter] + public bool IsVisible { get; set; } = true; + [CascadingParameter(Name = "Parent")] public Grid Parent { get; set; } = default!; From 3a6e7696011f3e4a06743a182e22a7a526fec739 Mon Sep 17 00:00:00 2001 From: Raj Kumar Sri Ramulu Date: Sun, 9 Mar 2025 13:34:21 -0600 Subject: [PATCH 2/4] Updated Example to show the usage of Grid Column --- ...Client_Side_Filtering_Paging_And_Sorting.razor | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor index dd4eef5f8..e1bc3824d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor @@ -1,4 +1,8 @@ - + Toggle Active Column Visibility + + + @context.DOJ - + @context.IsActive @@ -49,6 +53,8 @@ private HashSet selectedEmployees = new(); + public bool isActiveColumnVisible = true; + private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging @@ -57,6 +63,11 @@ return await Task.FromResult(request.ApplyTo(employees)); } + private async Task ToggleActiveColumnVisibility() + { + isActiveColumnVisible = !isActiveColumnVisible; + } + private IEnumerable GetEmployees() { return new List From b484fad06edda8a2266baac2326d5988f1a487c8 Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 14 Mar 2025 12:50:58 +0530 Subject: [PATCH 3/4] #310 - Hide columns dynamically - Demos and Docs updated --- ...nt_Side_Filtering_Paging_And_Sorting.razor | 35 ++---- ...rid_Demo_06_Hide_Columns_Dynamically.razor | 95 +++++++++++++++ .../99-other/Grid_Other_Documentation.razor | 5 + docs/docs/05-components/grid.mdx | 110 ++++++++++++++++++ 4 files changed, 222 insertions(+), 23 deletions(-) create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor index e1bc3824d..3ab9d627f 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/01-Overview/Grid_Demo_01_Client_Side_Filtering_Paging_And_Sorting.razor @@ -1,18 +1,14 @@ - - - + @@ -27,7 +23,7 @@ @context.DOJ - + @context.IsActive @@ -53,8 +49,6 @@ private HashSet selectedEmployees = new(); - public bool isActiveColumnVisible = true; - private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging @@ -63,11 +57,6 @@ return await Task.FromResult(request.ApplyTo(employees)); } - private async Task ToggleActiveColumnVisibility() - { - isActiveColumnVisible = !isActiveColumnVisible; - } - private IEnumerable GetEmployees() { return new List diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor new file mode 100644 index 000000000..9d40ef228 --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor @@ -0,0 +1,95 @@ + + + + + + + @context.Id + + + @context.Name + + + @context.Designation + + + @context.DOJ + + + @context.IsActive + + + + + +
+ Selected Items Count: @selectedEmployees.Count +
+ +
+ Selected Employees: +
    + @foreach (var emp in selectedEmployees) + { +
  • @emp.Name
    • + } +
+
+ +@code { + private IEnumerable employees = default!; + + private HashSet selectedEmployees = new(); + + public bool isActiveColumnVisible = true; + + private async Task> EmployeesDataProvider(GridDataProviderRequest 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 GetEmployees() + { + return new List + { + 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 employees) + { + selectedEmployees = employees is not null && employees.Any() ? employees : new(); + return Task.CompletedTask; + } +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor index df13ae1b4..571d0bae4 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Other_Documentation.razor @@ -37,6 +37,11 @@ +
+
Set the IsVisible parameter to false to hide the column.
+ +
+ @code { private const string pageUrl = RouteConstants.Demos_Grid_OtherExamples_Documentation; private const string pageTitle = "Blazor Grid - Other examples"; diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx index 5b18ef707..7e1d6cca9 100644 --- a/docs/docs/05-components/grid.mdx +++ b/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 IsVisible parameter to **false** to hide the column. + +Blazor Bootstrap: Grid Component - Hide columns + +```cshtml {} showLineNumbers + + + + + + + @context.Id + + + @context.Name + + + @context.Designation + + + @context.DOJ + + + @context.IsActive + + + + + +
+ Selected Items Count: @selectedEmployees.Count +
+ +
+ Selected Employees: +
    + @foreach (var emp in selectedEmployees) + { +
  • @emp.Name
    • + } +
+
+``` + +```cshtml {} showLineNumbers +@code { + private IEnumerable employees = default!; + + private HashSet selectedEmployees = new(); + + public bool isActiveColumnVisible = true; + + private async Task> EmployeesDataProvider(GridDataProviderRequest 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 GetEmployees() + { + return new List + { + 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 employees) + { + selectedEmployees = employees is not null && employees.Any() ? employees : new(); + return Task.CompletedTask; + } +} +``` + +[See demo here](https://demos.blazorbootstrap.com/grid/other#hide-columns) \ No newline at end of file From 76efdcfad8bf0745b6434ae3bfb805915f72a60f Mon Sep 17 00:00:00 2001 From: Vikram Reddy Date: Fri, 14 Mar 2025 12:52:24 +0530 Subject: [PATCH 4/4] Alignemnt fixed. --- .../Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor index 9d40ef228..9d1258c8b 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/99-other/Grid_Demo_06_Hide_Columns_Dynamically.razor @@ -1,5 +1,5 @@ -