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

11 posts, 0 answers
  1. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 19 Aug 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 21 Aug 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 28 Sep 2015 in reply to Kiril Nikolov Link to this post

    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?

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 29 Sep 2015 Link to this post

    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!
     
  6. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 29 Sep 2015 in reply to Kiril Nikolov Link to this post

    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.

     

  7. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 01 Oct 2015 Link to this post

    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!
     
  8. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 01 Oct 2015 in reply to Kiril Nikolov Link to this post

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

     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.

     

  9. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 02 Oct 2015 Link to this post

    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!
     
  10. Bob
    Bob avatar
    138 posts
    Member since:
    Sep 2012

    Posted 02 Oct 2015 in reply to Kiril Nikolov Link to this post

    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.

    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.) 

     

     

  11. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 06 Oct 2015 Link to this post

    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!
     
  12. Raviraj
    Raviraj avatar
    1 posts
    Member since:
    Jun 2016

    Posted 06 Sep in reply to Pierre Link to this post

    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>

Back to Top
Kendo UI is VS 2017 Ready