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

6 posts, 0 answers
  1. Isaac
    Isaac avatar
    7 posts
    Member since:
    Dec 2013

    Posted 23 Oct 2017 Link to this post

    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",
        },
    ]
  2. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 25 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Isaac
    Isaac avatar
    7 posts
    Member since:
    Dec 2013

    Posted 25 Oct 2017 in reply to Tsvetina Link to this post

    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.

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 27 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Isaac
    Isaac avatar
    7 posts
    Member since:
    Dec 2013

    Posted 27 Oct 2017 in reply to Tsvetina Link to this post

    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'].

     

  6. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 31 Oct 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top