Update single cell value on MVVM Jquery grid, without reloading whole grid

[Robin]

Hi

I've got a simple example to demonstrate the behaviour bothering me:

http://dojo.telerik.com/unUhOGuf/16

It's a Jquery MVVM grid with an observable data source, being altered in a single cell with set, but refreshing the whole grid.

Have found some fancy examples, rerendering the row template manually, but that's not the way I want to got.

 

So my question: How to get the grid refreshing the cell I've updated, without reloading everything else in a simple way?

 

In another case, I have a detail template, collapsing each time a value is update (which is annoying as well, because I save my detail-template-opened-state in it), but lets stay on the first example for now.

Don't know, why it's refreshing everything anyway, because I don't have any scenario, I would want this kind of behaviour.

 

Greets Robin

[Tsvetomir]

Hi Robin,

The set() method used would make a change in the data source of the grid. More specifically the second item of the data source. However, this change would not be automatically shown in the text of the cell. This is due to the fact the table renders at first and the only way to automatically have the changes in the data source applied is to rerender the table. And that is what the set() does. 

If you would like to omit to rerender the whole table, I can recommend explicitly changing the text of the cell. Here is an example:

        onButtonClick: function () {
          // Update single value with random data
          var randomString = Math.random().toString(36).substring(7);
          this.dataSource[2].Text= randomString;
          var uid = this.dataSource[2].uid;
          var row = $("#grid").getKendoGrid().table.find("tr:eq(2)");
          var cellIdx = $("#grid").find("th[data-field='Text']").index();
          row.find("td:eq("+cellIdx+")").text(randomString);
        }

In this case, the grid is bound to a simple array. Therefore, the rows do not have any information about its corresponding model in the data source. Hence, accessing a specific row or cell would be difficult. If the grid is bound to an instance of a DataSource, then the rows would have the data-uid attribute assigned. Here is the code snippet which would be accessing the row dynamically:

         var uid = this.dataSource[2].uid;
          var row = $("#grid").getKendoGrid().table.find("tr[data-uid='"+ uid +"']");
          var cellIdx = $("#grid").find("th[data-field='Text']").index();
          row.find("td:eq("+cellIdx+")").innerHtml(randomString);

You can check the data-uid attribute in action in the following live demo:

https://demos.telerik.com/kendo-ui/grid/mvvm

I hope you find this helpful. Let me know on additional details about the actual scenario you are facing on your side, so that I can provide suggestions there, as well.

 

Best regards,
Tsvetomir
Progress Telerik

[Robin]

Hi Tsvetomir

Thanks for your explanation and your solution works.

Still hoping there will be another solution in future, cause it's a common case to update a single value and I don't want to do this kind of work, where the grid/binding will be better doing it.
(setSingleValue(..), etc.)

Greets Robin

[Robin]

*

Forgot to mention I'm using templates in all cells and have to manually recreate them with this attempt, which is another reason, grid/datasource should do this on it's own.

[Robin]

Hi again

I've updated the example from above, showing the same issue with having e.g. a dropdownlist in a row template.

http://dojo.telerik.com/EdAwunIs/6

 

Binding the dropdownlist value to a property of the current row and then changing it, reloads the whole grid as well.

How to avoid this one?

 

Greets Robin

[Tsvetomir]

Hi Robin,

Thank you for sharing the updated sample.

Generally, alternating the logic of the set() method or introducing a new method would not be possible. This is due to the fact that when the values are changed, the change event of the data source is triggered and a chain of events is triggered afterward. Preventing the same would introduce breaking changes and we aim to avoid such ones. 

However, I can suggest another workaround which might be a good fit. Just before using the set() method, detach the change event. After the change, attach the event once again. As well as, update the HTML manually:

      onButtonClick: function () {
        // Update single value with random data
        var randomString = Math.random().toString(36).substring(7);
        
        var rowIndex = 2;
        var columnName = 'Text';
        
        var grid  =$('#grid').getKendoGrid();
        
        grid.dataSource.unbind("change", grid._refreshHandler);
        var oldOne = this.dataSource.data()[rowIndex][columnName];
        this.dataSource.data()[rowIndex].set(columnName, randomString);
        grid.wrapper.find("td:contains("+oldOne+")").text(randomString);
        grid.dataSource.bind("change", grid._refreshHandler);
      }

Here is the corresponding Dojo sample:

http://dojo.telerik.com/IvOhICay

As per the DropDownList, I would suggest removing the binding of the current one. Instead, initialize a plain DropDownList and subscribe to its change event. Within the handler, apply the logic stated above.

I hope this helps.

 

Best regards,
Tsvetomir
Progress Telerik

[Robin]

Hi Tsvetomir

I've started using your MVVM components because of the MVVM pattern.
Not using binding in grid, instead updating every cell and cell template by hand and not using binding in components in this grid, seems to be the wrong way.

I like bindings, because a change on the source data will reflect to every part using it.
Now it sounds, like I still have to update every part, where the data is used, manually.

For me it would be
 - Updating datasource with = instead set - ok, no more work to do
 - Updating cell manually
 - Rerendering template for cell, which I'm using a lot
 - Determine every other place the value is used and updating and rerendering everything as well
 - Determine all dependent other properties to the one I've changed, determine every other place the dependent properties are used and updating and rerendering all cells and templates as well
 - Rewriting use of binding on at least dropdownlist, manually setting value, listen for value changes from outside dropdownlist and updating all dropdownlists I'm using, listen for source changes from and updating all as well
 - I think it's rewriting every other element which is changing datasource values as well

In my opinion there has to be another solution than doing all this manually.
It's more work useing this workarounds, than doing everything else in my project.

We're paying for your software, so please have it checked.

Greets Robin

[Tsvetomir]

Hi Robin,

Thank you for taking the time to share with me the scenarios you have to cover. I completely understand your point of view and position. 

For this specific case (updating a single cell in the grid), I have consulted with the development team of the Kendo UI. As a quick summary, this functionality would have to update only one model without refreshing the whole grid.

In order to update a single model, the rest of the models have to be detached from the UI. And detaching the models from the UI might lead to unexpected behavior. For instance, a mismatch between the values shown in the UI and the values in the model. 

With that said, I cannot commit that this functionality would be implemented in the foreseeable future. 

I apologize for the inconvenience this might have caused.

 

Best regards,
Tsvetomir
Progress Telerik

[Robin]

My current solution I've worked out for this scenario:

http://dojo.telerik.com/EKifIzON/17

[Tsvetomir]

Hi Robin,

Thank you for taking the time to share your solution with our community. 

I have tested out the scenario and, indeed, it works as expected without reinitializing the grid. However, this approach decouples the data items from the view model. Therefore, there might be scenarios in which the data in the ViewModel is not the same as the one shown in the view.

 

Best regards,
Tsvetomir
Progress Telerik

[Robin]

Hi Tsvetomir

If you say double data, do you mean dataArray & dataSource?

That's because of my scenario, I think it can be done with dataSource only, writing data directly to dataSource and updating dataSouce.data[i].

But haven't tested this.

Greets Robin

[Tsvetomir]

Hi Robin,

What I refer to was that the current approach updates the dataArray collection. The items of this collection are decoupled from the data source and the view itself.

In case an external change to this collection is made, there might be a chance of having one value in the collection and another value in the view (both of them referring to the same property). However, with the sample that I have provided, I have not observed the latter.

Feel free to contact me back in case I can help with anything else.

 

Regards,
Tsvetomir
Progress Telerik