Filter menu (type excel) inside column menu crashes after 2 interaction with grid-datasource a CustomDataAdaptor

[Laurin S]

Hi,

I'm using a grid where data is fetched using a CustomDataAdaptor.

The grid has the column menu enabled and as filter settings the Excel-type defined.

Choosing a first filter option from the filter menu in the UI works as expected, however, when I try to open again the filter menu of the column menu, an error appears and the filter menu does not open anymore, so no more chance to modify the filter settings for the column. The error is the following:

Error: Cannot read properties of undefined (reading 'pvtData')
ej2-data.umd.min.js:10

I have also prepared an example which demonstrates the error: https://stackblitz.com/edit/xmsxmx?file=index.ts

Just enable a filter inside the first column using the column menu (three dots in the colum header), then try again to enter in the filter menu, and the error appears. Please be aware that the data of the grid will not change on a filter selection, since the data source is hard-code (=json).

Am I doing something wrong or how can I fix that issue?

[Pavithra Subramaniyam]

Hi Laurin S,

Based on your query, we understand that you are encountering "pvtData of undefined" issue when clicking the filter icon. In this case, the error occurs because the processResponse method's request parameter is undefined or null. We have resolved your requirement by overriding the default CustomDataAdaptor. Please refer to the code snippet below for more details:

 

public override processResponse(data: any, ds?: any, query?: any, xhr?: Request, request?: any, changes?: any): any {

    if (data && data.result && data.count) {

      return UrlAdaptor.prototype.processResponse(

        data,

        ds,

        query,

        xhr,

        request,

        changes

      ); // CustomDataAdaptor extends from UrlAdaptor.

    } else {

      request = Object.assign({}, (ds as any)['fetchReqOption'], request || {});

      return UrlAdaptor.prototype.processResponse(

        data,

        ds,

        query,

        request.fetchRequest,

        request

      );

    }

  }

 

In this else block, request = Object.assign({}, (ds as any)['fetchReqOption'], request || {}); This approach ensures that the request parameter is always an object, either containing the original request data or default options. and If request is undefined or null, it is replaced by an empty object {} to avoid errors.

Please refer the attached sample for more reference

V6urlb (forked) - StackBlitz

Please get back to us if you need further assistance.

Regards,

Pavithra S

[Laurin S]

Thanks for the quick reply.

Will this be corrected on your site by a future update or do we have to include this "patch" ourself in our code?

(In other words: are we using the CustomUrlAdaptor in a wrong way, so that this method override is necessary or this the standard way how to do it in that case?)

[Pavithra Subramaniyam]

Laurin,

When using DataManager with CustomDataAdaptor, the DataManager expects “url” property to be set. This is the reason you are facing the current scenario. To resolve this without the overide, set a valid string to “url” property of the DataManager. Please refer to the code snippet and sample for your reference:

[index.ts]

 

dataSource: new DataManager({

  url: 'url-placeholder', // provide a valid string.

  adaptor: new dCustomDataAdaptor(),

}),

 

Sample: https://stackblitz.com/edit/xmsxmx-tb2zsh?file=index.ts

[Laurin S]

Hi,

unfortunately, this is not possible for us, since we use the CustomDataAdaptor for a certain reason, namely we fetch our data for the grid using the websocket technology. Therefore, no valid url is available/existing.

[Aishwarya Rameshbabu]

Hi Laurin,

Instead of using a valid url, you can set a dummy string value for the url property of the customDataAdaptor to overcome the script issue you are facing. Please refer to the below code example and the sample where we set the url property with value “ Test”.

Index.ts

var dataSource = new DataManager({

  url: 'Test', 

  adaptor: new dCustomDataAdaptor(),

});

Sample: https://stackblitz.com/edit/xmsxmx-qjtnuc?file=index.ts

Regards

Aishwarya R