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.
|
<template>
<div>
<ejs-grid
ref="grid"
:columns="sourceColumns"
:dataSource="rows"
:allowGrouping="true"
:groupSettings="groupSettings"
:aggregates="aggregates"
/>
</div>
</template>
<script>
import Vue from "vue";
import {
GridPlugin,
Aggregate,
ExcelExport,
Group,
PdfExport,
Resize,
VirtualScroll
} from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
name: "Grid",
data() {
return {
columns: [],
rows: [],
sourceColumns: [
{
field: "name",
headerText: "Name"
},
{
field: "location",
headerText: "Location"
},
{
field: "purchase",
headerText: "Purchase"
}
],
sourceRows: [
{
name: "John Doe",
location: "Paris",
purchase: 3
},
{
name: "John Doe",
location: "Paris",
purchase: 5
},
{
name: "John Doe",
location: "London",
purchase: 7
},
{
name: "Jane Doe",
location: "London",
purchase: 9
}
],
groupBy: ["name"],
aggregates: {
columns: []
}
};
},
computed: {
groupSettings() {
return {
showDropArea: false,
columns: this.groupBy
};
}
},
mounted() {
// it requires no time delay
//here you can change the columns and dataSource
this.columns = this.sourceColumns;
this.rows = this.sourceRows;
this.groupBy = ["location", "name"];
},
provide: {
grid: [Aggregate, ExcelExport, Group, PdfExport, Resize, VirtualScroll]
}
};
</script>
<style>
</style>
|
Hi Bill,
We are glad to announce that our Essential Studio 2023 Volume 1 Release v21-1-35 is rolled out and is available for download under the following link.
In this release we have added the fix for “Dynamically change the column properties”. Find the below release notes for your reference.
Release Notes: https://ej2.syncfusion.com/documentation/release-notes/21.1.35/?type=all#grid
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.
Regards,
Santhosh I
