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 Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
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"
},
},
|
