Issue with Adding Custom Content to Request Payload with DataManager in Syncfusion Grid

[Romain DEVAUX]

Hello Syncfusion Team,

I am encountering an issue while using DataManager with the Syncfusion Grid in my Angular application. My goal is to create a service that returns a DataManager, and that every action on the grid (pagination, sorting, filtering, etc.) triggers an API request via DataManager, while also adding custom content to the payload of each request.

Issue:

When trying to add a custom object via addParams() or other approaches, the internal Syncfusion parameters (like skip, take, sorted, etc.) get overwritten, causing the grid to malfunction. The following error is also generated in the console:

zone.js:1188 Uncaught TypeError: Cannot read properties of undefined (reading 'pvtData')

When using a CustomUrlAdaptor, I was also losing essential information from DataManager such as the URL and other parameters like pvtData, which caused issues with the grid functionality.

What I’ve Tried:

-  Service with UrlAdaptor and addParams():

I tried adding custom content to the payload using Query.addParams(), but it resulted in the loss of pagination, sorting, and other parameters.

Example code:

public getObjectsDataWithUrlAdaptor(objecttype: string, viewlist: string, views: string[], relations: { [key: string]: unknown } | null): DataManager {
  let content: { [key: string]: unknown } = {
    items: viewlist,
    views,
  };


  if (relations) {
    content = { ...content, relations };
  }


  const url = `${this.#apiUrl}/${BASE_URL}/urladaptor/${objecttype}`;
  const dataManager = new DataManager({ url: url, adaptor: new UrlAdaptor() });
  const query = new Query().addParams('content', JSON.stringify(content));


  dataManager.executeQuery(query);
  return dataManager;
}

However, by adding custom content via addParams(), the internal parameters (like skip, take, sorted) are lost, which prevents the grid from working correctly.

-  Attempts with CustomUrlAdaptor:

I also attempted to create a CustomUrlAdaptor to customize the request process, but this resulted in the loss of the DataManager URL and other essential information such as pvtData.

Example of CustomUrlAdaptor code:

import { DataManager, Query, UrlAdaptor } from '@syncfusion/ej2-data';

export class CustomUrlAdaptor extends UrlAdaptor {
  processQuery(dm: DataManager, query: Query, hierarchyFilters?: object[]): object {
    const request = super.processQuery(dm, query, hierarchyFilters) as any;

    const content = (dm as any).customContent || {};

    const customData = {
      content: content,
      params: query.params || {},
    };

    request.data = JSON.stringify(customData);

    return request;
  }
}

However, when using this CustomUrlAdaptor, I was losing the DataManager URL as well as other important information like pvtData, which hindered the grid's functionality.

​ Desired Solution:

I want to add custom content to the payload of every request sent by the grid, while preserving Syncfusion’s internal parameters such as skip, take, sorted, etc., to ensure the grid functions correctly. I am looking for a way to achieve this while making sure that every action on the grid (pagination, sorting, filtering, etc.) triggers a valid API request.

Additional Information:

Syncfusion version used: 26.2.10

Angular version used: 18.2.0

Thank you in advance for your help.

Best regards,

DEVAUX

[Santhosh Iruthayaraj]

Hi DEVAUX,

Greetings from Syncfusion Support.

We have reviewed the provided details. In your code, you are executing the query on the DataManager instance using the executeQuery method. This immediately executes the query and sends an API request at the time of execution, rather than appending the query to the requests made by the Grid. To include additional parameters in the Grid's requests using DataManager, you need to add the query directly to the Grid’s “query” property. This approach ensures that the additional parameters are sent along with the Grid's requests. You can refer to the following documentation for more details:

Documentation: https://ej2.syncfusion.com/angular/documentation/api/grid/#query

However, based on the provided details, we understand that your requirement is to create a service that returns a DataManager instance with predefined properties. You can achieve this by creating CustomAdaptor from UrlAdaptor and overriding the processQuery method. This allows you to append custom properties to the request payload before sending it to the server without losing the default parameters.

Here is a sample implementation for your reference:

