Column That Points to Inner Object Property Doesn't Update After grid.refresh()

[Isaac]

The issue is that I have a grid, which is setup to read data from the server, but I also perform other actions against the data, and want to be able to refresh the data using the result returned from other actions.

Here's the sample code that I use to replace a grid row data with newly updated data:

refreshInvoices = function (invoices) {
        var grid = self.gridManager.grid();

        $.each(invoices, function (index, invoice) {
            var dataItem = grid.dataSource.get(invoice.documentID);
            if (dataItem) {
                $.extend(dataItem, invoice);
            }
        });

        grid.refresh();
    };

 

This works fine for simple columns, but it does not work for columns that are pointing at nested object properties.

such as in the below example column definitions, the invoiceDate column would display fine with the updated values, but department.description would not.

columns: [
    {
        field: invoiceDate
    },
    {
        field: "department.description",
    },
]

[Tsvetina]

Hello Isaac,

Have you inspected the actual contents of the dataItem after the call to $.extend. This method does a shallow copy by default and it is possible that not all values are copied over. You can call $.extend with a deep=true setting:

$.extend(true, dataItem, invoice);

Regards,
Tsvetina
Progress Telerik

[Isaac]

Yes, I've inspected the dataItem, and the department property is being populated with the new values, but then there's another property on the dataItem called department.description that still has the old value.

Looks like the flattened values don't get updated off of the non-flattened items, even when the grid.refresh() method is being called.

 

[Tsvetina]

Hi Isaac,

I tried this in the following Dojo but could not observe the described problem. Can you modify the Dojo, so it reproduces the issue that you are describing?
https://dojo.telerik.com/UMAyI

Additionally, keep in mind that the recommended way for changing dataItem values, is to use the set method of the data item. This will not require a grid.refresh() call, as the MVVM bindings in the widget are automatically updated when set is used.

Regards,
Tsvetina
Progress Telerik

[Isaac]

Hey Tsvetina, thanks for the reply and the dojo example.

I've modified it to replicate our issue: https://dojo.telerik.com/UMAyI/4

When you click the update button, the grid values do not change, but if you view the updated object in the console, you'll see that the name object changed, but the ['name.fullName'] value does not.

It looks to me like the main issue is the way that we are accessing the data in a template using data['{fieldname}'], but the strange thing is that on first load of the data, the "name.fullName" property gets generated, but never gets updated by the grid.refresh() calls.

I suppose we could solve this issue by getting the value in the template like so: data.name.fullName, rather than data['name.fullName'].

 

[Tsvetina]

Hi Isaac,

The issue seems related to the template binding. Try binding the column value directly to the field or remove the template definition:

template: "#: name.fullName #"

https://dojo.telerik.com/UMAyI/6


Regards,
Tsvetina
Progress Telerik