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:
- Create two separate buttons which will be responsible for the loading and persisting of the Grid's state.
- Handle the
clickevent of both buttons. - Store the options of the Grid by using the
getOptions()method while serializing them within theLocalStorageof the application by using thekendo.stringify()method. - Just before you pass the options to the
setOptionsmethod of the Grid upon the state's persistence, add the function reference to the parsed JSON file retrieved from theLocalStorage.
<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>
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.