Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143873 | Apr 8,2019 07:35 PM UTC | Apr 10,2019 07:06 AM UTC | Vue | 3 |
![]() |
Tags: Data Grid |
template: `
<div id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowFiltering='true' height='273px'>
<e-columns>
…
<e-column field='CustomerID' :template='cTemplate' width=120 :filterBarTemplate='templateOptions'></e-column> //Specify the field property for template column.
</e-columns>
</ejs-grid>
</div>
`,
data() {
return {
cTemplate: function () {
return {
template: Vue.component('columnTemplate', { //Template containing values of multiple columns
template: `<table><div>CustomerID : {{data.CustomerID}}</div><br>
<div>ShipCity : {{data.ShipCity}}</div><br>
<div>ShipCountry : {{data.ShipCountry}}</div></table>`,
data: function () {
return {
data: {}
}
},
})
}
},
data: data,
templateOptions: {
create: function (args) {
elem = document.createElement('input');
return elem;
},
write: function (args) {
dObj = new DropDownList({ //Bind the dropdown list to filter bar
dataSource: data,
fields: { text: "CustomerID" },
change: function (args) {
var selVal = args.value;
var grid = document.getElementById('Grid').ej2_instances[0];
grid.filterByColumn("CustomerID", "equal", selVal); //Perform filter for the template column.
}
});
dObj.appendTo(elem);
},
}
|
template: `
<div id="app">
<ejs-grid id="Grid" ref="grid" :created=created :dataSource="data" :allowFiltering='true'>
...
</ejs-grid>
</div>
`,
. . .
},
methods:{
created: function(e) {
this.$refs.grid.ej2Instances.getHeaderTable().querySelector(".e-filterbarcell div").style.display = "none"
},
},
|
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.