Skip to content

Commit 89574fa

Browse files
rajrakuRaj Kumar Sri Ramulugvreddy04
authored
Modify the visibility of columns using IsVisible Parameter of GridColumn (#1060)
* Added IsVisible Parameter to Grid Column * Updated Demos and Docs to show the usage of Grid Column --------- Co-authored-by: Raj Kumar Sri Ramulu <rajkumar.sriramulu@willowglensystems.com> Co-authored-by: Vikram Reddy <gvreddy04@gmail.com>
1 parent 4d67533 commit 89574fa

File tree

7 files changed

+264
-12
lines changed

7 files changed

+264
-12
lines changed

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<Grid TItem="Employee1"
2-
Class="table table-hover table-bordered table-striped"
3-
DataProvider="EmployeesDataProvider"
4-
AllowFiltering="true"
5-
AllowPaging="true"
6-
PageSize="5"
7-
AllowSorting="true"
8-
AllowSelection="true"
9-
SelectionMode="GridSelectionMode.Multiple"
10-
SelectedItemsChanged="OnSelectedItemsChanged"
11-
Responsive="true">
1+
<Grid TItem="Employee1"
2+
Class="table table-hover table-bordered table-striped"
3+
DataProvider="EmployeesDataProvider"
4+
AllowFiltering="true"
5+
AllowPaging="true"
6+
PageSize="5"
7+
AllowSorting="true"
8+
AllowSelection="true"
9+
SelectionMode="GridSelectionMode.Multiple"
10+
SelectedItemsChanged="OnSelectedItemsChanged"
11+
Responsive="true">
1212

1313
<GridColumns>
1414
<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‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="ToggleActiveColumnVisibility">
2+
Toggle Active Column Visibility
3+
</Button>
4+
5+
<Grid TItem="Employee1"
6+
Class="table table-hover table-bordered table-striped"
7+
DataProvider="EmployeesDataProvider"
8+
AllowFiltering="true"
9+
AllowPaging="true"
10+
PageSize="5"
11+
AllowSorting="true"
12+
AllowSelection="true"
13+
SelectionMode="GridSelectionMode.Multiple"
14+
SelectedItemsChanged="OnSelectedItemsChanged"
15+
Responsive="true">
16+
17+
<GridColumns>
18+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
19+
@context.Id
20+
</GridColumn>
21+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
22+
@context.Name
23+
</GridColumn>
24+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
25+
@context.Designation
26+
</GridColumn>
27+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
28+
@context.DOJ
29+
</GridColumn>
30+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive" IsVisible="@isActiveColumnVisible">
31+
@context.IsActive
32+
</GridColumn>
33+
</GridColumns>
34+
35+
</Grid>
36+
37+
<div class="mt-3">
38+
Selected Items Count: @selectedEmployees.Count
39+
</div>
40+
41+
<div class="mt-2">
42+
Selected Employees:
43+
<ul>
44+
@foreach (var emp in selectedEmployees)
45+
{
46+
<li>@emp.Name</li>
47+
}
48+
</ul>
49+
</div>
50+
51+
@code {
52+
private IEnumerable<Employee1> employees = default!;
53+
54+
private HashSet<Employee1> selectedEmployees = new();
55+
56+
public bool isActiveColumnVisible = true;
57+
58+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
59+
{
60+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
61+
employees = GetEmployees(); // call a service or an API to pull the employees
62+
63+
return await Task.FromResult(request.ApplyTo(employees));
64+
}
65+
66+
private async Task ToggleActiveColumnVisibility()
67+
{
68+
isActiveColumnVisible = !isActiveColumnVisible;
69+
}
70+
71+
private IEnumerable<Employee1> GetEmployees()
72+
{
73+
return new List<Employee1>
74+
{
75+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
76+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
77+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
78+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
79+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
80+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
81+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
82+
new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
83+
new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
84+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
85+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
86+
new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
87+
};
88+
}
89+
90+
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
91+
{
92+
selectedEmployees = employees is not null && employees.Any() ? employees : new();
93+
return Task.CompletedTask;
94+
}
95+
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@
3737
<Demo Type="typeof(Grid_Demo_05_Specify_Custom_Column_Header)" Tabs="true" />
3838
</Section>
3939

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

‎blazorbootstrap/Components/Grid/Grid.razor‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@
2222
}
2323
@foreach (var column in columns)
2424
{
25+
@if (!column.IsVisible)
26+
{
27+
continue;
28+
}
2529
@column.HeaderTemplate
2630
}
2731
</tr>
@@ -38,6 +42,10 @@
3842
}
3943
@foreach (var column in columns)
4044
{
45+
@if (!column.IsVisible)
46+
{
47+
continue;
48+
}
4149
var columnClassList = new HashSet<string>();
4250
var columnStyleList = new List<string>();
4351

@@ -78,7 +86,7 @@
7886
</thead>
7987
<tbody>
8088
@{
81-
var columnCount = columns.Count;
89+
var columnCount = columns.Where(c => c.IsVisible).Count();
8290
if (AllowSelection) columnCount += 1;
8391
if (AllowDetailView) columnCount += 1;
8492
}
@@ -158,6 +166,10 @@
158166

159167
@foreach (var column in columns)
160168
{
169+
@if (!column.IsVisible)
170+
{
171+
continue;
172+
}
161173
@column.CellTemplate(item)
162174
}
163175
</tr>

‎blazorbootstrap/Components/Grid/Grid.razor.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ public partial class Grid<TItem> : BlazorBootstrapComponentBase
2525

2626
private RenderFragment? headerSelectionTemplate;
2727

28+
private bool isColumnVisibilityChanged = false;
29+
2830
private bool isFirstRenderComplete = false;
2931

3032
private List<TItem>? items = null;
@@ -53,6 +55,9 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
5355
isFirstRenderComplete = true;
5456
}
5557

