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.
Try it for free.|
<template>
<div id="app">
<ejs-grid id="Grid":toolbar="toolbar" :dataSource="data" :allowPaging="true" :editSettings="editSettings" :allowFiltering="true" ref="grid">
<e-columns>
...
<e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" type="date" width="120" :filterBarTemplate="templateOptions"></e-column>
...
</e-columns>
</ejs-grid>
</div>
</template>
<script>
...
export default {
name: "App",
data() {
...
templateOptions: {
create: args => {
...
},
write: args => {
var componentObj = Vue.extend(filterBarJalaliDt);
new componentObj({
el: "#" + args.element.id,
template: `<filterBarJalaliDt id=` + args.element.id + ` />`
}).$mount();
}
}
};
},
...
};
var filterBarJalaliDt = Vue.component("filterBarJalaliDt", {
template: `
<div>
<date-picker @open="onOpen" @close="onClose" v-model="date"></date-picker>
</div>`,
data() {
...
methods: {
onOpen(picker) {
console.log("The datepicker is open");
},
onClose(picker) {
console.log("The datepicker was closed");
var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];
grid.filterByColumn("OrderDate","equal", new Date(picker.value))
var wrapper = document.querySelector('.vpd-wrapper.vpd-dir-rtl');
if(wrapper.closest('.e-gridheader')) {
wrapper.remove(); //removing the datepicker
document.querySelector('body').appendChild(wrapper);
}
}
}
});
</script>
...
|
