Remove Dirty Indicator when Value Is in Original State

Environment

Product Version	2018.1 221
Product	Progress® Kendo UI® Grid for jQuery

Description

How can I remove the dirty indicators from the cells when the user changes the value in the Kendo UI Grid to its original state?

Solution

To remove the dirty indicators, handle the save event—in the event handler:

1. Use the internal _pristineForModel method to get the original values.
2. If the changed value is equal to the original value, delete the field from the dirtyFields object of the model.
3. If the dirtyFields object is empty, set the dirty property of the model to false.

<div id="example">
    <div id="grid"></div>

    <script>
        $(document).ready(function() {
            var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
                dataSource = new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: crudServiceBaseUrl + "/Products",
                            dataType: "jsonp"
                        },
                        update: {
                            url: crudServiceBaseUrl + "/Products/Update",
                            dataType: "jsonp"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "/Products/Destroy",
                            dataType: "jsonp"
                        },
                        create: {
                            url: crudServiceBaseUrl + "/Products/Create",
                            dataType: "jsonp"
                        },
                        parameterMap: function(options, operation) {
                            if (operation !== "read" && options.models) {
                                return {
                                    models: kendo.stringify(options.models)
                                };
                            }
                        }
                    },
                    batch: true,
                    pageSize: 20,
                    schema: {
                        model: {
                            id: "ProductID",
                            fields: {
                                ProductID: {
                                    editable: false,
                                    nullable: true
                                },
                                ProductName: {
                                    validation: {
                                        required: true
                                    }
                                },
                                UnitPrice: {
                                    type: "number",
                                    validation: {
                                        required: true,
                                        min: 1
                                    }
                                },
                                Discontinued: {
                                    type: "boolean"
                                },
                                UnitsInStock: {
                                    type: "number",
                                    validation: {
                                        min: 0,
                                        required: true
                                    }
                                }
                            }
                        }
                    }
                });

            $("#grid").kendoGrid({
                dataSource: dataSource,
                navigatable: true,
                pageable: true,
                save: function(e) {
                    var field = Object.keys(e.values)[0];
                    var newVal = e.values[field];
                    var oldModel = e.sender.dataSource._pristineForModel(e.model);

                    if (oldModel[field] === newVal) {
                        delete e.model.dirtyFields[field];
                        if (Object.keys(e.model.dirtyFields).length === 0) {
                            e.model.dirty = false;
                        }
                    }
                },
                height: 550,
                toolbar: ["create", "save", "cancel"],
                columns: [
                    "ProductName",
                    {
                        field: "UnitPrice",
                        title: "Unit Price",
                        format: "{0:c}",
                        width: 120
                    },
                    {
                        field: "UnitsInStock",
                        title: "Units In Stock",
                        width: 120
                    },
                    {
                        field: "Discontinued",
                        width: 120
                    },
                    {
                        command: "destroy",
                        title: "&nbsp;",
                        width: 150
                    }
                ],
                editable: true
            });
        });
    </script>
</div>