|
<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;
}
},
|
