chore(Grid): address comments

Author: xristianstefanov

components/grid/toolbar.md

@@ -10,11 +10,11 @@ position: 45
 
 # Grid Toolbar
 
-The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) toolbar can render built-in and custom tools. This article describes the built-in tools and shows how to add custom tools or customize the toolbar.
+The [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) toolbar can render built-in and custom tools. This article describes the built-in tools and shows how to add [custom tools](#custom-tools) or create a [custom toolbar](#custom-toolbar-configuration).
 
 ## Built-in Tools
 
-By default, the [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) displays all its built-in tools in the order below. Use the tool tag if you need to define a tool explicitly in a [custom toolbar configuration](#toolbar-configuration).
+By default, the [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview) does not automatically render all built-in tools when a toolbar is added. To include specific tools in a [toolbar configuration](#toolbar-tools-configuration), you need to explicitly define them using the tool tags below.
 
 ### Command Tools
 
@@ -29,8 +29,6 @@ By default, the [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview)
 
 ### Layout Tools
 
-@[template](/_contentTemplates/common/parameters-table-styles.md#table-layout)
-
 | Tool Name | Tool Tag | Description |
 | --- | --- | --- |
 | Spacer | `GridToolBarSpacerTool` | Consumes the available empty space and pushes the rest of the tools next to one another. |
@@ -39,52 +37,51 @@ By default, the [Blazor Grid](https://demos.telerik.com/blazor-ui/grid/overview)
 
 In addition to built-in tools, the Grid also supports custom tools. Use the `<GridToolBarCustomTool>` tag, which is a standard Blazor `RenderFragment`. See the example below.
 
-## Toolbar Configuration
+## Toolbar Tools Configuration
 
-Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a custom toolbar, for example:
+Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a toolbar, for example:
 
 * Arrange the Grid tools in a specific order;
 * Remove some of the built-in tools;
 * Add custom tools.
 
->caption Customize the Grid toolbar
+>important When configuring the Toolbar, you can use either the `<GridToolBar>` or the `<GridToolBarTemplate>`. Note that both cannot be used together.
+
+>caption Grid Toolbar Tools
 
 ````RAZOR
 <TelerikGrid Data=@GridData
              EditMode="@GridEditMode.Inline"
              Pageable="true"
              OnUpdate=@UpdateItem
-             OnDelete=@DeleteItem
              OnCreate=@CreateItem>
     <GridToolBar>
         <GridToolBarCustomTool>
             <TelerikButton OnClick="@OnToolbarCustomClick">Custom Grid Tool</TelerikButton>
         </GridToolBarCustomTool>
-        
+
         <GridToolBarAddTool>
             Add a product
         </GridToolBarAddTool>
-        
+
         <GridToolBarCsvExportTool>
             Export to CSV
         </GridToolBarCsvExportTool>
-        
+
         <GridToolBarExcelExportTool>
             Export to Excel
         </GridToolBarExcelExportTool>
 
         <GridToolBarSpacerTool />
+
         <GridToolBarSearchBoxTool />
     </GridToolBar>
     <GridColumns>
         <GridColumn Field=@nameof(Person.EmployeeId) Editable="false" Visible="true" Width="200px" />
         <GridColumn Field=@nameof(Person.Name) Width="200px" />
         <GridColumn Field=@nameof(Person.AgeInYears) Title="Age" Visible="false" Width="240px" />
-        <GridColumn Field=@nameof(Person.MeetingDate) Title="Meeting Date" Width="220px" />
         <GridColumn Field=@nameof(Person.HireDate) Title="Hire Date" Width="230px" />
-        <GridColumn Field=@nameof(Person.GraduateGrade) Title="Graduate Grade" Width="200px" />
         <GridCommandColumn Width="200px">
-            <GridCommandButton Command="Delete" Icon="@SvgIcon.Trash"></GridCommandButton>
             <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil"></GridCommandButton>
             <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true"></GridCommandButton>
         </GridCommandColumn>
@@ -107,14 +104,12 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a custom toolbar,
         for (int i = 0; i < 50; i++)
         {
             data.Add(new Person()
-                {
-                    EmployeeId = i,
-                    Name = "Employee " + i.ToString(),
-                    HireDate = DateTime.Now.Date.AddDays(-(i * 2)),
-                    AgeInYears = 20,
-                    MeetingDate = DateTime.Now.Date.AddDays(i),
-                    GraduateGrade = (i % 5) + 2
-                });
+            {
+                EmployeeId = i,
+                Name = "Employee " + i.ToString(),
+                HireDate = DateTime.Now.Date.AddDays(-(i * 2)),
+                AgeInYears = 20
+            });
         }
         GridData = new List<Person>(data);
     }
@@ -128,13 +123,6 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a custom toolbar,
         GridData.Insert(0, argsItem);
     }
 
-    private void DeleteItem(GridCommandEventArgs args)
-    {
-        var argsItem = args.Item as Person;
-
-        GridData.Remove(argsItem);
-    }
-
     private void UpdateItem(GridCommandEventArgs args)
     {
         var argsItem = args.Item as Person;
@@ -143,9 +131,7 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a custom toolbar,
         if (itemForEdit != null)
         {
             itemForEdit.AgeInYears = argsItem.AgeInYears;
-            itemForEdit.GraduateGrade = argsItem.GraduateGrade;
             itemForEdit.HireDate = argsItem.HireDate;
-            itemForEdit.MeetingDate = argsItem.MeetingDate;
             itemForEdit.Name = argsItem.Name;
         }
     }
@@ -158,26 +144,89 @@ Add a `<GridToolBar>` tag inside `<TelerikGrid>` to configure a custom toolbar,
 
         public int? AgeInYears { get; set; }
 
-        public decimal? GraduateGrade { get; set; }
-
         public DateTime HireDate { get; set; }
+    }
+}
+````
 
