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" :dataSource="data" :created=created :allowFiltering='true'>
<e-columns>
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Employee ID' :template='cTemplate' :filterBarTemplate='templateOptions' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
`,
data() {
return {
...
templateOptions: {
create: function (args) {
elem = document.createElement('input');
return elem;
},
write: function (args) {
dObj = new DropDownList({
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);
}
});
dObj.appendTo(elem);
},
}
};
},
...
}); |
