Row template not reflecting changes to model

[Timothy]

Hi all,

I've created a minimal jsFiddle which demonstrates the problem very clearly:

http://jsfiddle.net/YNKM6/3/

Two grids bound to the same data. Both grids have the same two columns. One column has a comboBox editor, the other is a value that gets updated based on the comboBox's selection. When the comboBox value is changed, the change event handler updates the value column data on the observable model.

Grid1 has a row template. When the colour column is changed, the Value column is not updated in Grid1, until the user actually moves to the Value cell. Grid2 updates correctly straight away.

Grid2 does not have a row template. When the colour column is changed, the Value column is updated in both grids straight away.

My spidey-sense tells me this is a bug, but any support or work-arounds you can offer would be great. I'd like to use a row template if possible, and will only fall back on a column template if that is the only viable solution.

Thank-you!

[Nikolay Rusev]

Hello Timothy,

The Grid widget relies heavily on templates. Template is generated for every grid column, that are later combined in a bigger unit, i.e row template.

When a model state change, the Grid finds which row element is bound to this model and re-paints(evaluates the template) only for the cell(if any) which is bound to the field from the model that was modified if it isn't in edit mode.

In case when there is a custom row template defined, there isn't notion for column template and thus the grid cannot repaint only part of the row, it will have to repaint the entire row. However this can only happen if the row isn't in edit mode.

This is basically what happens inside the grid and the reason for the cell not being repainted.

Here is updated fiddle how to trick the grid to repaint the row(by closing the edit container as you've may already guessed): http://jsfiddle.net/YNKM6/5/

The code change is essentially contained in the ComboBox change handler:

var comboChanged = function (event) {
 var grid = this.wrapper.closest("[data-role=grid]").data("kendoGrid"),
   rowModel = grid.dataItem(this.wrapper.closest("tr")),
   newValue = event.sender.value();

 grid.closeCell();
 rowModel.set("Value", "Worked! - " + newValue);
};

Regards,
Nikolay Rusev
the Telerik team

[Timothy]

Excellent!
Thanks for the detailed information. Really helpful for me to understand all this stuff!