[data.service.ts]

 

  public getObjectsDataWithUrlAdaptor(objecttype: string, viewlist: string, views: string[], relations: { [key: string]: unknown } | null): DataManager {

    let content: { [key: string]: unknown } = { items: viewlist, views, relations };

    const url = `https://services.syncfusion.com/js/production/api/UrlDataSource`;

    const dataManager = new DataManager({

      url: url,

      adaptor: new (class extends UrlAdaptor {

        processQuery() {

          const request: any = super.processQuery.apply(this, arguments);

          const requestData = JSON.parse(request.data);

 

          requestData['content'] = content;

          request.data = JSON.stringify(requestData);

 

          return request;

        }

      })(),

    });

    return dataManager;

  }

 

Sample: https://stackblitz.com/edit/angular-pqeq2j-sq17fnbw

[preview]

Please let us know if you need any further assistance.

Regards,

Santhosh I

[Romain DEVAUX]

Hello Syncfusion Team,

Thank you for your response, I tried creating a CustomAdaptor in my service to add parameters as you suggested. Here is the code I used :

public getObjectsDataWithCustomAdaptor(
  objecttype: string,
  viewlist: IViewList,
  views: string[],
  relations: { [key: string]: unknown } | null,
  formId: string | null = null
): DataManager {
  let content: { [key: string]: unknown } = {
    items: viewlist?.items,
    kanban: viewlist.kanban,
    queryBuilderFilter: viewlist?.queryBuilderFilter,
    orderArray: viewlist?.orderArray,
    views,
    formId,
  };


  if (relations) {
    content = {
      ...content,
      relations,
    };
  }


  const bearer = `Bearer`;
  const url = `${this.#apiUrl}/${BASE_URL}/customadaptor/${objecttype}`;


  const dataManager = new DataManager({
    url: url,
    adaptor: new (class extends UrlAdaptor {
      processQuery(dm: DataManager, query: Query, hierarchyFilters?: object[]) {
        console.log('DataSource 2');
        console.log(dm.dataSource);
        const request: any = super.processQuery.apply(this, [
          dm,
          query,
          hierarchyFilters,
        ]);
        const requestData = JSON.parse(request.data);


        requestData['content'] = content;
        request.data = JSON.stringify(requestData);


        return request;
      }
    })(),
    headers: [{ Authorization: bearer }],
  });


  console.log('DataSource 1');
  console.log(dataManager.dataSource);
  return dataManager;
}

However, i encountered the following console error :

Uncaught TypeError: Cannot read properties of undefined (reading 'pvtData')
    at UrlAdaptor.processResponse (ej2-data.es5.js:3816:28)
    at DataManager.executeLocal (ej2-data.es5.js:6123:29)
    at ej2-data.es5.js:6171:33
    at run (apps\admin\src\app\features\v1\ng1-web\libs\schemaform\angular-schema-form.js:10916:1)
    at runIfPresent (apps\admin\src\app\features\v1\ng1-web\libs\schemaform\angular-schema-form.js:10942:1)
    at onGlobalMessage (apps\admin\src\app\features\v1\ng1-web\libs\schemaform\angular-schema-form.js:10986:1)

This is the same issue I had previously. After i added logs to check, I noticed that the DataSource 1 was triggered first, and it contained the right URL as well as other informations. However, DataSource 2 does not contain my URL anymore :



Could you provide me a solution for this issue and explain to me what might be going wrong ?

Thank you in advance for your assistance.

Best regards,

DEVAUX Romain

[Santhosh Iruthayaraj]

Hi DEVAUX,

The issue you are currently facing (Uncaught TypeError: Cannot read properties of undefined (reading 'pvtData')) has been resolved in the DataManager component in version 27.1.52. As you are using a version prior to this release, you are encountering the issue. To resolve this, we recommend upgrading your package to the latest version or to version 27.1.52, which includes the fix. For your reference, a working sample using the latest version is provided below:

Sample: https://stackblitz.com/edit/angular-pqeq2j-sq17fnbw

Regards,

Santhosh I