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.|
App.vue
<template>
<div id="app">
<button v-on:click="Click">Result</button>
<ejs-grid
ref="grid"
:dataSource="data"
:pageSettings="pageOption"
:allowFiltering="true"
:filterSettings="filterOptions"
allowPaging="true"
>
<e-columns>
<e-column field="OrderID" 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 id="head">Fitlered Data
<div id="Grid"></div> // add the selector in template
</div>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Grid, Filter, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
import { DataManager } from "@syncfusion/ej2-data";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
grid: "",
flag: true,
pageOption: {
pageSize: 3
},
filterOptions: {
type: "Menu"
}
};
},
methods: {
Click: function(e) {
if (this.flag) {
Grid.Inject(Page);
// creating a grid model
this.grid = new Grid({
allowPaging: true,
pageSettings: { pageSize: 3 },
columns: [
{
field: "OrderID",
headerText: "Order ID",
textAlign: "Right",
width: 120,
type: "number"
},
{
field: "CustomerID",
width: 140,
headerText: "Customer ID",
type: "string"
},
{
field: "ShipCity",
headerText: "Ship City",
textAlign: "Right",
width: 120
},
{ field: "ShipName", headerText: "Ship Name", width: 140 }
]
});
this.grid.appendTo("#Grid"); //appending to the selector
this.flag = false;
}
let query = this.$refs.grid.ej2Instances.renderModule.data.generateQuery(
true
); // get grid corresponding query by skipping page query
new DataManager({ json: data })
.executeQuery(query)
.then(e => {
this.grid.dataSource = e.result; //apply the filtered data of the previous grid to the dynamically created grid
})
.catch(e => true);
}
},
provide: {
grid: [Filter, Page]
}
};
</script>
<style>
@import "https://cdn.syncfusion.com/ej2/material.css";
</style> |
|
App.vue
export default {
data() {
return {
data: data,
grid: "",
toolbar: ["ColumnChooser"],
flag: true,
pageOption: {
pageSize: 3
},
filterOptions: {
type: "Menu"
}
};
},
methods: {
Click: function(e) {
if (this.flag) {
Grid.Inject(Page);
this.grid = new Grid({
allowPaging: true,
pageSettings: { pageSize: 3 }
});
this.grid.appendTo("#Grid");
this.flag = false;
}
let query = this.$refs.grid.ej2Instances.renderModule.data.generateQuery(
true
); // get grid corresponding query by skipping page query
new DataManager({ json: data })
.executeQuery(query)
.then(e => {
this.grid.dataSource = e.result;
})
.catch(e => true);
//creating grid dynamically with visible columns
this.grid.columns = this.$refs.grid.ej2Instances.getVisibleColumns();
}
},
provide: {
grid: [Filter, ColumnChooser, Toolbar, Page]
}
};
</script>
|
|
<template>
<div id="app">
<button v-on:click="Click">Result</button>
<ejs-grid ref="grid" :dataSource="data" :pageSettings="pageOption" :allowFiltering="true" allowPaging="true" >
<e-columns>
. . .
</e-columns>
</ejs-grid>
<h1>Dynamic Grid Binding</h1>
<GridChild1
msg="Child Grid1(child Vue Component) component rendering on App Component(Parent Vue component)"
/>
</div>
</template>
<script>
. . .
methods: {
Click: function(e) {
let query = this.$refs.grid.ej2Instances.renderModule.data.generateQuery(
true
); // get grid corresponding query by skipping page query
new DataManager({ json: data })
.executeQuery(query)
.then(e => {
this.$eventHub.$emit("data", e.result); // emitted the event from child component
})
.catch(e => true);
}
}
};
</script>
|
|
<template>
<div v-if="flag" id="gridchild1">
<div>{{msg}}</div>
<ejs-grid ref="grid" :created="created" allowPaging="true" :pageSettings="pageOption">
<e-columns>
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
data() {
this.$eventHub.$on("data", this.getTemplateValue);
. . .
},
methods: {
getTemplateValue: function(e) {
this.flag= "true";
this.filterData = e;
if(this.$refs.grid){
this.$refs.grid.ej2Instances.dataSource = this.filterData
}
},
created:function(e){
this.$refs.grid.ej2Instances.dataSource = this.filterData
}
}
};
</script>
|
