Edit this page

Persist Dirty Fields in the Local Storage

Environment

Product Version 2017.3 1026
Product Progress Kendo UI Grid

Description

How can I save the dirty content of the Grid in the localStorage and restore it when the page reloads?

Solution

  1. In the save event handler of the Grid, save the fields data in an object in the localStorage.
  2. In the dataBound event handler of the Grid, set the saved values.
<div id="grid"></div>
<script>
    $(document).ready(function() {

        var lsChanges = localStorage["kendo-changes"];
        var changes = {};
        var firstDB = true;
        if (lsChanges) {
            changes = JSON.parse(lsChanges);
        }


        $("#grid").kendoGrid({
            columns: [{
                    field: "name"
                },
                {
                    field: "age"
                },
                {
                    command: "destroy"
                }
            ],
            dataSource: {
                data: [{
                        id: 1,
                        name: "Jane Doe",
                        age: 30
                    },
                    {
                        id: 2,
                        name: "John Doe",
                        age: 33
                    }
                ],
                schema: {
                    model: {
                        id: "id"
                    }
                }
            },
            editable: true,
            sortable: true,
            dataBound: function(e) {
                if (firstDB) {
                    firstDB = false;
                    var items = e.sender.items();

                    items.each(function() {
                        var row = $(this);
                        var dataItem = e.sender.dataItem(row);

                        if (changes[dataItem.id]) {
                            for (prop in changes[dataItem.id]) {
                                var cell = row.find("td").eq(getColumnIndexes(e.sender, prop));
                                dataItem[prop] = changes[dataItem.id][prop];
                                dataItem.dirty = true;
                                dataItem.dirtyFields[prop] = true;
                            }
                        }
                    });

                    e.sender.refresh();
                }
            },
            save: function(e) {
                for (prop in e.values) {
                    if (!changes[e.model.id]) {
                        changes[e.model.id] = {};
                    }
                    changes[e.model.id][prop] = e.values[prop];
                    localStorage["kendo-changes"] = kendo.stringify(changes);
                }
            }
        });


        function getColumnIndexes(grid, columnName) {
            var columns = {};
            var cellIndex = -1;
            grid.columns.forEach(function(el, index) {
                if (el.field == columnName) {
                    cellIndex = index;
                }
            })
            return cellIndex;
        }
    });
</script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy