Skip to content

Commit b1d8f07

Browse files
github-actions[bot]KB Botxristianstefanov
authored
Merge new-kb-grid-kb-conditionally-hide-command-buttons-cf7bcd9c885547e5be5bc421dec101cc-2718 into production (#2725)
* Added new kb article grid-kb-conditionally-hide-command-buttons * chore(Grid): address comments * chore(Grid): polish article * chore(Grid): address latest comments --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: Hristian Stefanov <Hristian.Stefanov@progress.com>
1 parent ae88a05 commit b1d8f07

File tree

1 file changed

+237
-0
lines changed

1 file changed

+237
-0
lines changed

‎knowledge-base/grid-conditionally-hide-command-buttons.md

Lines changed: 237 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,237 @@
1+
---
2+
title: Conditionally Hide Command Buttons in Blazor Grid
3+
description: Learn how to conditionally show or hide command buttons in a Blazor Grid based on row data values.
4+
type: how-to
5+
page_title: How to Dynamically Hide Command Buttons in Blazor Grid
6+
slug: grid-kb-conditionally-hide-command-buttons
7+
tags: blazor, grid, commandbutton
8+
res_type: kb
9+
ticketid: 1675338
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>
19+
Grid for Blazor
20+
</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
25+
## Description
26+
In some scenarios, you might want to conditionally show or hide command buttons in a [Grid for Blazor](slug://grid-overview) based on the data of the current row. For instance, you may want to display a delete button only for items that meet certain criteria. This article demonstrates how to achieve this behavior by using the context of the command column.
27+
28+
## Solution
29+
To conditionally show or hide command buttons in a Grid, use the context parameter of the `GridCommandColumn` to access the current row's data. Based on this data, you can conditionally render the command button.
30+
31+
````RAZOR
32+
@CustomCommandResult
33+
34+
<TelerikGrid Data=@GridData
35+
EditMode="@GridEditMode.Inline"
36+
OnUpdate="@HandleUpdate"
37+
Pageable="true"
38+
PageSize="15"
39+
Height="500px">
40+
<GridColumns>
41+
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
42+
<GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
43+
<GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
44+
<GridCommandColumn Context="dataItem">
45+
@{
46+
var item = (SampleData)dataItem;
47+
}
48+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
49+
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@HandleCustomSave">Save</GridCommandButton>
50+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
51+
@if (item.ID % 2 == 0)
52+
{
53+
<GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@HandleCustomButtonClick">My Command</GridCommandButton>
54+
}
55+
</GridCommandColumn>
56+
</GridColumns>
57+
</TelerikGrid>
58+
59+
@code {
60+
private List<SampleData> GridData { get; set; }
61+
private MarkupString CustomCommandResult { get; set; }
62+
63+
public class SampleData
64+
{
65+
public int ID { get; set; }
66+
public string Name { get; set; }
67+
public DateTime HireDate { get; set; }
68+
}
69+
70+
private async Task HandleCustomSave(GridCommandEventArgs args)
71+
{
72+
SampleData theUpdatedItem = args.Item as SampleData;
73+
}
74+
75+
private async Task HandleCustomButtonClick(GridCommandEventArgs args)
76+
{
77+
CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));
78+
}
79+
80+
private async Task HandleUpdate(GridCommandEventArgs args)
81+
{
82+
SampleData theUpdatedItem = args.Item as SampleData;
83+
84+
await MyService.Update(theUpdatedItem);
85+
86+
await GetGridData();
87+
}
88+
89+
private async Task GetGridData()
90+
{
91+
GridData = await MyService.Read();
92+
}
93+
94+
protected override async Task OnInitializedAsync()
95+
{
96+
await GetGridData();
97+
}
98+
99+
public static class MyService
100+
{
101+
private static List<SampleData> _data { get; set; } = new List<SampleData>();
102+
103+
public static async Task<List<SampleData>> Read()
104+
{
105+
if (_data.Count < 1)
106+
{
107+
_data = Enumerable.Range(1, 50).Select(i => new SampleData
108+
{
109+
ID = i,
110+
Name = $"name {i}",
111+
HireDate = DateTime.Now.AddDays(-i)
112+
}).ToList();
113+
}
114+
115+
return await Task.FromResult(_data);
116+
}
117+
118+
public static async Task Update(SampleData itemToUpdate)
119+
{
120+
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
121+
if (index != -1)
122+
{
123+
_data[index] = itemToUpdate;
124+
}
125+
}
126+
}
127+
}
128+
````
129+
130+
### Note
131+
If you prefer not to remove the button from the DOM but simply hide it, you can conditionally set the `Class` parameter of the `GridCommandButton` tag and use CSS to hide the button.
132+
133+
````RAZOR
134+
<style>
135+
.hide-command-button {
136+
display: none;
137+
}
138+
</style>
139+
140+
@CustomCommandResult
141+
142+
<TelerikGrid Data=@GridData
143+
EditMode="@GridEditMode.Inline"
144+
OnUpdate="@HandleUpdate"
145+
Pageable="true"
146+
PageSize="15"
147+
Height="500px">
148+
<GridColumns>
149+
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
150+
<GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
151+
<GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
152+
<GridCommandColumn Context="dataItem">
153+
@{
154+
var item = (SampleData)dataItem;
155+
}
156+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
157+
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@HandleCustomSave">Save</GridCommandButton>
158+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
159+
<GridCommandButton Command="MyOwnCommand" Class="@(item.ID % 2 != 0 ? "hide-command-button" : string.Empty)" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@HandleCustomButtonClick">My Command</GridCommandButton>
160+
</GridCommandColumn>
161+
</GridColumns>
162+
</TelerikGrid>
163+
164+
@code {
165+
private List<SampleData> GridData { get; set; }
166+
private MarkupString CustomCommandResult { get; set; }
167+
168+
public class SampleData
169+
{
170+
public int ID { get; set; }
171+
public string Name { get; set; }
172+
public DateTime HireDate { get; set; }
173+
}
174+
175+
private async Task HandleCustomSave(GridCommandEventArgs args)
176+
{
177+
SampleData theUpdatedItem = args.Item as SampleData;
178+
}
179+
180+
private async Task HandleCustomButtonClick(GridCommandEventArgs args)
181+
{
182+
CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));
183+
}
184+
185+
private async Task HandleUpdate(GridCommandEventArgs args)
186+
{
187+
SampleData theUpdatedItem = args.Item as SampleData;
188+
189+
await MyService.Update(theUpdatedItem);
190+
191+
await GetGridData();
192+
}
193+
194+
private async Task GetGridData()
195+
{
196+
GridData = await MyService.Read();
197+
}
198+
199+
protected override async Task OnInitializedAsync()
200+
{
201+
await GetGridData();
202+
}
203+
204+
public static class MyService
205+
{
206+
private static List<SampleData> _data { get; set; } = new List<SampleData>();
207+
208+
public static async Task<List<SampleData>> Read()
209+
{
210+
if (_data.Count < 1)
211+
{
212+
_data = Enumerable.Range(1, 50).Select(i => new SampleData
213+
{
214+
ID = i,
215+
Name = $"name {i}",
216+
HireDate = DateTime.Now.AddDays(-i)
217+
}).ToList();
218+
}
219+
220+
return await Task.FromResult(_data);
221+
}
222+
223+
public static async Task Update(SampleData itemToUpdate)
224+
{
225+
var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);
226+
if (index != -1)
227+
{
228+
_data[index] = itemToUpdate;
229+
}
230+
}
231+
}
232+
}
233+
````
234+
235+
## See Also
236+
* [Grid Overview](slug://grid-overview)
237+
* [Grid Command Column](slug://components/grid/columns/command)

0 commit comments

Comments
 (0)