58+
// As Rendering now complete we can reset the column visibility change to false
59+
isColumnVisibilityChanged = false;
60+
5661
await base.OnAfterRenderAsync(firstRender);
5762
}
5863

@@ -135,6 +140,15 @@ protected override Task OnParametersSetAsync()
135140

136141
internal void AddColumn(GridColumn<TItem> column) => columns.Add(column);
137142

143+
internal void ColumnVisibilityUpdated()
144+
{
145+
if (!isColumnVisibilityChanged)
146+
{
147+
isColumnVisibilityChanged = true;
148+
StateHasChanged();
149+
}
150+
}
151+
138152
internal async Task FilterChangedAsync()
139153
{
140154
if (cancellationTokenSource is not null

‎blazorbootstrap/Components/Grid/GridColumn.razor.cs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ public partial class GridColumn<TItem> : BlazorBootstrapComponentBase
1414

1515
private string filterValue = default!;
1616

17+
private bool isVisible = true;
18+
1719
private RenderFragment? headerTemplate;
1820

1921
#endregion
@@ -109,6 +111,11 @@ or StringConstants.PropertyTypeNameDecimal
109111
if (filterOperator == FilterOperator.None)
110112
FilterOperator = filterOperator = FilterOperator.Equals;
111113
}
114+
if (isVisible != IsVisible)
115+
{
116+
isVisible = IsVisible;
117+
Parent?.ColumnVisibilityUpdated();
118+
}
112119
}
113120

114121
internal void SetFilterOperator(FilterOperator filterOperator) => FilterOperator = this.filterOperator = filterOperator;
@@ -420,6 +427,15 @@ private async Task OnSortClickAsync()
420427
[Parameter]
421428
public bool IsDefaultSortColumn { get; set; } = false;
422429

430+
/// <summary>
431+
/// Gets or sets visibility of the Grid column.
432+
/// </summary>
433+
/// <remarks>
434+
/// Default value is true.
435+
/// </remarks>
436+
[Parameter]
437+
public bool IsVisible { get; set; } = true;
438+
423439
[CascadingParameter(Name = "Parent")]
424440
public Grid<TItem> Parent { get; set; } = default!;
425441

