Custom parse the response data in Datamanager for grid.

[Kowsik Paduchuri]

Hi, currently in our application we are facing the issue of numbers being larger than 16 digits, due to the limitations of JS these number are not shown accurately on the grid. I was able to use JSONBig Parse to convert the larger than 16 digits number in all the places except in Syncfusion Grids. Could someone please help me how could I use the custom parses like  JSONBig Parse to parse the syncfusion grid data instead of Json Parse. 

We are using ODataV4Adaptor as a datasource.

[Pavithra Subramaniyam]

Hi Kowsik,

Greetings from Syncfusion support.

You can modify the response from the server by overriding the built-in response processing using the processResponse method of the ODataV4Adaptor. Please refer to the below code example and documentation link for more information.

export class CustomAdaptor extends ej.data.ODataV4Adaptor {

  // in this method you can customize the retrieved data before binding it to the Grid

  processResponse(data, ds, query, xhr, request, changes) {

    // here you can custromize the "data" from the server

    var result = super.processResponse.apply(this, [

      data,

      ds,

      query,

      xhr,

      request,

      changes,

    ]);

    // here you can customize the processed "result"

    return result;

  }

}

 

var data = new ej.data.DataManager({

  url: hostUrl,

  adaptor: new CustomAdaptor(),

  crossDomain: true,

});

https://ej2.syncfusion.com/javascript/documentation/grid/data-binding/remote-data#custom-adaptor

Please get back to us if you need further assistance on this.

Regards,

Pavithra S

[Kowsik Paduchuri]

HI @Pavithra Subramaniyam,

I am using Odata with the datamanager and the `data` in  processResponse is already parsed even before passing to  super.processResponse.apply, causing the large number issue.

[Kowsik Paduchuri]

Hi, any update on the above question?

[Dineshnarasimman Muthu]

Hi ,

We would like to tell you that in JavaScript, numbers are represented using the IEEE 754 double-precision floating-point format. This format has limited precision, which means that when large integers, such as "5304828812088313814" are processed, JavaScript may not be able to represent every digit precisely. As a result, the number is rounded to the nearest representable value, which in this case is "5304828812088314000". The rounding occurs because the difference between the original number and the closest representable value is smaller than the smallest precision that can be represented by the double-precision floating-point format. This is the default behavior and it is reflected in the Syncfusion grid component.

Regards,

Dineshnarasimman M

[Kowsik Paduchuri]

Hi, I know its default behavior, but in JavaScript we get the response form a API call as String, which is then converted to JSON, here we could use Lib like BigInt-Json to handle converting larger integers, but in Syncfusion Grid Odata, I want to change/add to the above conversion i.e, before the Odata response is converted to Json, I want to update it to use the custom Implementation.

If not please let me know of any other solutions on how we could handle the larger intergers in syncfusion Grid with Odata

[Kowsik Paduchuri]

Good morning, any update on the above request.

[Pavithra Subramaniyam]

Kowsik Paduchuri,

As mentioned earlier, the DataManager processes the server response based on the default JavaScript parsing behavior to display the data correctly in the Grid. However, as a workaround, you can prevent this parsing by setting the “dateParse” property as false to the DataManager specifically provided for this requirement. This will prevent the parsing and access the data inside the “processResponse” method. Please refer to the below code example 

export class CustomAdaptor extends ej.data.ODataV4Adaptor {

  // here you can use your custom parse and then call the default parseJson method

 

  data = ej.data.DataUtil.parse.parseJson(data);

  processResponse(data, ds, query, xhr, request, changes) {

    // here you can custromize the "data" from the server

    var result = super.processResponse.apply(this, [data, ds, query, xhr, request, changes,]);

    // here you can customize the processed "result"

    return result;

  }

}

 

var data = ej.base.extend(new ej.data.DataManager({

  url: hostUrl,

  adaptor: new CustomAdaptor(),

  crossDomain: true,

}), { dateParse: false });

 

[Kowsik Paduchuri]

Hi, in the above code sample, is it DateParse or DataParse

[Pavithra Subramaniyam]

Kowsik Paduchuri,

We recommend disabling the dateParse property of the DataManager as a workaround

[Kowsik Paduchuri]

Where should I add the following code

data = ej.data.DataUtil.parse.parseJson(data);

Since Custom Adaptor is a class, I cannot add it directly in the class.

[Pavithra Subramaniyam]

Kowsik Paduchuri,

you can add the parseJSON method inside the processResponse method. Please refer to the below code example for more information.

  processResponse(data, ds, query, xhr, request, changes) {

     // here you can use your custom parse and then call the default parseJson method 

    data = ej.data.DataUtil.parse.parseJson(data);

    var result = super.processResponse.apply(this, [data, ds, query, xhr, request, changes,]);

    // here you can customize the processed "result"

    return result;

  }