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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
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>
|