‎docs/docs/05-components/grid.mdx‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,7 @@ Grid requires either `Data` or `DataProvider` parameter, but not both.
103103
| 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 |
104104
| TextAlignment | `Alignment` | `Alignment.Start` | | Gets or sets the text alignment. Use `Alignment.Start` or `Alignment.Center` or `Alignment.End`. | 1.0.0 |
105105
| TextNoWrap | bool | false | | Gets or sets text nowrap. | 1.0.0 |
106+
| IsVisible | bool | true | | Gets or sets visibility of the Grid column. | 3.4.0 |
106107

107108
## GridSettings Properties
108109

@@ -4078,3 +4079,112 @@ To create a nested grid, we first need to enable the detail view. To enable the
40784079
```
40794080

40804081
[See demo here](https://demos.blazorbootstrap.com/grid/nested-grid)
4082+
4083+
4084+
### Hide columns
4085+
4086+
Set the <code>IsVisible</code> parameter to **false** to hide the column.
4087+
4088+
<img src="https://i.imgur.com/R19yb1X.png" alt="Blazor Bootstrap: Grid Component - Hide columns" />
4089+
4090+
```cshtml {} showLineNumbers
4091+
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" Size="ButtonSize.Small" @onclick="ToggleActiveColumnVisibility">
4092+
Toggle Active Column Visibility
4093+
</Button>
4094+
4095+
<Grid TItem="Employee1"
4096+
Class="table table-hover table-bordered table-striped"
4097+
DataProvider="EmployeesDataProvider"
4098+
AllowFiltering="true"
4099+
AllowPaging="true"
4100+
PageSize="5"
4101+
AllowSorting="true"
4102+
AllowSelection="true"
4103+
SelectionMode="GridSelectionMode.Multiple"
4104+
SelectedItemsChanged="OnSelectedItemsChanged"
4105+
Responsive="true">
4106+
4107+
<GridColumns>
4108+
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
4109+
@context.Id
4110+
</GridColumn>
4111+
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
4112+
@context.Name
4113+
</GridColumn>
4114+
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
4115+
@context.Designation
4116+
</GridColumn>
4117+
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
4118+
@context.DOJ
4119+
</GridColumn>
4120+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive" IsVisible="@isActiveColumnVisible">
4121+
@context.IsActive
4122+
</GridColumn>
4123+
</GridColumns>
4124+
4125+
</Grid>
4126+
4127+
<div class="mt-3">
4128+
Selected Items Count: @selectedEmployees.Count
4129+
</div>
4130+
4131+
<div class="mt-2">
4132+
Selected Employees:
4133+
<ul>
4134+
@foreach (var emp in selectedEmployees)
4135+
{
4136+
<li>@emp.Name</li>
4137+
}
4138+
</ul>
4139+
</div>
4140+
```
4141+
4142+
```cshtml {} showLineNumbers
4143+
@code {
4144+
private IEnumerable<Employee1> employees = default!;
4145+
4146+
private HashSet<Employee1> selectedEmployees = new();
4147+
4148+
public bool isActiveColumnVisible = true;
4149+
4150+
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
4151+
{
4152+
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
4153+
employees = GetEmployees(); // call a service or an API to pull the employees
4154+
4155+
return await Task.FromResult(request.ApplyTo(employees));
4156+
}
4157+
4158+
private async Task ToggleActiveColumnVisibility()
4159+
{
4160+
isActiveColumnVisible = !isActiveColumnVisible;
4161+
}
4162+
4163+
private IEnumerable<Employee1> GetEmployees()
4164+
{
4165+
return new List<Employee1>
4166+
{
4167+
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
4168+
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
4169+
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
4170+
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
4171+
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
4172+
new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
4173+
new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
4174+
new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
4175+
new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
4176+
new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
4177+
new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
4178+
new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
4179+
};
4180+
}
4181+
4182+
private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
4183+
{
4184+
selectedEmployees = employees is not null && employees.Any() ? employees : new();
4185+
return Task.CompletedTask;
4186+
}
4187+
}
4188+
```
4189+
4190+
[See demo here](https://demos.blazorbootstrap.com/grid/other#hide-columns)

0 commit comments

Comments
 (0)