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.
Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 146774 | Aug 19,2019 12:49 PM UTC | Sep 9,2019 03:51 AM UTC | Vue | 13 |
|
Tags: Data Grid |
|
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>
|
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.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
