Persisting Function References of Custom Command Buttons in the Grid

Environment

Product	Telerik UI for ASP.NET MVC Grid
Progress Telerik UI for ASP.NET MVC version	Created with the 2022.3.1109 version

Description

How can I persist the function references of the custom command buttons in the Telerik UI for ASP.NET MVC Grid after serialization?

Solution

To achieve the desired scenario:

1. Create two separate buttons which will be responsible for the loading and persisting of the Grid's state.
2. Handle the click event of both buttons.
3. Store the options of the Grid by using the getOptions() method while serializing them within the LocalStorage of the application by using the kendo.stringify() method.
4. Just before you pass the options to the setOptions method of the Grid upon the state's persistence, add the function reference to the parsed JSON file retrieved from the LocalStorage.

Index.cshtml

    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base"  id="save">Save State</a>
    <a href="#" class="k-button k-button-md k-rounded-md k-button-solid-base" id="load">Load State</a>

    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ContactName).Width(400);
            columns.Command(c => c.Custom("View Details").Click("onClick")).Width(200);
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        .Groupable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        .Sortable()
        .ColumnMenu()
        .Resizable(rsb=>rsb.Columns(true))
        .Reorderable(r => r.Columns(true))
        .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Customers_Read", "Grid"))
        )
    )

Script.js

    <script>
        function onClick(){
            alert("Details command is clicked !");
        }
        $(document).ready( function () {
            var grid = $("#grid").data("kendoGrid");
            $("#save").click(function (e) { // Handle the Save button's click event.
                e.preventDefault();
                localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions()); // Store the options within the LocalStorage.
            });

            $("#load").click(function (e) { // Handle the Load button's click event.
                e.preventDefault();
                var parsedOptions = JSON.parse(localStorage["kendo-grid-options"]); 
                if (parsedOptions) {
                    parsedOptions.columns[1].command[0].click = onClick; // Add the function reference of the custom command.
                    grid.setOptions(parsedOptions);
                }
            });
        });
    </script>

For the complete implementation of the suggested approach, refer to the Telerik REPL example on persisting function references to a custom command in the Grid.

More ASP.NET MVC Grid Resources

• ASP.NET MVC Grid Documentation

• ASP.NET MVC Grid Demos

• ASP.NET MVC Grid Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

• Telerik REPL: Persist Function References to a Custom Command in the Grid
• Client-Side API Reference of the Grid for ASP.NET MVC
• Server-Side API Reference of the Grid for ASP.NET MVC
• Telerik UI for ASP.NET MVC Breaking Changes
• Telerik UI for ASP.NET MVC Knowledge Base