How to Provide Modules to Data Grid in Vue 3 composition API using provide/inject pattern

[Carlos]

Dear Syncfusion support,

Prior to vue 3 migration, dependency injection was working with via provide/inject pattern (https://vuejs.org/v2/api/#provide-inject ). But I can't get it to work with the Data Grid component in vue 3.

I was able to get the Sort module "injected" by pushing it into injectedModules array, but that bypasses the provide/inject pattern (see below). Is there a way to use the provide/inject pattern (https://v3.vuejs.org/guide/composition-api-provide-inject.html#using-inject ) when using the composition API and Data grid component?

Sincerely,

Carlos

<script lang='ts'>

import {

computed,

watch,

defineComponent, provide, reactive, toRefs, unref,

} from 'vue';

import {

Sort,

} from '@syncfusion/ej2-vue-grids';

import usePeopleGrid from '../_compositions/usePeopleGrid';

import store from '../store';

export default defineComponent({

name: 'PeopleGrid',

setup(_, ctx) {

provide('grid', [Sort]); // <-- the provide/inject patthern does not work

const peopleGrid = reactive({ ...usePeopleGrid() }); // composition function

const featureStore = reactive({ ...store });

const peopleGridData = computed(() => featureStore.peopleGridData);

watch(() => peopleGridData.value, () => {

console.log(peopleGrid.gridRef?.ej2Instances.getInjectedModules()); // gridRef is GridComponent

console.log(unref(peopleGrid.gridRef));

// eslint-disable-next-line no-unused-expressions

peopleGrid.gridRef?.ej2Instances.injectedModules.push(Sort); // <-- this works

console.log(peopleGrid.gridRef?.ej2Instances.injectedModules);

});

return {

...toRefs(peopleGrid),

peopleGridData,

};

},

});

</script>

[Sujith Kumar Rajkumar]

Hi Carlos, 

 

Greetings from Syncfusion support. 

 

Based on the provided information we could understand that you are facing problem with injecting the Grid modules in Vue 3. We suggest you to upgrade the Syncfusion packages to the latest version(v19.2.44 - where this support was provided for the Syncfusion Vue components) and use the below code for injecting the Grid modules, 

 

export default { 

    name: 'App', 

    components: { 

       'ejs-grid' : GridComponent, 

       'e-columns' : ColumnsDirective, 

       'e-column' : ColumnDirective 

    }, 

    provide: {grid: [Sort]}, 

    data() { 

        return { 

          gridData:  employeeData 

        } 

    } 

} 

 

We have prepared a sample based on this for your reference in Vue 3. You can find it below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166897/ze/GridApp-1651442207 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/getting-started/vue3-tutorial/#getting-started-with-vue-3 

 

If we misunderstood your query or if you require any further assistance, then please get back to us. 

 

Regards, 

Sujith R 

[Carlos]

Dear Syncfusion,

Your sample worked. I even converted your sample into composition API and can confirm that it works. However, your sample did not work when it was applied to my configuration (I use Vue CLI, Vue 3, typescript and composition API). I attached a simplified version of my configuration with a similar example and modules like sorting and search are still not working.

Thank you,

Carlos

Attachment: sample3_1b22fe46.zip

[Rajapandiyan Settu]

Hi Carlos,  

  

Thanks for your update. 

We have validated the provided sample and found that you have rendered the Grid Control in the child-component through the router link. We suggest you to resolve the reported issue by directly injecting the Grid modules in its parent component. Please find the below code example and sample for more information. 

[App.vue] 

<template> 

  <div id="nav"> 

    <router-link to="/">Home</router-link> | 

    <router-link to="/about">About</router-link> 

  </div> 

  <router-view/> 

</template> 

<script> 

import { Search, Sort, Toolbar } from '@syncfusion/ej2-vue-grids'; 

import { computed, defineComponent, ref } from 'vue'; 

export default defineComponent({ 

  name: 'App', 

  provide: { 

    grid: [Sort, Search, Toolbar], 

  } 

}); 

</script> 

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

Let us know if you have any concerns. 

  

Regards,  

Rajapandiyan S  

[Carlos]

Thank you, this was the solution I needed. May I suggest adding this into your Vue 3 tutorial section of your documentation if it's not on there already? In Vue 2, providing the modules in the parent component was not necessary when using a router view. This could help others.

Once again, thank you.

Carlos

[Sujith Kumar Rajkumar]

Hi Carlos, 

 

We are glad to hear that your query has been resolved. And as per your suggestion we have logged an internal documentation task to include this information in the help site and it will be updated online in any of our upcoming releases. 

 

Regards, 

Sujith R 

[Luiz Fernando]

Hi Carlos, can u share the way you did provide in composition api?
My code worked providing options way, but for some reason don't work calling provide function in <script setup>

[Karam]

Hi everyone,

I'm also interested if any of you has the solution (same issue).

[Joseph Christ Nithin Issack]

Hi Luiz / Karam,

Sorry for the late reply.

Currently, the EJ2 Vue Grid does not have complete support for Composition API. We already logged a feature request - “Need add support for Provide/Inject in Vue Custom slot” for this requirement. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this feature will be included in any of our upcoming releases.

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.

Feedback: https://www.syncfusion.com/feedback/36677/need-add-support-for-provide-inject-in-vue-custom-slot

We are closing this ticket for now. You can communicate with us regarding the open features any time using the above Feature Report page.  

Regards,

Joseph I.