Can't change or add elements in a Datasource of a ListGridField

[SimonF]

Hi there,
We have a ListGrid with a ListGridField. In this ListGridField we are using a (remote) Datasource.

If the user is executing a special event, we want to replace the current Datasource in the ListGridField.
Normally I would assume I can use invalidateCache, but this doesn't has any affect on the shown selectOptions of the Selectbox in the ListGridField


I've tested this issue against the latest release of Smartclient 10.1 (SmartClient_v101p_2016-05-13_Pro) and this does happen in all current browsers.
We are facing this issue with a remote datasource, but it's also reproducable with a local datasource

In the example below, an additional item is added after the button click. But despite calling invalidateCache() the data are still there.
In the log you can see that after the button-click the size of the datasource has changed.


Code for reproduction

countryData = [{"countryName" : "Kroatien"
    }, {"countryName" : "Kuba"
    }, {"countryName" : "Lesotho"
    }, {"countryName" : "Lettland"
    }, {"countryName" : "Litauen"
    }, {"countryName" : "Malawi"
    }, {"countryName" : "Malediven"
    }, {"countryName" : "Marokko"
    }, {"countryName" : "USA"
    }
];

function addNewCountries() {
    countryData.push({
        "countryName" : ("" + countryData.size())
    });
    var dataSource = listGrid.getField(listGrid.getFieldNum("countryName")).editorProperties.optionDataSource;
    listGrid.endEditing();
    dataSource.setCacheData(countryData);
    dataSource.invalidateCache();
    dataSource.fetchData()
};

isc.VLayout.create({
    "ID" : "layout",
    "autoDraw" : true,
    "members" : [isc.Button.create({
            "ID" : "button",
            "action" : function () {
                addNewCountries()
            },
            "overflow" : "visible",
            "title" : "Add new countries"
        }), isc.ListGrid.create({
            "ID" : "listGrid",
            canEdit : true,
            "fields" :
            [{
                    "name" : "countryName",
                    "title" : "Country",
                    "editorType" : "ComboBoxItem",
                    "editorProperties" : {
                        "ID" : "listGridField_33Editor",
                        "displayField" : "countryName",
                        optionDataSource : isc.DataSource.create({
                            dataFormat : "json",
                            ID : "countryDS",
                            clientOnly : true,
                            testData : countryData
                        }),
                        "textMatchStyle" : "substring",
                        "loadingDisplayValue" : null
                    }
                }
            ],
            "members" :
            [],
            "data" :
            [{
                    "countryName" : "None"
                }
            ]
        })]
})

Best Regards

[Isomorphic]

There are a few issues with this code.

- firstly calling 'invalidateCache()' after you've called setCacheData() like this will essentially throw away the new cache data you've applied to the dataSource

- secondly the call to dataSource.fetchData() doesn't really do anything in this case.

What you actually want is to apply a new set of cacheData and then notify the various databound components that they need to re-fetch. The easiest way to achieve this for now is to use ds.updateCaches() with an 'invalidateCache' flag on the dsResponse.
We'll also consider whether there are framework changes or documentation clarifications that make sense to simplify this in the future.

function addNewCountries() {
    countryData.push({
        "countryName" : ("" + countryData.size())
    });
    var dataSource = listGrid.getField(listGrid.getFieldNum("countryName")).editorProperties.optionDataSource;
    listGrid.endEditing();
    dataSource.setCacheData(countryData);
    var response = {operationType:"update", invalidateCache:true};
    dataSource.updateCaches(response);  
};

Regards Isomorphic Software

[SimonF]

Thanks for the explanation. This does indeed fix the problem we've encountered (also with a remote datasource). We will use this for updating the datasource.

I think it would be helpful to add some clarifications to the docs.
Invalidating the cache with invalidateCache() and afterwards callign fetchData() should have also worked.

In addition it's not clear why your example is working. You are also setting new cache date (setCacheData) and afterwards send a message with "invalidateCache:true". It looks like this should also invalidate the cache and should also cause a new fetch of the data.

Maybe it would be clearer if something like the code block below is called.

var response = {operationType:"update", invalidateCache:true, data: countryData};
dataSource.updateCaches(response);

Best Regards