From de2d2e39e2fecf5a3032ce1aa69bff4c6060b625 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Tue, 21 Jan 2025 15:26:09 +0000 Subject: [PATCH 1/4] Added new kb article grid-kb-conditionally-hide-command-buttons --- ...d-kb-conditionally-hide-command-buttons.md | 126 ++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 knowledge-base/grid-kb-conditionally-hide-command-buttons.md diff --git a/knowledge-base/grid-kb-conditionally-hide-command-buttons.md b/knowledge-base/grid-kb-conditionally-hide-command-buttons.md new file mode 100644 index 000000000..8dfb816a4 --- /dev/null +++ b/knowledge-base/grid-kb-conditionally-hide-command-buttons.md @@ -0,0 +1,126 @@ +--- +title: Conditionally Hiding Command Buttons in Grid for Blazor +description: Learn how to conditionally show or hide command buttons in a Blazor Grid based on row data values. +type: how-to +page_title: Dynamically Hiding Command Buttons in Blazor Grid Based on Row Values +slug: grid-kb-conditionally-hide-command-buttons +tags: grid,blazor,commandbutton,conditional,visibility,row +res_type: kb +ticketid: 1675338 +--- + +## Description +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. + +This knowledge base article also answers the following questions: +- How can I hide a GridCommandButton based on a row value in Blazor? +- What is the way to conditionally display command buttons in a Telerik Blazor Grid? +- Can I dynamically control the visibility of command buttons in a Grid for Blazor? + +## Solution +To conditionally show or hide command buttons in a Grid for Blazor, 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. + +````RAZOR +@CustomCommandResult + + + + + + + + @{ + var item = (SampleData)dataItem; + } + Edit + Save + Cancel + @if (item.ID % 2 == 0) + { + My Command + } + + + + +@code { + private List GridData { get; set; } + private MarkupString CustomCommandResult; + + public class SampleData + { + public int ID { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + } + + private async Task CustomSaveOnClickHandler(GridCommandEventArgs args) + { + SampleData theUpdatedItem = args.Item as SampleData; + } + + private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args) + { + CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("
Custom command triggered for item {0}", (args.Item as SampleData).ID)); + } + + private async Task MyOnUpdateHandler(GridCommandEventArgs args) + { + SampleData theUpdatedItem = args.Item as SampleData; + + await MyService.Update(theUpdatedItem); + + await GetGridData(); + } + + private async Task GetGridData() + { + GridData = await MyService.Read(); + } + + protected override async Task OnInitializedAsync() + { + await GetGridData(); + } + + public static class MyService + { + private static List _data { get; set; } = new List(); + + public static async Task> Read() + { + if (_data.Count < 1) + { + for (int i = 1; i < 50; i++) + { + _data.Add(new SampleData() + { + ID = i, + Name = "name " + i, + HireDate = DateTime.Now.AddDays(-i) + }); + } + } + + return await Task.FromResult(_data); + } + + public static async Task Update(SampleData itemToUpdate) + { + var index = _data.FindIndex(i => i.ID == itemToUpdate.ID); + if (index != -1) + { + _data[index] = itemToUpdate; + } + } + } +} +```` + +### Note +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. + +## See Also +- [Blazor Grid Overview](https://docs.telerik.com/blazor-ui/components/grid/overview) +- [Blazor Grid Command Column](https://docs.telerik.com/blazor-ui/components/grid/columns/command) From fddeca5f6dab893b839320492819d52c3732e279 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 14:10:17 +0200 Subject: [PATCH 2/4] chore(Grid): address comments --- ...rid-conditionally-hide-command-buttons.md} | 40 ++++++++++--------- 1 file changed, 22 insertions(+), 18 deletions(-) rename knowledge-base/{grid-kb-conditionally-hide-command-buttons.md => grid-conditionally-hide-command-buttons.md} (71%) diff --git a/knowledge-base/grid-kb-conditionally-hide-command-buttons.md b/knowledge-base/grid-conditionally-hide-command-buttons.md similarity index 71% rename from knowledge-base/grid-kb-conditionally-hide-command-buttons.md rename to knowledge-base/grid-conditionally-hide-command-buttons.md index 8dfb816a4..eca1c5d18 100644 --- a/knowledge-base/grid-kb-conditionally-hide-command-buttons.md +++ b/knowledge-base/grid-conditionally-hide-command-buttons.md @@ -1,8 +1,8 @@ --- -title: Conditionally Hiding Command Buttons in Grid for Blazor +title: Conditionally Hide Command Buttons in Blazor Grid description: Learn how to conditionally show or hide command buttons in a Blazor Grid based on row data values. type: how-to -page_title: Dynamically Hiding Command Buttons in Blazor Grid Based on Row Values +page_title: How to Dynamically Hide Command Buttons in Blazor Grid slug: grid-kb-conditionally-hide-command-buttons tags: grid,blazor,commandbutton,conditional,visibility,row res_type: kb @@ -10,7 +10,7 @@ ticketid: 1675338 --- ## Description -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. +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. This knowledge base article also answers the following questions: - 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 ````RAZOR @CustomCommandResult - + @@ -34,11 +38,11 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont var item = (SampleData)dataItem; } Edit - Save + Save Cancel @if (item.ID % 2 == 0) { - My Command + My Command } @@ -47,7 +51,7 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont @code { private List GridData { get; set; } private MarkupString CustomCommandResult; - + public class SampleData { public int ID { get; set; } @@ -55,17 +59,17 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont public DateTime HireDate { get; set; } } - private async Task CustomSaveOnClickHandler(GridCommandEventArgs args) + private async Task HandleCustomSave(GridCommandEventArgs args) { SampleData theUpdatedItem = args.Item as SampleData; } - private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args) + private async Task HandleCustomButtonClick(GridCommandEventArgs args) { CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("
Custom command triggered for item {0}", (args.Item as SampleData).ID)); } - private async Task MyOnUpdateHandler(GridCommandEventArgs args) + private async Task HandleUpdate(GridCommandEventArgs args) { SampleData theUpdatedItem = args.Item as SampleData; @@ -95,11 +99,11 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont for (int i = 1; i < 50; i++) { _data.Add(new SampleData() - { - ID = i, - Name = "name " + i, - HireDate = DateTime.Now.AddDays(-i) - }); + { + ID = i, + Name = "name " + i, + HireDate = DateTime.Now.AddDays(-i) + }); } } @@ -122,5 +126,5 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont 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. ## See Also -- [Blazor Grid Overview](https://docs.telerik.com/blazor-ui/components/grid/overview) -- [Blazor Grid Command Column](https://docs.telerik.com/blazor-ui/components/grid/columns/command) +- [Blazor Grid Overview](slug://grid-overview) +- [Blazor Grid Command Column](slug://components/grid/columns/command) From cb7827cc45d000472e7176881db06ce03f8d2a9f Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 15:58:09 +0200 Subject: [PATCH 3/4] chore(Grid): polish article --- ...grid-conditionally-hide-command-buttons.md | 26 ++++++++++++------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/knowledge-base/grid-conditionally-hide-command-buttons.md b/knowledge-base/grid-conditionally-hide-command-buttons.md index eca1c5d18..5d3b23e98 100644 --- a/knowledge-base/grid-conditionally-hide-command-buttons.md +++ b/knowledge-base/grid-conditionally-hide-command-buttons.md @@ -9,16 +9,24 @@ res_type: kb ticketid: 1675338 --- +## Environment + + + + + + + + +
Product + Grid for Blazor +
+ ## Description 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. -This knowledge base article also answers the following questions: -- How can I hide a GridCommandButton based on a row value in Blazor? -- What is the way to conditionally display command buttons in a Telerik Blazor Grid? -- Can I dynamically control the visibility of command buttons in a Grid for Blazor? - ## Solution -To conditionally show or hide command buttons in a Grid for Blazor, 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. +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. ````RAZOR @CustomCommandResult @@ -123,8 +131,8 @@ To conditionally show or hide command buttons in a Grid for Blazor, use the cont ```` ### Note -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. +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. ## See Also -- [Blazor Grid Overview](slug://grid-overview) -- [Blazor Grid Command Column](slug://components/grid/columns/command) +* [Grid Overview](slug://grid-overview) +* [Grid Command Column](slug://components/grid/columns/command) From 5f7018dee8428d93743fbe5a39e5170fa88d15a1 Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Jan 2025 17:34:46 +0200 Subject: [PATCH 4/4] chore(Grid): address latest comments --- ...grid-conditionally-hide-command-buttons.md | 127 ++++++++++++++++-- 1 file changed, 113 insertions(+), 14 deletions(-) diff --git a/knowledge-base/grid-conditionally-hide-command-buttons.md b/knowledge-base/grid-conditionally-hide-command-buttons.md index 5d3b23e98..47a7d282b 100644 --- a/knowledge-base/grid-conditionally-hide-command-buttons.md +++ b/knowledge-base/grid-conditionally-hide-command-buttons.md @@ -4,7 +4,7 @@ description: Learn how to conditionally show or hide command buttons in a Blazor type: how-to page_title: How to Dynamically Hide Command Buttons in Blazor Grid slug: grid-kb-conditionally-hide-command-buttons -tags: grid,blazor,commandbutton,conditional,visibility,row +tags: blazor, grid, commandbutton res_type: kb ticketid: 1675338 --- @@ -31,11 +31,11 @@ To conditionally show or hide command buttons in a Grid, use the context paramet ````RAZOR @CustomCommandResult - @@ -58,7 +58,7 @@ To conditionally show or hide command buttons in a Grid, use the context paramet @code { private List GridData { get; set; } - private MarkupString CustomCommandResult; + private MarkupString CustomCommandResult { get; set; } public class SampleData { @@ -104,15 +104,12 @@ To conditionally show or hide command buttons in a Grid, use the context paramet { if (_data.Count < 1) { - for (int i = 1; i < 50; i++) + _data = Enumerable.Range(1, 50).Select(i => new SampleData { - _data.Add(new SampleData() - { - ID = i, - Name = "name " + i, - HireDate = DateTime.Now.AddDays(-i) - }); - } + ID = i, + Name = $"name {i}", + HireDate = DateTime.Now.AddDays(-i) + }).ToList(); } return await Task.FromResult(_data); @@ -133,6 +130,108 @@ To conditionally show or hide command buttons in a Grid, use the context paramet ### Note 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. +````RAZOR + + +@CustomCommandResult + + + + + + + + @{ + var item = (SampleData)dataItem; + } + Edit + Save + Cancel + My Command + + + + +@code { + private List GridData { get; set; } + private MarkupString CustomCommandResult { get; set; } + + public class SampleData + { + public int ID { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + } + + private async Task HandleCustomSave(GridCommandEventArgs args) + { + SampleData theUpdatedItem = args.Item as SampleData; + } + + private async Task HandleCustomButtonClick(GridCommandEventArgs args) + { + CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("
Custom command triggered for item {0}", (args.Item as SampleData).ID)); + } + + private async Task HandleUpdate(GridCommandEventArgs args) + { + SampleData theUpdatedItem = args.Item as SampleData; + + await MyService.Update(theUpdatedItem); + + await GetGridData(); + } + + private async Task GetGridData() + { + GridData = await MyService.Read(); + } + + protected override async Task OnInitializedAsync() + { + await GetGridData(); + } + + public static class MyService + { + private static List _data { get; set; } = new List(); + + public static async Task> Read() + { + if (_data.Count < 1) + { + _data = Enumerable.Range(1, 50).Select(i => new SampleData + { + ID = i, + Name = $"name {i}", + HireDate = DateTime.Now.AddDays(-i) + }).ToList(); + } + + return await Task.FromResult(_data); + } + + public static async Task Update(SampleData itemToUpdate) + { + var index = _data.FindIndex(i => i.ID == itemToUpdate.ID); + if (index != -1) + { + _data[index] = itemToUpdate; + } + } + } +} +```` + ## See Also * [Grid Overview](slug://grid-overview) * [Grid Command Column](slug://components/grid/columns/command)