documentation(969061): Add custom component in the toolbar using temp…

ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-toolbar-items/custom-items.cs

@@ -0,0 +1,5 @@
+public IActionResult Index()
+{
+  ViewBag.dataSource = OrderDetails.GetAllRecords();           
+  return View();
+}

ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-toolbar-items/razor

@@ -0,0 +1,42 @@
+
+@{  
+    var shipCities = new string[] { 
+        "Reims",
+        "Münster",
+        "Rio de Janeiro",
+        "Lyon",
+        "Charleroi",
+        "Bern",
+        "Genève",
+        "San Cristóbal",
+        "Graz",
+        "México D.F.",
+        "Albuquerque",
+        "Köln",
+   };
+    ViewBag.data = shipCities;
+} 
+
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Toolbar(new List<object>{
+"Add", "Edit", "Delete",
+new { template = "#toolbar-template", align = "Left", tooltipText = "Custom Component Autocomplete" },
+}).EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Columns(col =>
+{
+	col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).Width("120").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
+	col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add();
+	col.Field("ShipCity").HeaderText("Ship City").Width("150").Add();
+	col.Field("ShipName").HeaderText("Ship Name").Width("150").Add();
+}).Height("270px").Render()
+
+<div id="toolbar-template">
+	@Html.EJS().AutoComplete("shipCityValue").Placeholder("Search ShipCity").DataSource((IEnumerable<object>)ViewBag.data).Change("onChange").Render()
+</div>
+
+<script>
+    function onChange(event) {
+        var grid = document.getElementById("grid").ej2_instances[0];
+		const selectedCity = event.value;
+        // perform search action for ShipCity column.
+        grid.search(selectedCity);
+    }
+</script>

ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-toolbar-items/tagHelper

@@ -0,0 +1,40 @@
+
+@{  
+    var data = new string[] { 
+        "Reims",
+        "Münster",
+        "Rio de Janeiro",
+        "Lyon",
+        "Charleroi",
+        "Bern",
+        "Genève",
+        "San Cristóbal",
+        "Graz",
+        "México D.F.",
+        "Albuquerque",
+        "Köln",
+   };
+}  
+
+<ejs-grid id="grid" dataSource="@ViewBag.DataSource" toolbar="@(new List<object>{"Add", "Edit", "Delete",new { template = "#toolbar-template", align = "Left", tooltipText = "Custom Component Autocomplete" }})" height="348">
+    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" Mode="Normal"></e-grid-editSettings>
+    <e-grid-columns>  
+        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" isPrimaryKey="true" width="120"></e-grid-column>  
+        <e-grid-column field="CustomerID" headerText="Customer Name" width="140"></e-grid-column>  
+        <e-grid-column field="ShipCity" headerText="ShipCity" width="120"></e-grid-column>  
+        <e-grid-column field="ShipName" headerText="Ship Name" width="140"></e-grid-column>  
+    </e-grid-columns>  
+</ejs-grid>
+<div id="toolbar-template">
+    <ejs-autocomplete id="shipCityValue" dataSource="@data" placeholder="Search ShipCity" change="onChange">
+</ejs-autocomplete>
+</div>
+
+<script>
+    function onChange(event) {
+        var grid = document.getElementById("grid").ej2_instances[0];
+		const selectedCity = event.value;
+        // perform search action for ShipCity column.
+        grid.search(selectedCity);
+    }
+</script>

ej2-asp-core-mvc/grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md

@@ -133,6 +133,25 @@ The following example demonstrates, how to use both built-in and custom toolbar
 
 ![Both built-in and custom items in toolbar](../images/toolbar/custom-items.png)
 
+## Add custom components to the Grid toolbar using template
+
+The Syncfusion ASP.NET MVC Grid provides the flexibility to customize its toolbar by embedding custom components using the `Template` property of the `ItemModel`. This feature allows developers to add UI elements such as buttons, dropdowns, or input controls directly into the toolbar, alongside built-in actions like **Add**, **Edit**, and **Delete**.
+
+In the following example, an [AutoComplete](https://ej2.syncfusion.com/aspnetmvc/documentation/auto-complete/getting-started) is defined as a custom toolbar item using the `Template` property. The `AutoComplete` is populated with unique values from the `ShipCity` field of the Grid data. When you select a value from the `AutoComplete`, the Grid is filtered to display only the records that match the selected city. Once the Grid is rendered, the custom `AutoComplete` appears as part of the toolbar, allowing you to interact with both standard and custom toolbar elements.
+
+Additionally, the [Change](https://help.syncfusion.com/cr/aspnetmvc-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_Change) event of the `AutoComplete` is used to trigger a search operation within the Grid. When you select or type a value, the event handler invokes the Grid’s `search` method, dynamically filtering the displayed records in the **ShipCity** column based on the input.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/toolbar/custom-toolbar-items/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="builtin-custom-items.cs" %}
+{% include code-snippet/grid/toolbar/custom-toolbar-items/custom-items.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom components to the Grid toolbar using template](../images/toolbar/custom-toolbar-image.gif)
+
 ## Custom toolbar items in a specific position
 
 Customizing the position of a custom toolbar within the Syncfusion ASP.NET MVC Grid involves modifying the default placement of the custom toolbar items. This enables you to precisely control the positioning of each custom toolbar item according to your specific requirements and desired layout within the Grid.

ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar-items.md

@@ -135,6 +135,25 @@ The following example demonstrates, how to use both built-in and custom toolbar
 
 ![Both built-in and custom items in toolbar](../images/toolbar/custom-items.png)
 
+## Add custom components to the Grid toolbar using template
+
+The Syncfusion ASP.NET Core Grid provides the flexibility to customize its toolbar by embedding custom components using the `template` property of the `ItemModel`. This feature allows developers to add UI elements such as buttons, dropdowns, or input controls directly into the toolbar, alongside built-in actions like **Add**, **Edit**, and **Delete**.
+
+In the following example, an [AutoComplete](https://ej2.syncfusion.com/aspnetcore/documentation/auto-complete/getting-started) is defined as a custom toolbar item using the `template` property. The `AutoComplete` is populated with unique values from the `ShipCity` field of the Grid data. When you select a value from the `AutoComplete`, the Grid is filtered to display only the records that match the selected city. Once the Grid is rendered, the custom `AutoComplete` appears as part of the toolbar, allowing you to interact with both standard and custom toolbar elements.
+
+Additionally, the [change](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.AutoComplete.html#Syncfusion_EJ2_DropDowns_AutoComplete_Change) event of the `AutoComplete` is used to trigger a search operation within the Grid. When you select or type a value, the event handler invokes the Grid’s `search` method, dynamically filtering the displayed records in the **ShipCity** column based on the input.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/toolbar/custom-toolbar-items/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="builtin-custom-items.cs" %}
+{% include code-snippet/grid/toolbar/custom-toolbar-items/custom-items.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom components to the Grid toolbar using template](../images/toolbar/custom-toolbar-image.gif)
+
 ## Custom toolbar items in a specific position
 
 Customizing the position of a custom toolbar within the Syncfusion ASP.NET Core Grid involves modifying the default placement of the custom toolbar items. This enables you to precisely control the positioning of each custom toolbar item according to your specific requirements and desired layout within the Grid.