We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<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;
}
},
|
