955871: Add custom component in the toolbar using template

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

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

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

@@ -0,0 +1,20 @@
+@Html.EJS().Grid("grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Toolbar(new List<object>{
+	"Add", "Edit", "Delete",
+	new { template = "#toolbar-template", align = "Left", tooltipText = "Search Sports" },
+	}).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("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable<object>)ViewBag.data).Change("OnChange").Render()
+</div>
+
+<script>
+	function OnChange(e) {
+		console.log('Selected sport:', e.value);
+	}  
+</script>

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

@@ -0,0 +1,27 @@
+@page  
+@model IndexModel  
+@{  
+    ViewData["Title"] = "Home page";  
+    var data = new string[] { "Badminton", "Basketball", "Cricket", "Football", "Golf", "Gymnastics", "Hockey", "Tennis" };
+}  
+
+<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" 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="games" dataSource="@data" placeholder="Select Game" change="OnChange"
+popupHeight="220px">
+</ejs-autocomplete>
+</div>
+
+<script>
+    function OnChange(e) {
+        console.log('Selected sport:', e.value);
+    }
+</script>

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

@@ -133,6 +133,23 @@ 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 ASP.NET MVC Razor view is used to define an [AutoComplete](https://ej2.syncfusion.com/aspnetmvc/documentation/auto-complete/getting-started) component. This template is referenced using its ID and then assigned to a toolbar item via the `template` property. When the Grid is rendered, the custom `AutoComplete` appears as part of the toolbar, providing users with a smooth and integrated experience for interacting with both standard and custom toolbar elements.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/toolbar/custom-component/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="custom-component.cs" %}
+{% include code-snippet/grid/toolbar/custom-component/custom-component.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom component in toolbar](../images/toolbar/custom-toolbar-template.png)
+
 ## 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.
@@ -150,4 +167,4 @@ In the following sample, the **Collapse All** toolbar item is positioned on the
 {% endhighlight %}
 {% endtabs %}
 
-![Custom toolbar items in a specific position](../images/toolbar/customize-position.png) 
+![Custom toolbar items in a specific position](../images/toolbar/customize-position.png) 

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

@@ -135,6 +135,23 @@ 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 ASP.NET Core Razor view is used to define an [AutoComplete](https://ej2.syncfusion.com/aspnetcore/documentation/auto-complete/getting-started) component. This template is referenced using its ID and then assigned to a toolbar item via the `template` property. When the Grid is rendered, the custom `AutoComplete` appears as part of the toolbar, providing users with a smooth and integrated experience for interacting with both standard and custom toolbar elements.
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/grid/toolbar/custom-component/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="custom-component.cs" %}
+{% include code-snippet/grid/toolbar/custom-component/custom-component.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+![Custom component in toolbar](../images/toolbar/custom-toolbar-template.png)
+
 ## 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.
@@ -152,4 +169,4 @@ In the following sample, the **Collapse All** toolbar item is positioned on the
 {% endhighlight %}
 {% endtabs %}
 
-![Custom toolbar items in a specific position](../images/toolbar/customize-position.png) 
+![Custom toolbar items in a specific position](../images/toolbar/customize-position.png)