How to refresh token when expand row in TreeGrid with DataManager?

[Yvonne]

Hi, I have a problem with expanding the rows in TreeGrid. I am using the DataManager to fetch the data from API, the API have the authorization. When the authorization is expired, the TreeGrid is not able to fetch data. How can I refresh token when expand the rows?

[Shek Mohammed Asiq Abdul Jabbar]

Hi Yvonne,

Greetings from Syncfusion

To achieve your requirement we suggest to pass the token key as an additional parameter in the expanding event of Treegrid. Please refer to the following documentation.

Sending additional parameter  : https://ej2.syncfusion.com/react/documentation/treegrid/data-binding/remote-data#sending-additional-parameters-to-the-server

Expanding event : https://ej2.syncfusion.com/react/documentation/api/treegrid/#expanding

If the provided solution doesn’t meet your requirement, please provide us the following details.

1. Complete treegrid code.
2. Video demo or screenshot of the issue.
3. Token that needs to be passed while expanding the event.

Kindly get back to us for further assistance.

[Yvonne]

Is it able to refresh token in beforeSend in custom adaptor which extends WebApiAdaptor? Here is the example of the code:

It is able to refresh token when expanding the rows, but it still using the old token. Seems like it is not allowed to use asynchronous in adaptor:

Or have any other solutions to refresh token when expanding the rows and update the token in headers?

[Shek Mohammed Asiq Abdul Jabbar]

Hi Yuonne,

We appreciate your patience.

Based on your query, we would like to inform you that the beforeSend method of Treegrid is not an asynchronous function. So, we are not able to handle/perform an asynchronous operation inside the beforeSend method. This method is used only to override/customize the request headers and the attributes.

We achieved your query by using load event of treegrid.

Please refer to the below code snippet :-

<TreeGridComponent 

     . . . .

      load={ onload}

     . . . .

</TreeGridComponent>

 

 

 

public onload(args: any) {

        (DataManager.prototype as any).makeRequest = function (url: any, deffered: Deferred, args?: any, query?: any): any {

 

         . . . . .

 

    let token: any = '';

    let refreshToken: Function = () => {

        debugger

        this.token = "Bearer";

    };

 

    let req: Object = (this as any).extendRequest(url, fnSuccess, fnFail);

    let ajax: Ajax = new Ajax(req);

    let getInstance: any = this;

 

    ajax.beforeSend = () => {

        refreshToken();

        (this as any).beforeSend(ajax.httpRequest, ajax);

         ajax.httpRequest.setRequestHeader("Authorization", "XML" + this.token);

    };

    let customajax: Ajax = new Ajax();

    customajax.type = 'POST';

        (customajax as any).contentType = 'application/json';

        customajax.url = '/Home/Data';

        customajax.data = JSON.stringify({ grid: [{ OrderID: 1009, CustomerID: "Raja", ShipCity: "India" }] });

    customajax.send().then(function(value: any) {

        req = ajax.send();

        (req as any).catch ((e: Error) => true); // to handle failure remote requests.

        (getInstance as any).requests.push(ajax);

    }); 

         . . . .

 

Request Headers :

Please refer to the API for load event : https://ej2.syncfusion.com/documentation/api/treegrid/#load

Kindly get back to us for further assistance.

Regards,  

Shek Mohammed Asiq

[Yvonne]

Hi! Thank you so much, it can refresh token now!

But now I have another question, the Treegrid is keep loading and not showing data. How can I solve the problem? Here is the code:

And this is the Treegrid

[Shek Mohammed Asiq Abdul Jabbar]

Hi Yvonne,

We deeply regret for the inconvenience caused.

From your shared code example, we suspect that the issue was caused by extendRequest method. We need to pass url, FnSuccess, and FnFail for the extendRequest method as parameters. Kindly refer to the sample that we have attached for your reference.

Sample link for reference : https://www.syncfusion.com/downloads/support/directtrac/general/ze/React-core-1868844339

Note:- The extendRequest is a private property in DataManager, so we need to define all parameters to process the method for internal operation. The parameters passed were incorrect in your shared code. Please refer to the FetchEmployee.tsx file in the attached sample.

If the issue replicates, kindly share the simple issue replicable sample or replicate the issue from the attached sample and reach us back.

Regards,

Shek Mohammed Asiq

[Yvonne]

Thank you so much! It works now!

[Suganya Gopinath]

We are glad to hear that the provided solution helped to solve the issue.