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.
|
...
new Vue({
el: '#app',
template: `
<div id="app">
<ejs-grid id='grid' ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'>
</ejs-grid>
</div>
`,
data() {
return {
data: [
...
],
...
{headerText: 'template-col', width: 120, template: function () {
return {
template: Vue.component('columnTemplate', {
template:
`<button @click="fun(event)">buttton</button>`,
data: function () {
return {
data: {}
}
},
methods: {
fun: function(e){
var grid = document.getElementById("grid").ej2_instances[0];
var rowInfo = grid.getRowInfo(e.target);
grid.selectRow(parseInt(rowInfo.cell.parentElement.rowIndex));
grid.editModule.deleteRecord();
}
}
})
}
} }],
};
},
...
}); |
|
...
Vue.use(GridPlugin);
Vue.prototype.$eventHub = new Vue();
new Vue({
el: '#app',
template: `
<div id="app">
<ejs-grid id='grid' ref='grid' :columns="columns" :dataSource="data" :allowPaging="true" :allowSorting='true' :allowFiltering='true':pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'>
</ejs-grid>
</div>
`,
data() {
return {
data: [
...
],
...
{headerText: 'template-col', width: 120, template: function () {
return {
template: Vue.component('columnTemplate', {
template:
`<button v-on:click="fun(event)">buttton</button>`,
data: function () {
return {
data: {}
}
},
methods: {
fun: function(e){
this.$eventHub.$emit('delete',e);
}
}
})
}
} }],
};
},
methods: {
onClick: function(args) {
let rowObj= this.$refs.grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid'));
let data = rowObj.data;
alert(JSON.stringify(data));
}
},
provide: {
grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar, CommandColumn]
},
created() {
this.$eventHub.$on('delete', (e)=>{
debugger
var gRowObj = this.$refs.grid.ej2Instances.getRowInfo(e.target);
var rIndex = gRowObj.rowIndex;
this.$refs.grid.ej2Instances.selectRow(rIndex);
this.$refs.grid.ej2Instances.editModule.deleteRecord();
});
},
});
|
|
|
