chore(Grid): address latest comments

Author: xristianstefanov

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
 
-<TelerikGrid Data=@GridData 
-             EditMode="@GridEditMode.Inline" 
+<TelerikGrid Data=@GridData
+             EditMode="@GridEditMode.Inline"
              OnUpdate="@HandleUpdate"
-             Pageable="true" 
-             PageSize="15" 
+             Pageable="true"
+             PageSize="15"
              Height="500px">
     <GridColumns>
         <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
@@ -58,7 +58,7 @@ To conditionally show or hide command buttons in a Grid, use the context paramet
 
 @code {
     private List<SampleData> 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
+<style>
+    .hide-command-button {
+        display: none;
+    }
+</style>
+
+@CustomCommandResult
+
+<TelerikGrid Data=@GridData
+             EditMode="@GridEditMode.Inline"
+             OnUpdate="@HandleUpdate"
+             Pageable="true"
+             PageSize="15"
+             Height="500px">
+    <GridColumns>
+        <GridColumn Field=@nameof(SampleData.ID) Editable="false" Title="Employee ID" />
+        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
+        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
+        <GridCommandColumn Context="dataItem">
+            @{
+                var item = (SampleData)dataItem;
+            }
+            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true" OnClick="@HandleCustomSave">Save</GridCommandButton>
+            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+            <GridCommandButton Command="MyOwnCommand" Class="@(item.ID % 2 != 0 ? "hide-command-button" : string.Empty)" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@HandleCustomButtonClick">My Command</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    private List<SampleData> 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("<br />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<SampleData> _data { get; set; } = new List<SampleData>();
+
+        public static async Task<List<SampleData>> 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)