Exception when filter row is visible in ListGrid with custom data source and fields

[abika]

Hi,
we have an issue with the filter editor row for a ListGrid. The ListGrid has a custom data source and custom ListGridFields, both set with the

ListGrid#setDataSource(DataSource, ListGridField...)

method. The data source itself and all field settings seem to work fine but when clicking/focusing a form item in the filter row (except the one in the first column) there are equal exceptions thrown logged in the browser console:

*16:00:59.365:IFCS1:WARN:Log:TypeError: Cannot read property 'countryCode' of undefined
Stack from error.stack:
DynamicForm._getUpdatedDSFields(<no args: exited>) on [DynamicForm ID:isc_DynamicForm_0] @ ISC_Forms.js:317:226
[c]DynamicForm.valuesHaveChanged(<no args: exited>) on [Class DynamicForm] @ ISC_Forms.js:688:132
DynamicForm.valuesHaveChanged(<no args: exited>) on [DynamicForm ID:isc_DynamicForm_0] @ ISC_Forms.js:316:241
DynamicForm.getChangedValues(<no args: exited>) on [DynamicForm ID:isc_DynamicForm_0] @ ISC_Forms.js:320:296
ListGrid.storeUpdatedEditorValue(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Grids.js:2322:80
ListGrid.getEditValue(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Grids.js:2243:7
ListGrid._changeEditCell(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Grids.js:1993:263
ListGrid.cellEditEnd(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Grids.js:2318:6
[c]Class.invokeSuper(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Core.js:299:93
[c]Class.Super(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Core.js:291:170
RecordEditor.cellEditEnd(<no args: exited>) on [RecordEditor ID:isc_ListGrid_0$31t] @ ISC_Grids.js:3480:13
[a]ListGrid._editFormItem_setLGEditCellForFocus(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Grids.js:879:460
[o]ListGrid._editFormItem_elementFocus(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Grids.js:879:88
DynamicForm.bubbleItemHandler(<no args: exited>) on [DynamicForm ID:isc_DynamicForm_0] @ ISC_Forms.js:572:10
DynamicForm.elementFocus(<no args: exited>) on [DynamicForm ID:isc_DynamicForm_0] @ ISC_Forms.js:593:9
FormItem._nativeElementFocus(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Forms.js:1410:50
[c]Class.invokeSuper(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Core.js:299:93
[c]Class.Super(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Core.js:291:170
TextItem._nativeElementFocus(<no args: exited>) on [TextItem ID:isc_TextItem_1 name:countryName] @ ISC_Forms.js:1958:642
FormItem.__nativeFocusHandler(<no args: exited>) on [Class FormItem] @ ISC_Forms.js:720:11
FormItem._nativeFocusHandler() @ ISC_Forms.js:715:357

Note that in our code filtering itself is working. But sometimes the exception is causing that the sizes of the filter editor items are not adjusted when the columns are resized.
Another user interaction triggering this exception is showing/hiding columns via the column chooser context menu. This causes that the checkbox states are not updated properly.

Minimal example to reproduce:

    @Override
    public void onModuleLoad() {
        DataSource countryDS = CountryDS.getInstance();

        ListGrid countryGrid = new ListGrid();
        countryGrid.setWidth(500);
        countryGrid.setHeight(224);
        countryGrid.setAlternateRecordStyles(true);
        countryGrid.setShowAllRecords(true);
        countryGrid.setAutoFetchData(true);

        countryGrid.setShowFilterEditor(true);

        ListGridField countryCodeField = new ListGridField("countryCode", "Code");
        countryCodeField.setType(ListGridFieldType.TEXT);
        ListGridField countryNameField = new ListGridField("countryName", "Country");
        countryNameField.setType(ListGridFieldType.TEXT);
        ListGridField capitalField = new ListGridField("capital", "Capital");
        capitalField.setType(ListGridFieldType.TEXT);
        countryGrid.setDataSource(countryDS, countryCodeField, countryNameField, capitalField);

        countryGrid.draw();
    }

    private static class CountryDS extends DataSource {

        private static CountryDS instance = null;

        public static CountryDS getInstance() {
            if (instance == null) {
                instance = new CountryDS("localCountryDS");
            }
            return instance;
        }

        public CountryDS(String id) {
            setID(id);

            setTestData(CountrySampleData.getNewRecords());
            setClientOnly(true);
        }
    }

(which is the "Local DataSource" example in the Showcase but with ListGridFields set instead of DataSourceFields and with the filter row visible).

A fix and/or workaround is appreciated. Setting the fields in the data source instead of the ListGrid would be complicated for us because the fields are heavily customized (for filtering, sorting, editing, etc.).

Browser is Chrome and version is v12.1p_2020-04-28.

Thanks in advance.

[Isomorphic]

This isn't a valid way of doing things - fields must be in the DS, otherwise the DataSource cannot perform any of the CRUD operations on the data (it does not have the ListGrid's fields).

It's a surprise that this even partly works; definitely entirely invalid.

[Isomorphic]

As far as this:

Setting the fields in the data source instead of the ListGrid would be complicated for us because the fields are heavily customized (for filtering, sorting, editing, etc.).

Please review the QuickStart Guide, Data Binding chapter. You set fields in both places: basic data definition information that applies to all kinds of components (like validators) goes in the DataSource fields, then component-specific information (like displaying a particular field as icons instead of the textual value) goes in component fields.

See also SimpleType for a further way of centralizing formatting and editing behaviors.

[Blama]

Hi abika,

I'd definitely try to express as much as possible in the DataSource, as then many many things just work.
DS Customizing I'd do (if possible) serverside with DynamicDSGenerator.

Best regards
Blama

[abika]

Thanks for all the feedback.

We have a client only data source:

 setDataProtocol(DSProtocol.CLIENTCUSTOM); setClientOnly(true); setCacheAllData(false);

and are answering DS requests by overwriting transformRequest().
Which is probably the reason why it was working until these exception came up.

Anyway, we are setting the fields now in the data source and the issue is gone.