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.
|
[app.vue]
<template>
<div id="app">
<ejs-grid :dataSource='data' ref="grid" :allowFiltering="true" :allowPaging="true" height='315px' :actionBegin="actionBegin">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' width=150></e-column>
<e-column field='OrderDate' headerText='Order Date' format="yMd" :filterBarTemplate="templateOptions" textAlign='Right' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { data } from './datasource.js';
import { GridPlugin, Sort,Filter, Edit, Toolbar, Group, Page, DataResult } from "@syncfusion/ej2-vue-grids";
import * as cagregorian from "./ca-gregorian.json";
import * as currencies from "./currencies.json";
import * as numbers from "./numbers.json";
import * as timeZoneNames from "./timeZoneNames.json";
import { L10n, loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
import { DateRangePicker, DateRangePickerPlugin} from "@syncfusion/ej2-vue-calendars";
// load the cldr files
loadCldr(cagregorian, currencies, numbers, timeZoneNames);
Vue.use(DateRangePickerPlugin );
Vue.use(GridPlugin);
setCulture('nl');
L10n.load({
'nl': {
----
'daterangepicker': {
placeholder: 'Wählen Sie einen Bereich aus',
startLabel: 'Wählen Sie Startdatum',
endLabel: 'Wählen Sie Enddatum',
applyText: 'Sich bewerben',
cancelText: 'Stornieren',
selectedDays: 'Ausgewählte Tage',
days: 'Tage',
customRange: 'benutzerdefinierten Bereich'
},
}
});
export default {
data() {
return {
data: data,
dateValue: [],
templateOptions: {
create: function (args) {
let elem = document.createElement("input");
return elem;
},
write: function (args) {
var column = args.column.field;
var isFiltered = Object.keys(this.$refs.grid.$el.ej2_instances[0].filterModule.actualPredicate).indexOf(column) > -1;
let dateRangeObj = new DateRangePicker({
placeholder: "",
locale: "nl", // change the locale in the DateRangePicker
dateFormat: "yyyy-MM-dd",
startDate: isFiltered ? this.dateValue[0] : null,
endDate: isFiltered ? this.dateValue[1] : null,
change: function (args) {
if (args.value != null) {
this.dateValue = args.value;
// clear the filtering
this.$refs.grid.$el.ej2_instances[0].removeFilteredColsByField(column);
setTimeout(() => {
// filter the startdate
this.$refs.grid.$el.ej2_instances[0].filterByColumn(column, "greaterthanorequal", this.dateValue[0]);
});
} else {
// clear the filtering
this.$refs.grid.$el.ej2_instances[0].removeFilteredColsByField(column);
}
}.bind(this),
});
dateRangeObj.appendTo(args.element);
}.bind(this),
},
};
},
methods: {
actionBegin: function (args) {
if ( args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate") {
var grid = this.$refs.grid.$el.ej2_instances[0];
// End date value is added as additional filter value with ‘lessthanorequal’ filter operator
args.columns.push({
actualFilterValue: {},
actualOperator: {},
field: "OrderDate",
ignoreAccent: false,
isForeignKey: false,
matchCase: false,
operator: "lessthanorequal",
predicate: "and",
uid: grid.getColumnByField(args.currentFilteringColumn).uid,
value: this.dateValue[1],
});
}
},
},
provide: {
grid: [Page, Filter, Sort, Edit, Toolbar]
}
}
</script>
|
