Dirty Flag for Kendo Grid

4 posts, 0 answers
  1. Tuan Minh
    Tuan Minh avatar
    3 posts
    Member since:
    Aug 2016

    Posted 25 Oct Link to this post

    Hello Telerik Team,

    I have a MVC kendo Grid bound to an Ajax DataSource. The grid uses InCell Edit mode.

    I wish to be able to change the content of the grid via js and have achieved this by using set:

    var firstItem = $('#inventoryTransReview_grid').data().kendoGrid.dataSource.data()[0];
    firstItem.set('Remark','test')

     

    While this will change the Remark column content to 'test' and set firstItem.dirty to be true, it won't show the little "dirty flag" marker like it normally will in case of directly editing the Grid.

    Is it because the Dirty Flag marker is handled by the Grid and not the DataSource? Any workaround to show the "dirty flag" marker in this case?

    Thanks,

    Michael.

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Oct Link to this post

    Hello Tuan Minh,

    When a Grid dataItem property is modified through the set method, the change event of the dataSource is triggered, which forces rebinding of the Grid. As a result the table element of the Grid will be redrawn. I would recommend to check the following example:

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Editing/preserve-the-dirty-indicator-in-incell-editing-and-client-operations

    which demonstrates how to achieve the desired result. It uses the JavaScript Grid, but the relevant part could be used in the MVC one too. The columns have a template, invoking a JavaScript function:

    template: "#=dirtyField(data,'ProductName')# #:ProductName#"

    which prepends the dirty indicator to the cells if the item is dirty:

    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 "";
        }
    }

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
  3. Kendo UI is VS 2017 Ready
  4. Tuan Minh
    Tuan Minh avatar
    3 posts
    Member since:
    Aug 2016

    Posted 26 Oct in reply to Dimiter Madjarov Link to this post

    Thanks. Works perfectly. Important to note to include this js function to Change event of the DataSource:

    function(e){
                    if(e.action == "itemchange"){
                        e.items[0].dirtyFields = e.items[0].dirtyFields || {};
                        e.items[0].dirtyFields[e.field] = true;
                    }
                }
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 26 Oct Link to this post

    Hello Tuan Minh,

    Yes you are correct, thank you for mentioning this.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready