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..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,14 +1,14 @@ - + 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..9d1258c8b --- /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/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!; 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