Datasource conflict between two grids rendered in the same page.

[Alberto Provencio]

Hello,

We are building a Vue3 website using Syncfusion grid. We've make a grid component wrapper with a custom data adaptor.

We have two views with the same parent that renders two grids (one per view). The problem is that when the second grid is created it seems to replace the data adaptor of the first grid, which is created in another view, another id, and its own instance of the data manager.

We've the theory that the Syncfusion grid are resolving only one data adaptor instance for both grids. But the grids in each view are differents, with differentId and with different data adapter classes instantiated in each view.

This is how the grid wrapper lo:

<GridComponent

    ref="grid"

    :id="gridId"

    :columns="columns"

    :dataSource="dataSource"

...

  />

<script lang="ts">

import { GridComponent } from '@syncfusion/ej2-vue-grids';

...

</script>

The data adaptor looks like this:

 createCustomDataManager: (service: IEditInlineServiceReturn<any>, filter: any = {}) => new DataManager({

    headers: [{ Authorization: `Bearer ${getKeycloak()?.token}` }],

    adaptor: new CustomDataAdaptor({

      getData: async (option: AjaxOption) => {

        try {

          const data = JSON.parse(option.data!);

          const request = flatRequest(data);

          const externalFilters = getExternalFilters(filter);

          request.filters.push(...externalFilters);

          const response = await service.fetch(request);

            option.onSuccess!(response.data, extend({}, option, { httpRequest: response.request }));

        } catch (error) {

            option.onFailure!((error as any).request);

        }

      },

...

This is an example of the grid component creation;

<GGrid

      ref="grid"

      :columns="headers"

      :dataSource="dataSource"

      :externalFilters="filter"

      :editSettings="editSettings"

      :allowSorting="false"

      :allowPaging="false"

      :service="service"

      :allowFiltering="false"

      :hideChildGridCols="true"

      :actionComplete="gridActionCompleted"

    />

...

const service = new RelfiletypeconfigurationphaseGridService('relfiletypeconfigurationphase');

...

return {

dataSource: SyncfusionUtils.createCustomDataManager(service, props.filter),

...

[Rajapandiyan Settu]

Hi Alberto, 

Thanks for contacting Syncfusion support. 

Based on your query, we suspect that you are rendering two grids from two different vue (HOC) in the root vue and both the Grid’s uses same data adaptor instances in the vue which is not the expected behaviior. We will prepare the sample to reproduce the issue at our end. We will update the further details on or before Feb 21^st, 2022. 

In the meantime, kindly share the below details which will be very helpful for us. 

 

1. Share the video demo of the issue,
2. Share the complete code you have used.
3. If possible, share the simple issue reproducible sample which will be very helpful for us.
4. If we misunderstood your query, kindly explain your problem in detail.

Regards, 

Rajapandiyan S 

[Rajapandiyan Settu]

Hi Alberto, 

Thanks for your patience. 

Query: We have two views with the same parent that renders two grids (one per view). The problem is that when the second grid is created it seems to replace the data adaptor of the first grid, which is created in another view, another id, and its own instance of the data manager. 

We have prepared the sample as per your requirement and we are unable to reproduce the issue at our end. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue3_childviews614056699.zip 

Still, if you face the issue kindly share the below details to replicate this. 

1. Share the complete code you have used.
2. Share the video demo of the issue.
3. If possible, share the issue reproducible sample or try to make the issue.

  

Regards, 

Rajapandiyan S