Issues in Data grid After Upgrading syncfusion components to version 27

[Abhijith]

1. A red Line is coming at the end of Frozen columns in every grid with frozen columns after the update to 27.1+ version (vue-grids version now - 27.1.52) .please find the image below :
2. Api's using Data Manager is giving 307 error since its not picking up token. 

         This below method was working until we updated syncfusion version to 27.1+ (vue-grids version now -                 27.1.52) please find the code below :  

class SerialNoAdaptor extends WebApiAdaptor {

  beforeSend(args, xhr) {

    xhr.withCredentials = true

      super.beforeSend(args, xhr)

  }

......

}

 data:

        new DataManager({

          url: API,

          adaptor: new SerialNoAdaptor()

        }),

      query: new Query().addParams('ej2grid', 'true'),

[Joseph Christ Nithin Issack]

Hi Abhijith,

Greetings from Syncfusion support,

Based on your query, you want to send credentials to the server side and you are facing issue in the latest version. We would like to inform that in our latest DataManager(v23.1.36), we are using fetch request instead of our default AJAX library (which uses XMLHttpRequest). For AJAX, we can enable the inclusion of cookies in the browser by setting "withCredentials" to true. However, when using fetch requests, we should set "credentials" to "include" to instruct the browser to include cookies.

We have logged as bug and while validating this we could see that the Credentials property of a fetch request is initially set to read-only, making it impossible to alter its value dynamically in the beforeSend event arguments.

Therefore, in beforeSend() method we can generate a new fetch request by using the existing fetch request's URL, methods, headers, and set the credentials property to 'include' to instruct the browser to allow cookies. Since we can achieve this in sample level, we suggest the below way to the customer to achieve their requirement.

export class ODataV4AdaptorWithCredentials extends ODataV4Adaptor {

  override beforeSend(

    dm: DataManager,

    request: Request,

    settings: Fetch

  ): void {

    const newFetchRequest = new Request(settings.fetchRequest, { credentials: 'include' });

settings.fetchRequest = newFetchRequest;

  }

}

We hope that this solution and information will assist you in resolving the issue you are facing. Please feel free to reach out if you have any further queries.

Regards,

Joseph I.

[Abhijith]

Hi Team,

With recommended change we are able to get the response from Api but cannot process it in process response function

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

    var original = super.processResponse.apply(this, arguments)

here in arguments :  0: {Items: undefined, Count: 48}

upon checking in fetchResponse we found the body to be locked. the data is visible in the Api response in network

1. body: ReadableStream
1. locked: true
2. [[Prototype]]: ReadableStream
2. bodyUsed: true

Thus we are not able to process the response data. Please provide a solution for this issue at the earliest.

Also please provide an update on the first issue mentioned in my initial query in this thread.

[Aishwarya Rameshbabu]

Hi Abhijith,

Upon reviewing your query, we observed that you are experiencing difficulties with processing response while using a custom adaptor extending the webApiAdaptor in Syncfusion Grid. Based on the information provided, we created a sample to replicate the issue but were unable to do so. Please refer to the sample and screenshots below where the arguments are correctly retrieved in the processResponse method, and the Grid displays the data properly.

Sample: Zzwtc8 (forked) - StackBlitz

Screenshot:

If you continue to encounter issues, kindly share the complete code for implementing the custom adaptor and the Grid rendering, along with a video demonstration of the issue. Alternatively, you may try to replicate the issue using the provided sample.

Query: A red Line is coming at the end of Frozen columns in every grid with frozen columns after the update to 27.1+ version (vue-grids version now - 27.1.52).

The red line represents the default frozen line. It will appear when there is a frozen column in the grid to distinguish the separation of locked columns. For further information on frozen columns, please refer to the documentation link provided below.

Documentation Link: Frozen-column

Regards

Aishwarya R

[Abhijith]

Hi  Aishwarya,

There needs to be a correction in your response, we are not using '  custom adaptor extending the webApiAdaptor' ,we are using ' ODataV4AdaptorWithCredentials extends ODataV4Adaptor ' as this was given as a solution earlier in this thread still we are unable to process the Api response since the response data is shown as locked, as detailed in my previous query.

Note : Tried your solution using  'custom adaptor' but we are getting 'CORS error' during Api call.

            we are using Syncfusion components with version 27+ as mentioned in the previous queries.

[Aishwarya Rameshbabu]

Hi Abhijith,

Custom adaptors in Syncfusion Grid facilitate customized data fetching, processing, and manipulation by extending the default adaptors of the DataManager. We have provided an example demonstrating the inclusion of cookies in fetch requests by extending the default adaptors for demonstration purposes. However, to offer a more effective solution to the issue you are facing, please provide the following details:

- The complete Grid rendering code, including any event handler functions and templates used, along with a detailed explanation of your exact requirements.

- The complete code demonstrating how you are implementing the custom adaptor.

- Screenshots of the issues you are encountering.

- A simple issue replication sample or an attempt to replicate the issue using the sample we previously shared.

Regards

Aishwarya R