docs(grid): info for custom toolbar layout

Author: marin-bratanov

components/grid/images/custom-toolbar-layout.png

@@ -10,14 +10,18 @@ position: 30
 
 # Grid Toolbar
 
-The grid provides a toolbar where you can add a variety of actions that are not tied to a concrete row:
+The grid provides a toolbar where you can add a variety of actions that are not tied to a concrete row.
+
+To use a toolbar, define the `GridToolBar` tag of the grid. In it, you can use arbitrary HTML and components to get the desired layout, and also `GridCommandButton` instances in (you can read more about the features available in those buttons in the [Command Column]({%slug components/grid/columns/command%}) article).
+
+>note The toolbar is not associated with an item from the data source. The `Item` field on the click event handler argument of a `GridCommandButton` will always be `null` and the `Edit`, `Update`, `Cancel` commands do not work with it.
+
+In this article, you will learn how to use:
 
 * [Built-in Commands](#built-in-commands)
 * [Custom Commands](#custom-commands)
+* [Custom Layout](#custom-layout)
 
-To use a toolbar, define `GridCommandButton` instances in the `GridToolBar` tag of the grid. You can read more about the features available in those buttons in the [Command Column]({%slug components/grid/columns/command%}) article.
-
->note The toolbar is not associated with an item from the data source. The `Item` field on the click event handler argument will always be `null` and the `Edit`, `Update`, `Cancel` commands do not work with it.
 
 ## Built-in Commands
 
@@ -140,6 +144,73 @@ You can use the toolbar to add buttons that invoke actions specific to your appl
 
 ![](images/custom-command-toolbar.png)
 
+## Custom Layout
+
+You can add your own HTML and components to create a more complex layout in the grid header to match your business needs. You can still use the grid command buttons, as well as other components and logic.
+
+>caption Custom Grid Toolbar Layout
+
+````CSHTML
+@result
+
+<TelerikGrid Data=@MyData Pageable="true" PageSize="15" EditMode="@GridEditMode.Inline" Height="500px" OnCreate="@CreateHandler">
+    <GridToolBar>
+        <div style="background:yellow">
+            <GridCommandButton Command="Add" Icon="add">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;">
+            <div style="float:right;"><button @onclick="@( () => result = $"Custom button click on {DateTime.Now}"  )">Click me</button></div>
+            <div style="clear:both;"></div>
+        </div>
+    </GridToolBar>
+    <GridColumns>
+        <GridColumn Field=@nameof(SampleData.Name) Title="Employee Name" />
+        <GridColumn Field=@nameof(SampleData.HireDate) Title="Hire Date" />
+        <GridCommandColumn>
+            <GridCommandButton Command="Edit" Icon="edit">Edit</GridCommandButton>
+            <GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>
+            <GridCommandButton Command="Cancel" Icon="cancel" ShowInEdit="true">Cancel</GridCommandButton>
+        </GridCommandColumn>
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    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();
+}
+````
+
+>caption The result from the code snippet above, after adding a row, changing the dropdown and clicking the custom button.
+
+![](images/custom-toolbar-layout.png)
+
 ## See Also
 
   * [Live Demo: Grid Toolbar](https://demos.telerik.com/blazor-ui/grid/inlineediting)