docs(Grid): update after review

Author: NansiYancheva

knowledge-base/grid-compact-grid-with-small-elements.md

@@ -1,6 +1,6 @@
 ---
 title: Make Compact Grid Elements Smaller
-description: How to make all elements in a Compact Grid smaller.
+description: How to reduce the size of elements and icons in a Compact Grid.
 type: how-to
 page_title: How to Make Compact Grid Elements Smaller
 slug: grid-compact-grid-with-small-elements
@@ -30,67 +30,57 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp
 ## Solution
 
 1. Set the [Grid `Class` parameter]({%slug grid-overview%}#grid-parameters) to a custom CSS class. This allows you to target specific Grid instances.
-1. Use the defined class to [override the theme styles]({%slug themes-override%}).
-1. Set the required CSS styles to the desired elements in the Grid.
+1. Use the defined class to [override the theme styles]({%slug themes-override%}) of the desired elements in the Grid.
 
 >caption Change Blazor Grid Elements Styles
 
 ````CSHTML
-<div class="demo-grid-container">
+<div>
     <div class="demo-small-grid">
         <TelerikGrid Size="@ThemeConstants.Grid.Size.Small"
                      Data="@GridData"
                      Sortable="true"
-                     PageSize="10"
+                     PageSize="5"
                      Pageable="true"
                      Resizable="true"
-                     Height="410px"
                      FilterMode="@GridFilterMode.FilterRow"
-                     EditMode="@GridEditMode.Inline"
-                     OnUpdate="@MyOnUpdateHandler"
                      Class="small-grid">
             <GridToolBarTemplate>
                 <span>Small Grid Size</span>
                 <span class="k-toolbar-spacer"></span>
                 <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
             </GridToolBarTemplate>
             <GridColumns>
-                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" Width="120px" />
-                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" Width="120px" />
-                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" Width="190px" />
-                <GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
-                <GridCommandColumn Width="80px">
-                    <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-                    <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
-                    <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
+                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
+                <GridColumn Field="@nameof(Product.Discontinued)" />
+                <GridCommandColumn>
+                    <GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
                 </GridCommandColumn>
             </GridColumns>
         </TelerikGrid>
     </div>
+    <p>@CustomCommandResult</p>
     <div class="demo-default-grid">
         <TelerikGrid Data="@GridData"
                      Sortable="true"
-                     PageSize="10"
+                     PageSize="5"
                      Pageable="true"
                      Resizable="true"
-                     Height="410px"
-                     FilterMode="@GridFilterMode.FilterRow"
-                     EditMode="@GridEditMode.Inline"
-                     OnUpdate="@MyOnUpdateHandler">
+                     FilterMode="@GridFilterMode.FilterRow">
             <GridToolBarTemplate>
                 <span>Default Grid Size</span>
                 <span class="k-toolbar-spacer"></span>
                 <GridCommandButton Command="ExcelExport" Icon="@SvgIcon.FileExcel">Export to Excel</GridCommandButton>
             </GridToolBarTemplate>
             <GridColumns>
-                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" Width="120px" />
-                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" Width="120px" />
-                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" Width="190px" />
-                <GridColumn Field="@nameof(Product.Discontinued)" Width="100px" />
-                <GridCommandColumn Width="80px">
-                    <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
-                    <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
-                    <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+                <GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
+                <GridColumn Field="@nameof(Product.Price)" DisplayFormat="{0:C2}" />
+                <GridColumn Field="@nameof(Product.Released)" DisplayFormat="{0:D}" />
+                <GridColumn Field="@nameof(Product.Discontinued)" />
+                <GridCommandColumn>
+                    <GridCommandButton Command="MyOwnCommand" Icon="@SvgIcon.InfoCircle" ShowInEdit="false" OnClick="@MyCustomCommandOnClickHandler">My Command</GridCommandButton>
                 </GridCommandColumn>
             </GridColumns>
         </TelerikGrid>
@@ -102,44 +92,28 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp
 
 <style>
     /* reduce the size of the icons */
-    .small-grid .k-svg-icon
+    .small-grid .k-button .k-svg-icon
     /* or you can target specific icons
-        .small-grid .k-svg-i-filter */ {
-        width: 10px !important;
-        height: 10px !important;
+    .small-grid .k-svg-i-filter */ {
+        width: 10px;
+        height: 10px;
     }
 
     /* reduce the size of the button icons */
-    .small-grid .k-button-icon {
-        min-width: 0px !important;
-    }
-
-    /* reduce the font size of the grid elements */
-    .small-grid .k-table-sm,
-    .small-grid .k-grid-pager,
-    .small-grid .k-button-flat,
-    .small-grid .k-toolbar-sm,
-    .small-grid .k-button-solid-base {
-        font-size: x-small !important;
+    .small-grid .k-icon-button .k-button-icon {
+        min-width: 0px;
     }
 
-    /* handle positioning of both grids */
-    .demo-grid-container {
-        display: flex;
-        flex-direction: @(ScreenIsSmall ? "column" : "row");
-        flex-wrap: nowrap;
-        gap: 1.5em;
+    /* reduce the font size of the compact grid */
+    :root .small-grid {
+        --kendo-font-size: 9px;
     }
 
-    .demo-small-grid,
-    .demo-default-grid {
-        display: contents;
+    /* handle width of both grids */
+    .demo-small-grid .k-grid,
+    .demo-default-grid .k-grid {
+        width: @(ScreenIsSmall ? "100%" : "49%");
     }
-
-        .demo-small-grid .k-grid,
-        .demo-default-grid .k-grid {
-            width: @(ScreenIsSmall ? "100%" : "49%");
-        }
 </style>
 
 @code {
@@ -153,58 +127,36 @@ I am using the [Grid sizing feature]({%slug grid-sizing%}) and my Grid is a Comp
         }
     }
 
+    private MarkupString CustomCommandResult;
+
     private List<Product> GridData { get; set; }
 
-    private async Task MyOnUpdateHandler(GridCommandEventArgs args)
+    private async Task MyCustomCommandOnClickHandler(GridCommandEventArgs args)
     {
-        Product theUpdatedItem = (Product)args.Item;
-        await MyService.Update(theUpdatedItem);
-        await GetGridData();
-    }
+        CustomCommandResult = new MarkupString(CustomCommandResult + string.Format("<br />Custom command triggered for item {0}", ((Product)args.Item).Id));
 
-    private async Task GetGridData()
-    {
-        GridData = await MyService.Read();
+        Console.WriteLine("The Custom command fired. Please wait for the long operation to finish");
     }
 
     protected override async Task OnInitializedAsync()
     {
-        await GetGridData();
-    }
+        GridData = new List<Product>();
 
-    public static class MyService
-    {
-        private static List<Product> _data { get; set; } = new List<Product>();
+        var rnd = new Random();
 
-        public static async Task<List<Product>> Read()
+        for (int i = 1; i <= 30; i++)
         {
-            if (_data.Count < 1)
-            {
-                var rnd = new Random();
-                for (int i = 1; i < 50; i++)
+            GridData.Add(new Product
                 {
-                    _data.Add(new Product()
-                        {
-                            Id = i,
-                            Name = "Product name " + i,
-                            Price = (decimal)(rnd.Next(1, 50) * 3.14),
-                            Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
-                            Discontinued = i % 5 == 0
-                        });
-                }
-            }
-
-            return await Task.FromResult(_data);
+                    Id = i,
+                    Name = "Product name " + i,
+                    Price = (decimal)(rnd.Next(1, 50) * 3.14),
+                    Released = DateTime.Now.AddDays(-rnd.Next(1, 365)).AddYears(-rnd.Next(1, 10)).Date,
+                    Discontinued = i % 5 == 0
+                });
         }
 
-        public static async Task Update(Product itemToUpdate)
-        {
-            var index = _data.FindIndex(i => i.Id == itemToUpdate.Id);
-            if (index != -1)
-            {
-                _data[index] = itemToUpdate;
-            }
-        }
+        base.OnInitialized();
     }
 
     public class Product