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.
|
<template>
<div id="app">
<div class="wrapper">
<ejs-daterangepicker :placeholder="waterMark"></ejs-daterangepicker>
<Button type="button" @click="change">Filter</Button>
</div>
<ejs-grid :allowFiltering="true" :filterSettings='filterOptions' :dataSource="data">
<e-columns>
<e-column field="Sno" headerText="SNO" textAlign="Right" width="150"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="90"></e-column>
<e-column
field="OrderDate"
headerText="Order Date"
textAlign="Right"
format="yMd"
type="date"
width="120"
></e-column>
<e-column
field="ShippedDate"
headerText="Shipped Date"
textAlign="Right"
format="yMd"
type="date"
width="120"
></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { DataManager, ODataAdaptor } from "@syncfusion/ej2-data";
import { DateRangePickerPlugin } from "@syncfusion/ej2-vue-calendars";
Vue.use(GridPlugin);
Vue.use(DateRangePickerPlugin);
class SerialNoAdaptor extends ODataAdaptor {
processResponse() {
let i = 0;
//calling base class processResponse function
let original = super.processResponse.apply(this, arguments);
//Adding serial number
original.result.forEach(item => (item["Sno"] = ++i));
return { result: original.result, count: original.count };
}
}
export default {
data() {
let SERVICE_URI =
return {
data: new DataManager({
url: SERVICE_URI,
adaptor: new SerialNoAdaptor()
}),
filterOptions: {
type: 'Menu'
}
};
},
methods: {
change(args) {
var datepicker = document.getElementsByClassName("e-daterangepicker")[0]
.ej2_instances[0];
var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0];
var dateValue1 = datepicker.value[0];
var dataValue2 = datepicker.value[1]; //get date values from date range picker
grid.filterSettings.columns = [
{
value: dateValue1,
operator: "greaterthanorequal",
field: "OrderDate",
predicate: "and"
},
{
value: dataValue2,
operator: "lessthanorequal",
field: "OrderDate",
predicate: "and"
}
];
}
},
provide: {
grid: [Filter]
}
};
</script>
<style>
.wrapper {
max-width: 250px;
margin: 0 auto;
}
</style>
|
