Persist The State Of The Kendo Grid Using Local Storage

Introduction

This article tells about how to maintain the complete state of Kendo Grid, using local storage. The Application is developed, using Entity Framework database first approach and ASP.NET MVC.

Prerequisites

Basic knowledge in ASP.NET MVC, Entity Framework and Kendo UI Framework.

Persist State in Kendo Grid 

Please go through my previous articles, as mentioned below before proceeding-

• Kendo UI Grid with ASP.NET MVC - this article gives you an idea about how to configure the Kendo UI in ASP.NET MVC application
• CRUD in Kendo Grid using ASP.NET MVC and Entity Framework – this article will give you an idea about how to work with Kendo grid and to perform CRUD operations in it, using ASP.NET MVC Application.
  

My database schema is shown in the figure, given below-

EmployeesCRUDController.cs 

public class EmployeesCRUDController : Controller
    {
        private EmployeeEntities db = new EmployeeEntities();

        // GET: EmployeesCRUD
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult GetAllEmployee([DataSourceRequest]DataSourceRequest request)
        {
            try
            {

                var employee = db.Employees.ToList();

                return Json(employee.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }

        }

        public ActionResult UpdateEmployee([DataSourceRequest]DataSourceRequest request, Employee emp)
        {
            try
            {
                if (ModelState.IsValid)
                {
                    db.Entry(emp).State = EntityState.Modified;
                    db.SaveChanges();
                    return Json(new[] { emp }.ToDataSourceResult(request, ModelState),JsonRequestBehavior.AllowGet);

                }
                else
                {
                    return Json(db.Employees.ToList(),JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

        public ActionResult AddEmployee([DataSourceRequest]DataSourceRequest request, Employee emp)
        {
            try
            {
                if (ModelState.IsValid)
                {

                    db.Employees.Add(emp);
                    db.SaveChanges();
                    var _emplist = db.Employees.ToList();
                    return Json(new[] { emp }.ToDataSourceResult(request, ModelState),JsonRequestBehavior.AllowGet);
                }

                else
                {
                    return Json(db.Employees.ToList(),JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }

        public ActionResult DeleteEmployee([DataSourceRequest]DataSourceRequest request, Employee emp)
        {
            try
            {
                Employee employee = db.Employees.Find(emp.EmployeeID);
                if (employee == null)
                {
                    return Json("Employee Not Found");
                }

                db.Employees.Remove(employee);
                db.SaveChanges();
                return Json(db.Employees.ToList(),JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                return Json(ex.Message);
            }
        }
    }

Index.cshtml

@model KendoMvcApp.Models.Employee

@{
    ViewBag.Title = "Kendo CRUD";

}

<h2>Kendo CRUD</h2>

<div class="container">
    <div class="row">

        @(Html.Kendo().Grid<KendoMvcApp.Models.Employee>()
    .Name("EmpGrid")
    .Selectable()
    .Columns(columns =>
    {
        //  columns.Bound(c => c.EmployeeID);
        columns.Bound(c => c.FirstName);
        columns.Bound(c => c.LastName);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        }).Width(200);

    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
        {
            model.Id(emp => emp.EmployeeID);
            model.Field(emp => emp.EmployeeID).Editable(false);
        }
        )
        .Read(read => read.Action("GetAllEmployee", "EmployeesCRUD"))
      .Update(update => update.Action("UpdateEmployee", "EmployeesCRUD"))
      .Create(create => create.Action("AddEmployee", "EmployeesCRUD"))
      .Destroy(destroy => destroy.Action("DeleteEmployee", "EmployeesCRUD"))

        )
        .Events(e =>e.DataBound("grid_dataBound"))
        .Filterable()
   .ToolBar(toolbar => toolbar.Create())

   // Set grid editable.
   .Editable(editable => editable.Mode(GridEditMode.InLine))

    // Set grid sortable.
    .Sortable()

    // Set grid selectable.
    .Selectable()

    // Set grid pagable.
    .Pageable(pageable =>
    {
        pageable.Refresh(true);
        pageable.PageSizes(true);
    })
        )
    </div>
</div>
<div>
    <script type="text/javascript">
        $(document).ready(function () {
            var grid = $("#EmpGrid").data("kendoGrid");
            var options = localStorage["kendo-grid-options"];
            if (options) {
                grid.setOptions(JSON.parse(options));
            }
        });

        function grid_dataBound() {
            var grid = $("#EmpGrid").data("kendoGrid");
            localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
        }

    </script>
</div>

I have discussed about the controller, shown above and view in the article CRUD in Kendo Grid using ASP.NET MVC and Entity Framework to perform a CRUD operation in Kendo Grid. Here, I’m going to use the same controller and view to explain how to persist the state of Kendo Grid .

From the view, stated above, you can notice I have added a databound event in Kendo Grid and its respective function definition, which is written in JavaScript, the databound event is fired when Kendo Grid is bound to the data from its data source

When the page loads, we are going to check whether there is any local storage or not. If the local storage [“kenod-grid-options”] exists, we are going to load it as a datasource for Kendo Grid, using the setOptions function.

Please click here to read more about local storage.

When the databound event in Kendo Grid is fired, we are going to get the state of the Grid, using the getoption method and save it as a local storage, which is used to maintain the state of the Grid 

setOption

This function in Kendo Grid is used to enable/disable a particular feature like paging, sorting, filtering or to load the complete state to obtain previously with the getoptions method.

getOption

Retrieves the options, which are currently enabled or disabled on the Grid. It also gives the current state of the dataSource. Now, let us test whether the state of Kendo Grid is maintained or not?

Kendo Grid in Browser

 

From the image, shown above, it is clear that the local storage is created and the complete state of Kendo Grid is saved in it, when the page loads.

 

Sorting State 

After page load

You must have noticed the sorting state in Kendo Grid is maintained after the page loads.

Filtering State

 

After page load

 

 

It is clear from the image, shown above, the filter option as well as previous state sort option is maintained after the page loads.

 

Reference

 

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid  

 

Source Code 

 

Conclusion

 

Thus, the state of Kendo Grid can be maintained completely with the help of the getOption and setOption functions, which is proved from the scenario, shown above, which we worked on. 

 

I hope, you enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.