This is a migrated thread and some comments may be shown as answers.

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

10 Answers 546 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pierre
Top achievements
Rank 2
Iron
Iron
Pierre asked on 19 Aug 2013, 08:34 PM
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

10 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 21 Aug 2013, 12:50 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bob
Top achievements
Rank 1
answered on 28 Sep 2015, 08:59 PM

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?

0
Kiril Nikolov
Telerik team
answered on 29 Sep 2015, 06:57 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 29 Sep 2015, 01:58 PM

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.

 

0
Kiril Nikolov
Telerik team
answered on 01 Oct 2015, 08:02 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 01 Oct 2015, 01:56 PM
[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.

 

0
Kiril Nikolov
Telerik team
answered on 02 Oct 2015, 10:28 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Bob
Top achievements
Rank 1
answered on 02 Oct 2015, 02:06 PM
[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.) 

 

 

0
Kiril Nikolov
Telerik team
answered on 06 Oct 2015, 07:41 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Raviraj
Top achievements
Rank 1
answered on 06 Sep 2016, 07:41 AM

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>

Tags
Grid
Asked by
Pierre
Top achievements
Rank 2
Iron
Iron
Answers by
Kiril Nikolov
Telerik team
Bob
Top achievements
Rank 1
Raviraj
Top achievements
Rank 1
Share this question
or