We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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?

7 Replies 1 reply marked as answer

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team April 27, 2023 02:16 PM UTC

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.

YV Yvonne May 9, 2023 06:45 AM UTC

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

Screenshot 2023-05-09 144417.png

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?

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team May 12, 2023 03:59 PM UTC

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 :-


     . . . .

      load={ onload}

     . . . .





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 = () => {


        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 = () => {


        (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.


Shek Mohammed Asiq

YV Yvonne May 15, 2023 11:15 AM UTC

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

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team May 16, 2023 03:19 PM UTC

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.


Shek Mohammed Asiq

Marked as answer

YV Yvonne May 17, 2023 06:43 AM UTC

Thank you so much! It works now!

SG Suganya Gopinath Syncfusion Team May 18, 2023 07:29 PM UTC

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

Live Chat Icon For mobile
Up arrow icon