Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
144261 | Apr 27,2019 01:17 AM UTC | May 7,2019 01:31 PM UTC | Vue | 7 |
![]() |
Tags: Data Grid |
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<div class="image">
<img :src="image" :alt="altImage"/>
</div>`,
data: function() {
return {
data: {}
}
},
computed: {
image: function() {
return './' + this.data.EmployeeID + '.png';
},
altImage: function() {
return this.data.EmployeeID;
}
}
})}
}
};
I put in this but it freeze the app
cTemplate: function() { return { template: Vue.component("columnTemplate", { template: `<div> test </div>`, data: function() { return { data: {} }; }, computed: {} }) }; },
<ejs-grid id='Grid' :dataSource="data" :allowPaging="true">
<e-columns>
<e-column headerText='Buttons' width='120' :template='cTemplate'></e-column>
column>
</e-columns>
</ejs-grid>
export default {
data() {
return {
data: data,
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<v-btn color="success">Details</v-btn>`,
data: function() {
return {
data: {}
}
},
method: {
}
})}
}
};
},
provide: {
grid: [Page]
}
} |
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(ButtonPlugin);
Column template:
cTemplate: function () {
return {
template: Vue.component('columnTemplate', {
template: `<ejs-button :isPrimary="true" v-on:click.native="btnClick">Edit</ejs-button>`,
data: function () {
return {
data: {}
}
}
})
}
} |
Grid:
<ejs-grid ref='grid' id='grid' :editSettings='editSettings' :toolbar='toolbar' :dataSource="data" :allowPaging="true">
<e-columns>
<e-column headerText='Commands' width=120 :commands='commands'></e-column>
</e-columns>
</ejs-grid>
export default {
data() {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
commands: [{ type: 'Edit', buttonOption: { cssClass: 'e-flat', iconCss: 'e-edit e-icons' } },
{ buttonOption: { cssClass: 'e-link', content: 'delete', click: this.onClick } }]
};
},
methods: {
onClick: function (args) {
var rowEle = parentsUntil(event.target, 'e-row');
var rowIndex = parseInt(rowEle.getAttribute('aria-rowindex'));
this.$refs.grid.selectRow(rowIndex);
this.$refs.grid.deleteRecord();
}
},
provide: {
grid: [Page, Edit, Toolbar, CommandColumn]
}
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.