Custom popup editor and cell dirty flags

[Gunnar]

Hi,

I have a grid with batch inline editing but with a custom editor (a different grid in a popup window) for one of the columns. The problem is that after editing in the popup grid it removes all dirty flags on all changed cells (the red triangle in the cell's top left corner). The flags should stay but I'm doing something wrong and I just can't see it...

example: http://jsfiddle.net/nojgzu0j/1/ change for example "name" and "age" and then click in a "travelled" cell - which shows the popup and removes the red flags. 

Thanks

[Alexander Popov]

Hi Gunnar,

This happens because the model's change event has been triggered, which causes the Grid to redraw the row and lose the dirty indicators. I would recommend using a template to manually insert the indicator when necessary, as shown in this example.

Regards,
Alexander Popov
Telerik

 

 

[Gunnar]

Hi Alexander,

Thank you for the answer, the suggested solution works.

But... Is it possible to design the popup edit so it doesn't trigger a redraw of the main grid and avoid the template based solution (I have 20+ columns in production where some already have templates)?

Thanks,
Gunnar

[Alexander Popov]

Hello Gunnar,

The redrawing happens automatically due to the two-way binding used by the input elements and widgets in the popup editor. The workaround would be to create a popup editor template that does not use any value bindings and utilize the Grid's save event to manually set the values of the underlying dataItem's fields.

Regards,
Alexander Popov
Telerik

 

 

[Gunnar]

I will try that, thank you Alexander.

The template solution shows the dirty flag only for the last edited "travelled" cell - all the other cells are working as expected. Any idea why?

http://jsfiddle.net/nojgzu0j/2/

\Gunnar

[Alexander Popov]

Hello again Gunnar,

Basically, the dirtyFields is not updated, hence the dirty indicator is not drawn by the template function. This could be done by utilizing the save event handler of the child Grid, for example: 

function travelEditor(container, options) {
    var grid = $("#edit-grid").data("kendoGrid");
    grid.unbind("save");
    grid.bind("save", function(e){
        if(options.model.dirtyFields){
             options.model.dirtyFields["travelled"] = true;
        }else{
            options.model.dirtyFields = { travelled : true};
        }
    })
   ...
}

Regards,
Alexander Popov
Telerik