<template>
<div id="app">
<ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data" >
<e-columns>
<e-column headerText="Employee Image" width="150" textAlign="Center" :template="cTemplate"></e-column>
. . .
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
cTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: `<span>{{data.index}}</span>`,
data: function(e) {
return {
data: {}
};
}
})
};
}
};
},
provide: {},
methods: {}
};
</script> |
<template>
<div id="app">
<ejs-grid id="Grid" ref="grid" :height="400" :dataSource="data">
<e-columns>
<e-column headerText="Employee Image" width="150" textAlign="Center" :template="cTemplate"></e-column>
. . .
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
cTemplate: function() {
return {
template: Vue.component("columnTemplate", {
template: `<span>{{modify(data.index)}}</span>`,
data: function(e) {
return {
data: {}
};
},
methods: {
modify: function(e) {
return parseInt(e,0) + 1;
}
}
})
};
}
};
},
provide: {},
methods: {}
};
</script> |
Hello,
How to implement this solution to show column with row numbers in Composition Api in Vue 3?
Cheers!
Hi Michal,
Thanks for your patience.
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
Regards,
Joseph I.