Placing Edit or Update Buttons to Grid Toolbar

Environment

Product	Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version	Created with the 2023.3.1114 version

Description

How can I limit the number of columns in the Grid and move the Edit and Update buttons to the toolbar to save space when using the Telerik UI for ASP.NET Core Grid?

Solution

To achieve the desired result:

1. Enable selection for the Grid.
2. Define a toolbar template that will hold all custom buttons used for editing.
3. Handle the click event for the buttons to enter/exit edit mode.

    <script type="text/x-kendo-template" id="template"> // ToolBar Template
        <div class="editBtnContainer">
             <button type="button" class="k-button k-button-md k-rounded-md k-button-solid  k-button-solid-base k-grid-custom">Edit</button>          

        </div>
        <div class="updateCancelContainer">
                <a role="button" class="k-button k-button-md k-rounded-md k-button-solid    k-button-solid-base k-grid-save-command" href="\\#"> 
            <span class="k-icon k-i-check k-button-icon"></span>Update</a>
            <a role="button" class="k-button k-button-md k-rounded-md k-button-solid    k-button-solid-base k-grid-cancel-command" href="\\#">
            <span class="k-icon k-i-cancel k-button-icon"></span>Cancel</a>
        </div>
    </script>


    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.ProductName);
            columns.Bound(p => p.UnitPrice).Width(100);
            columns.Bound(p => p.UnitsInStock).Width(100);
            columns.Bound(p => p.Discontinued).Width(100);
        })
        .ToolBar(toolbar => toolbar.ClientTemplateId("template"))
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model => model.Id(p => p.ProductID))
            .Create(update => update.Action("EditingInline_Create", "Grid"))
            .Read(read => read.Action("EditingInline_Read", "Grid"))
            .Update(update => update.Action("EditingInline_Update", "Grid"))
            .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
        )
    )

    <script type="text/x-kendo-template" id="template"> // ToolBar Template
        <div class="editBtnContainer">
             <button type="button" class="k-button k-button-md k-rounded-md k-button-solid  k-button-solid-base k-grid-custom">Edit</button>          

        </div>
        <div class="updateCancelContainer">
                <a role="button" class="k-button k-button-md k-rounded-md k-button-solid    k-button-solid-base k-grid-save-command" href="\\#"> 
            <span class="k-icon k-i-check k-button-icon"></span>Update</a>
            <a role="button" class="k-button k-button-md k-rounded-md k-button-solid    k-button-solid-base k-grid-cancel-command" href="\\#">
            <span class="k-icon k-i-cancel k-button-icon"></span>Cancel</a>
        </div>
    </script>

    <kendo-grid name="grid" height="430">
        <selectable mode="single"/>
        <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
            <schema data="Data" total="Total">
                <model id="ProductID">
                    <fields>
                        <field name="ProductID" type="number" editable="false"></field>
                        <field name="ProductName" type="string"></field>
                        <field name="UnitPrice" type="number"></field>
                        <field name="UnitsInStock" type="number"></field>
                        <field name="Discontinued" type="boolean"></field>
                    </fields>
                </model>
            </schema>
            <transport>
                <read url="@Url.Action("EditingInline_Read", "Grid")"/>
                <update url="@Url.Action("EditingInline_Update", "Grid")"/>
                <create url="@Url.Action("EditingInline_Create", "Grid")"/>
                <destroy url="@Url.Action("EditingInline_Destroy", "Grid")"/>
            </transport>
        </datasource>
        <toolbar client-template-id="template">
        </toolbar>
        <columns>
            <column field="ProductName"/>
            <column field="UnitPrice" width="100"/>
            <column field="UnitsInStock" width="100"/>
            <column field="Discontinued" width="100"/>
        </columns>
        <editable mode="inline"/>
        <pageable enabled="true"/>
        <sortable enabled="true"/>
        <scrollable enabled="true"/>
    </kendo-grid>

    $(document).ready(function(){

        $(".k-grid-custom.k-button").on("click", function (e) {
            e.preventDefault();
            var grid = $("#grid").getKendoGrid();
            var selectedRow = grid.select()[0];
            if (selectedRow) {
                grid.editRow(selectedRow);

                $(".editBtnContainer, .updateCancelContainer").toggle();
            }
        });

        $(".k-grid-save-command").on("click", function (e) {
            e.preventDefault();
            var grid = $("#grid").getKendoGrid();
            grid.dataSource.sync();
            $(".editBtnContainer, .updateCancelContainer").toggle();
        });

        $(".k-grid-cancel-command").on("click", function (e) {
            e.preventDefault();
            var grid = $("#grid").getKendoGrid();
            grid.cancelChanges();
            $(".editBtnContainer, .updateCancelContainer").toggle();
        });

    })

    .updateCancelContainer {
        display: none;
    }

For a complete implementation of the suggested approach, refer to the following Telerik REPL examples :

• Telerik REPL (HtmlHelper)

• Telerik REPL (TagHelper)

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Placing Edit or Update Buttons to Grid Toolbar (HtmlHelper)

• Telerik REPL: Placing Edit or Update Buttons to Grid Toolbar (TagHelper)

• Server-Side TagHelper API Reference of the Grid for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• Client-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base