diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/custom-component.cs b/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/custom-component.cs new file mode 100644 index 0000000000..74a2a0e213 --- /dev/null +++ b/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(); + } + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/razor b/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/razor new file mode 100644 index 0000000000..0bab9423a7 --- /dev/null +++ b/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/razor @@ -0,0 +1,20 @@ +@Html.EJS().Grid("grid").DataSource((IEnumerable)ViewBag.dataSource).Toolbar(new List{ + "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() + +
+ @Html.EJS().AutoComplete("games").Placeholder("Select a game").PopupHeight("200px").DataSource((IEnumerable)ViewBag.data).Change("OnChange").Render() + + + \ No newline at end of file diff --git a/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/tagHelper b/ej2-asp-core-mvc/code-snippet/grid/toolbar/custom-component/tagHelper new file mode 100644 index 0000000000..a56700e8a8 --- /dev/null +++ b/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" }; +} + + + + + + + + + + +
+ + +
+ + \ No newline at end of file diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md b/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md index 0bbe8dc48d..d643178f44 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.MVC/tool-bar/tool-bar-items.md +++ b/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) \ No newline at end of file +![Custom toolbar items in a specific position](../images/toolbar/customize-position.png) diff --git a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar-items.md b/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar-items.md index 149b8efc5e..e744bdd3a9 100644 --- a/ej2-asp-core-mvc/grid/EJ2_ASP.NETCORE/tool-bar/tool-bar-items.md +++ b/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) \ No newline at end of file +![Custom toolbar items in a specific position](../images/toolbar/customize-position.png) diff --git a/ej2-asp-core-mvc/grid/images/toolbar/custom-toolbar-template.png b/ej2-asp-core-mvc/grid/images/toolbar/custom-toolbar-template.png new file mode 100644 index 0000000000..32c2e7e247 Binary files /dev/null and b/ej2-asp-core-mvc/grid/images/toolbar/custom-toolbar-template.png differ