Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
143536 | Mar 26,2019 03:25 AM UTC | Apr 8,2019 05:16 AM UTC | Vue | 14 |
![]() |
Tags: Data Grid |
<template>
<div id="app">
<ejs-grid :dataSource='data' :allowFiltering='true' :filterSettings='filterOptions' height='273px'>
<e-columns>
<e-column field='OrderID' :filter= 'filter' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
<e-column field='ShipName' headerText='Ship Name' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Filter } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
import { DropDownList } from "@syncfusion/ej2-dropdowns";
import { DataManager } from "@syncfusion/ej2-data";
import {createElement} from "@syncfusion/ej2-base";
Vue.use(GridPlugin);
export default {
data() {
let dropInstance = null;
return {
data: data,
filterOptions: {
type: 'Menu'
},
filter: {
ui: {
create: function (args) {
let db = new DataManager(data);
let flValInput = createElement('input', { className: 'flm-input' });
args.target.appendChild(flValInput);
dropInstance = new DropDownList({
dataSource: new DataManager(data),
fields: { text: 'OrderID', value: 'OrderID' },
placeholder: 'Select a value',
popupHeight: '200px'
});
dropInstance.appendTo(flValInput);
},
write: function (args) {
dropInstance.value = args.filteredValue;
},
read: function (args) {
args.fltrObj.filterByColumn(args.column.field, args.operator, dropInstance.value);
}
}
}
};
},
provide: {
grid: [Filter]
}
} |
|
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column>
|
template: `
<div id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowFiltering='true' height='273px'>
<e-columns>
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' headerText='Employee ID' width=120 :filterBarTemplate='templateOptions'></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
`,
data() {
return {
data: data,
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);
},
}
|
template: `
<div id="app">
<ejs-grid id="Grid" ref="grid" :created=created :dataSource="data" :allowFiltering='true'>
<e-columns>
<e-column field='OrderID' :allowFiltering='false' headerText='Order ID' textAlign='Right' width=100></e-column>
<e-column field='CustomerID' :filterBarTemplate='templateOptions' headerText='Customer ID' width=120></e-column>
<e-column field='ShipCity' headerText='Ship City' width=100></e-column>
</e-columns>
</ejs-grid>
</div>
`,
. . .
},
methods:{
created: function(e) {
this.$refs.grid.ej2Instances.getHeaderTable().querySelector(".e-filterbarcell div").style.display = "none"
},
},
provide: {
grid: [Filter]
} |
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.