How to template a grid cell without losing the dirty flag?

[Pierre]

I try to change the background color if some value below 10.

like:

function getFormat (val,name) {
        if (val> 10) {
            return name;
        }
        else {
            return "<div style='background:red'> "+ name +" </div>"
        }
    }

Then I use a template that call this function.
That work good, but I lost the "isDirty" flag for all my cell. 
I use the gris in editable=true (batch editing).

Second try:
It is possible to intercept an event when the row is created, then got the row data to do some calculation and then add a "isDirty" custom flag (in the opposite corner)? Without login the "normal" isDirty indicator.

Thanks

[Kiril Nikolov]

Hi Pierre,

The dirty flag is removed every time the data in the Grid is reloaded - read again from the source. What you can do is to save the dirty flags and then apply them when needed. Please check the following code library showing a possible implementation:

http://www.kendoui.com/code-library/web/grid/preserve-the-dirty-indicator-in-incell-editing-and-client-operations.aspx
 
Regards,
Kiril Nikolov
Telerik

[Bob]

I don't understand how this isn't considered a bug and hasn't been fixed after 2 years!  Is it really not possible to add a dirty indicator to the dataSource item and set a class called k-dirty-cell in the internals of the grid?

[Kiril Nikolov]

Hello Bob,

 

This is not considered a bug, but expected behavior, as the standard workflow is to reload the Grid after save - when you have edited the data.

 

You can submit this as a feature request on UserVoice, so that it is considered for implementation in a future release, if you think that this behavior should change.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Bob]

You also lose them when just adding a row. In my opinion that is a bug. We are working on implementing the example you have in the docs. I assume there is a small percentage of people using batch editing which is why more people aren't complaining about this.

 

[Kiril Nikolov]

Hello Bob,

 

If you use batch editing the grid will be autosaved when a record is changed, and therefore redrawn - which in that case will remove the dirty red flag. But again we believe that this behavior is expected.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Bob]

[quote]

If you use batch editing the grid will be autosaved when a record is changed

[/quote]

 What? That's not correct. The whole point of Batch Editing is that changes are kept locally in the data source until the save is called. http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-batch

Of course, if the change is Saved it is no longer dirty so no dirty indicator after a save of course is expected.

 

[Kiril Nikolov]

Hello Bob,

 

I mean that if you enable batch editing with autoSync on the dataSource, so please accept my apologies for the missed clarification in my previous response.

 

Regards,
Kiril Nikolov
Telerik

 

 

[Bob]

[quote]

I mean that if you enable batch editing with autoSync on the dataSource, so please accept my apologies for the missed clarification in my previous response.

[/quote]

Thanks, so given I am not using autoSync, does it make sense that dirty indicators aren't retained when rows are added? 

(I do understand the issue on a sort/page when using server side processing, but we are using client side processing to prevent a need for repopulating the datasource with an ajax call.) 

 

 

[Kiril Nikolov]

Hello Bob,

You are already aware of our stance regarding the dirty indication with batch editing, so I think that we are going in a circle here, if you want a change in the current implementation to be released you can submit this as a feature request on UserVoice, so that it is considered for implementation in a future release.

Regards,
Kiril Nikolov
Telerik

 

 

[Raviraj]

Try this...

 

 <div id="grid"></div>
    <script>
        var crudServiceBaseUrl = "http://demos.kendoui.com/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)};
                    }
                }
            },
            change: function(e){
                if(e.action == "itemchange"){
                    e.items[0].dirtyFields = e.items[0].dirtyFields || {};
                    e.items[0].dirtyFields[e.field] = true;
                }
            },
            batch: true,
            pageSize: 30,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: "number", validation: { required: true, min: 1, max: 10} },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
        });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            sortable: true,
            pageable: true,
            navigatable: true,
            height: 400,
            toolbar: ["create", "save", "cancel"],
            columns: [
                {field: "ProductName", template: "#=dirtyField(data,'ProductName')# #:ProductName#"},
                { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "150px",
                template: "#=dirtyField(data,'UnitPrice')# #:kendo.toString(UnitPrice,'c')#"},
                { field: "UnitsInStock", title: "Units In Stock", width: 150, template: "#=dirtyField(data,'UnitsInStock')# #:UnitsInStock#" },
                { field: "Discontinued", width: 100, template: "#=dirtyField(data,'Discontinued')# #:Discontinued#" },
                { command: "destroy", title: "&nbsp;", width: 110 }],
            editable: true
        });

        function dirtyField(data, fieldName){
            var hasClass = $("[data-uid=" + data.uid + "]").find(".k-dirty-cell").length < 1;
            if(data.dirty && data.dirtyFields[fieldName] && hasClass){
                return "<span class='k-dirty'></span>"
            }
            else{
                return "";
            }
        }
    </script>