-        public DateTime MeetingDate { get; set; }
+## Custom Toolbar Configuration
 
-        public Person()
-        {
-            GraduateGrade = 1;
-        }
+Add a `<GridToolBarTemplate>` tag inside `<TelerikGrid>` to configure a custom toolbar. You can add your own HTML and components to create a more complex layout in the grid header to match your business needs and also `GridCommandButton` instances (read more about the features available in those buttons in the [Command Column](slug://components/grid/columns/command) article).
+
+>caption Custom Grid Toolbar
+
+````RAZOR
+@result
+
+<TelerikGrid Data=@MyData Pageable="true" PageSize="15" EditMode="@GridEditMode.Inline" Height="500px" OnCreate="@CreateHandler">
+
+    <GridToolBarTemplate>
+        <div style="display: block; flex-grow: 1;">
+            @* the first level children in the toolbar get display: inline-flex and flex-shrink: 0 inherited from the grid,
+                we change it here to show we can, or you can work with the layout the grid defines if it suits your needs *@
+
+            <div style="background:yellow">
+                <GridCommandButton Command="Add" Icon="@SvgIcon.Plus">Add Employee</GridCommandButton>
+            </div>
+            <div style="background: green;">
+                <TelerikDropDownList Data="@( new List<string>() { "first", "second", "third" } )" TValue="string" TItem="string" ValueChanged="@( (string itm) => result = itm )"></TelerikDropDownList>
+            </div>
+
+            <div style="border: 1px solid red;">
+                @* one example of aligning content to the right with flex *@
+                <button style="display: flex; margin-left: auto;"
+                        @onclick="@( () => result = $"Custom button click on {DateTime.Now}"  )">
+                    Click me
+                </button>
+            </div>
+        </div>
+    </GridToolBarTemplate>
+
+    <GridColumns>
+        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
+        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
+        <GridCommandColumn>
+            <GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Save</GridCommandButton>
+            <GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    private string result;
+
+    private void CreateHandler(GridCommandEventArgs args)
+    {
+        SampleData newItem = args.Item as SampleData;
+        MyData.Insert(0, newItem); // actual CRUD operations are not implemented, for brevity
+
+        result = string.Format("On {2} you added the employee {0} who was hired on {1}.", newItem.Name, newItem.HireDate, DateTime.Now);
+        StateHasChanged();
     }
+
+    //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example
+    public class SampleData
+    {
+        public int ID { get; set; }
+        public string Name { get; set; }
+        public DateTime HireDate { get; set; }
+    }
+
+    public List<SampleData> MyData = Enumerable.Range(1, 50).Select(
+        x => new SampleData
+            {
+                ID = x,
+                Name = "name " + x,
+                HireDate = DateTime.Now.AddDays(-x)
+            }).ToList();
 }
 ````
 
-
 ## Next Steps
 
 * [Handle Grid events](slug://grid-events)
 
-
 ## See Also
 
 * [Grid Live Demo](https://demos.telerik.com/blazor-ui/grid/overview)