Skip to content

Commit b484fad

Browse files
gvreddy04gvreddy04
committed
#310 - Hide columns dynamically - Demos and Docs updated
1 parent 3a6e769 commit b484fad

File tree

4 files changed

+222
-23
lines changed

4 files changed

+222
-23
lines changed

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

+12-23
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,14 @@
1-
<Button Type="ButtonType.Button" Color="ButtonColor.Secondary" @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">
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">
1612

1713
<GridColumns>
1814
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
@@ -27,7 +23,7 @@
2723
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
2824
@context.DOJ
2925
</GridColumn>
30-
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive" IsVisible="@isActiveColumnVisible">
26+
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
3127
@context.IsActive
3228
</GridColumn>
3329
</GridColumns>
@@ -53,8 +49,6 @@
5349

5450
private HashSet<Employee1> selectedEmployees = new();
5551

56-
public bool isActiveColumnVisible = true;
57-
5852
private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
5953
{
6054
if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
@@ -63,11 +57,6 @@
6357
return await Task.FromResult(request.ApplyTo(employees));
6458
}
6559

66-
private async Task ToggleActiveColumnVisibility()
67-
{
68-
isActiveColumnVisible = !isActiveColumnVisible;
69-
}
70-
7160
private IEnumerable<Employee1> GetEmployees()
7261
{
7362
return new List<Employee1>

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

+95
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

+5
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";

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

+110
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)