Edit this page

Remove Dirty Indicator when Value Is in Original State

Environment

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

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy