ASP.NET MVC Preserve Server Toolbar Template when Persisting Grid Options

New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Environment

Product	Telerik UI for ASP.NET MVC Grid
Product version	2025.1.227

Description

How can I preserve the server toolbar template of the Grid when using the setOptions() method to persist the current Grid settings?

Solution

You have to preserve the server toolbar template of the Grid because of the existing limitations of the setOptions() method.

Define the Grid and the template:

Razor

@using Kendo.Mvc.UI
@using Telerik.Examples.Mvc.Areas.GridPreserveServerToolbarTemplateAfterSetOptions.Models

@helper ToolbarTemplate()
{
    <a class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base k-grid-add" href="/Home/Read?grid-mode=insert"><span class="k-icon k-font-icon k-i-add"></span>Add</a>
    <button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base k-grid-excel"><span class="k-icon k-font-icon k-i-excel"></span>Export to Excel</button>
    <button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base k-grid-pdf"><span class="k-icon k-font-icon k-i-pdf"></span>Export to PDF</button>
    <a class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base savesetting" href="/"><span></span>Save Settings</a>
    <a class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base loadsetting" href="/"><span></span>Load Settings</a>
    @(Html.Kendo().DropDownList()
        .Name("ExampleEditor")
        .OptionLabel("- ExampleEditor -")
        .DataTextField("Text")
        .DataTextField("Value")
        .BindTo(new List<dynamic>() {
            new {Text = "Item 1", Value= "1"},
            new {Text = "Item 2", Value= "2"}
        })
    )
}

@helper HeaderTemplate()
{
    <span>My Template</span>
}

<script type="text/x-kendo-template" id="toolbarTemplate">
@Html.Raw(@ToolbarTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>

<script type="text/x-kendo-template" id="headerTemplate">
@Html.Raw(@HeaderTemplate().ToHtmlString().Replace("#", "\\#").Replace("</scr", "<\\/scr"))
</script>

@(Html.Kendo().Grid<Order>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).HeaderTemplate(@<text>@HeaderTemplate()</text>);
        columns.Bound(p => p.OrderDescription);
        columns.Bound(p => p.OrderDate).Format("{0:d}");
        columns.Bound(p => p.OrderTotal).Format("{0:c}");
        columns.Bound(p => p.IsCompleted);
        columns.Command(c =>
        {
            c.Edit();
            c.Destroy();
        });
    })
    .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>@ToolbarTemplate()</text>);
    })
    .HtmlAttributes(new { style="height: 500px;" })
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(p => p.OrderID);
            model.Field(p => p.OrderID).Editable(false);
        })
        .Create(create => create.Action("Create", "Home"))
        .Destroy(destroy => destroy.Action("Delete", "Home"))
        .Read(read => read.Action("Read", "Home"))
        .Update(update => update.Action("Update", "Home"))
    )
)

Handle the click events of the toolbar buttons to persist the current Grid settins:

    $("#grid").on("click", ".savesetting", function (e) {
        var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
        e.preventDefault();
        localStorage["settings"] = kendo.stringify(grid.getOptions());
    });

    $("#grid").on("click", ".loadsetting", function (e) {
        var grid = $(this).closest("[data-role=grid]").data("kendoGrid");
        e.preventDefault();
        var options = localStorage["settings"];
        if (options) {
            var parsedOptions = JSON.parse(options);
            parsedOptions.toolbar = [
                { template: $("#toolbarTemplate").html() }
            ];
            parsedOptions.columns[0].headerTemplate = $("#headerTemplate").html();
            grid.setOptions(parsedOptions);
            // Evaluate the scripts of any components nested in the toolbar and deferred.
            eval($("#toolbar-nested-components-script").html());
        }
    });

To review the complete example, refer to the project on how to preserve the server toolbar template of the Grid.

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also