Skip to content

Commit fddeca5

Browse files
chore(Grid): address comments
1 parent de2d2e3 commit fddeca5

File tree

1 file changed

+22
-18
lines changed

1 file changed

+22
-18
lines changed

knowledge-base/grid-kb-conditionally-hide-command-buttons.md renamed to knowledge-base/grid-conditionally-hide-command-buttons.md

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Conditionally Hiding Command Buttons in Grid for Blazor
2+
title: Conditionally Hide Command Buttons in Blazor Grid
33
description: Learn how to conditionally show or hide command buttons in a Blazor Grid based on row data values.
44
type: how-to
5-
page_title: Dynamically Hiding Command Buttons in Blazor Grid Based on Row Values
5+
page_title: How to Dynamically Hide Command Buttons in Blazor Grid
66
slug: grid-kb-conditionally-hide-command-buttons
77
tags: grid,blazor,commandbutton,conditional,visibility,row
88
res_type: kb
99
ticketid: 1675338
1010
---
1111

1212
## Description
13-
In some scenarios, you might want to conditionally show or hide command buttons in a [Grid for Blazor](https://docs.telerik.com/blazor-ui/components/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.
13+
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.
1414

1515
This knowledge base article also answers the following questions:
1616
- How can I hide a GridCommandButton based on a row value in Blazor?
@@ -23,8 +23,12 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont
2323
````RAZOR
2424
@CustomCommandResult
2525
26-
<TelerikGrid Data=@GridData EditMode="@GridEditMode.Inline" OnUpdate="@MyOnUpdateHandler"
27-
Pageable="true" PageSize="15" Height="500px">
26+
<TelerikGrid Data=@GridData
27+
EditMode="@GridEditMode.Inline"
28+
OnUpdate="@HandleUpdate"
29+
Pageable="true"
30+
PageSize="15"
31+
Height="500px">
2832
<GridColumns>
2933
<GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
3034
<GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
@@ -34,11 +38,11 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont
3438
var item = (SampleData)dataItem;
3539
}
3640
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
37-
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@CustomSaveOnClickHandler">Save</GridCommandButton>
41+
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@HandleCustomSave">Save</GridCommandButton>
3842
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
3943
@if (item.ID % 2 == 0)
4044
{
41-
<GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
45+
<GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@HandleCustomButtonClick">My Command</GridCommandButton>
4246
}
4347
</GridCommandColumn>
4448
</GridColumns>
@@ -47,25 +51,25 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont
4751
@code {
4852
private List<SampleData> GridData { get; set; }
4953
private MarkupString CustomCommandResult;
50-
54+
5155
public class SampleData
5256
{
5357
public int ID { get; set; }
5458
public string Name { get; set; }
5559
public DateTime HireDate { get; set; }
5660
}
5761
58-
private async Task CustomSaveOnClickHandler(GridCommandEventArgs args)
62+
private async Task HandleCustomSave(GridCommandEventArgs args)
5963
{
6064
SampleData theUpdatedItem = args.Item as SampleData;
6165
}
6266
63-
private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args)
67+
private async Task HandleCustomButtonClick(GridCommandEventArgs args)
6468
{
6569
CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", (args.Item as SampleData).ID));
6670
}
6771
68-
private async Task MyOnUpdateHandler(GridCommandEventArgs args)
72+
private async Task HandleUpdate(GridCommandEventArgs args)
6973
{
7074
SampleData theUpdatedItem = args.Item as SampleData;
7175
@@ -95,11 +99,11 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont
9599
for (int i = 1; i < 50; i++)
96100
{
97101
_data.Add(new SampleData()
98-
{
99-
ID = i,
100-
Name = "name " + i,
101-
HireDate = DateTime.Now.AddDays(-i)
102-
});
102+
{
103+
ID = i,
104+
Name = "name " + i,
105+
HireDate = DateTime.Now.AddDays(-i)
106+
});
103107
}
104108
}
105109
@@ -122,5 +126,5 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont
122126
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 utilize CSS to hide the button.
123127

124128
## See Also
125-
- [Blazor Grid Overview](https://docs.telerik.com/blazor-ui/components/grid/overview)
126-
- [Blazor Grid Command Column](https://docs.telerik.com/blazor-ui/components/grid/columns/command)
129+
- [Blazor Grid Overview](slug://grid-overview)
130+
- [Blazor Grid Command Column](slug://components/grid/columns/command)

0 commit comments

Comments
 (0)