Hi Marius,
Thanks for contacting Syncfusion support,
As per your requirement, we have used dataBound event and load event of the Grid. Assigned the compiled template to the required column in the dataBound event of the Grid. Refer to the following code example.
<template>
<div id="app">
<ejs-grid
ref="gridObj"
:dataSource="data"
height="300px"
allowPaging="true"
:dataBound="dataBound"
:load="onLoad"
></ejs-grid>
</div>
</template>
let cTemp = function() {
return {
template: Vue.component("columnTemplate", {
template: `<a rel='nofollow' href="#">{{CustomerID}}</a>`,
data: function() {
return {
data: {}
};
},
computed: {
CustomerID: function() {
return this.data.CustomerID;
}
}
})
};
};
export default {
data() {
return {
data: orderDetails.slice(0),
isInitial: false
};
},
methods: {
dataBound: function() {
var gridObj = document.getElementsByClassName("e-grid")[0]
.ej2_instances[0];
let tempCol = gridObj.getColumnByField("CustomerID");
tempCol.template = cTemp;
tempCol.templateFn = templateCompiler(cTemp);
if (this.isInitial) {
gridObj.refreshColumns();
this.isInitial = false;
}
},
onLoad: function() {
this.isInitial = true;
}
},
|
Regards,
Seeni Sakthi Kumar S
