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 id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :allowGrouping="true"
:groupSettings="groupSettings" >
<e-columns>
<e-column field="OrderID" headerText="Order ID" width="90"></e-column>
<e-column field="CustomerID" headerText="Customer ID" :valueAccessor="valueAccess1"
width="120" ></e-column>
<e-column field="ShipCity" headerText="Ship City" :valueAccessor="valueAccess2" width="120"></e-column>
<e-column field="Freight" headerText="Freight" format="C2" width="90"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Aggregate, Group, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data.slice(0, 7),
groupSettings: {
captionTemplate: "<div> ${format(data)} </div> ",
columns: ["CustomerID"]
}
};
},
provide: {
grid: [Page, Aggregate, Group]
},
methods: {
valueAccess1: function(field, data, column) {
return data[field] + "-" + data["ShipCity"];
},
valueAccess2: function(field, data, column) {
return data[field] + "-" + data["ShipCountry"];
}
}
};
window.format = function(value) {
// here you can customize your group caption value
var x = value.count;
if (x > 1) {
x = value.count + "items";
} else {
x = value.count + "item";
}
switch (value.field) {
case "ShipCity":
// return the value depends on the grouped column level
if (value.items.level) {
return (
value.field +
": " +
value.items.records[0][value.field] +
" " +
value.items.records[0].ShipCountry +
" " +
x
);
} else {
return (
value.field +
": " +
value.items[0][value.field] +
" " +
value.items[0].ShipCountry +
" " +
x
);
}
. . .
default:
return value.field + ": " + value.key + " " + x;
}
};
</script> |
|
<template>
<div id="app">
<ejs-grid id="Grid" ref="grid" :dataSource="data" :allowPaging="true" :allowGrouping="true" :groupSettings="groupSettings">
------
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Aggregate, Group, Page } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data.slice(0, 7),
groupSettings: {
captionTemplate: function() { // created another vue component for the captionTemplate
return {
template: Vue.component("columnTemplate", {
template: `<div>{{captionValue}}</div>`,
data: function() {
return {
data: {}
};
},
computed: {
captionValue: function(value) {
var x = value.data.count;
----------------
x = value.data.count + "item";
}
switch (value.data.field) {
case "ShipCity":
if (value.data.items.level) {
return (
-------------
" " +
value.data.items.records[0].ShipCountry +
" " +
x
);
} else {
return (
value.data.field +
": " +
value.data.items[0][value.data.field] +
" " +
value.data.items[0].ShipCountry +
" " +
x
);
}
case "CustomerID":
if (value.data.items.level) {
return (
value.data.field +
": " +
-----------------------
" " +
x
);
} else {
return (
value.data.field +
": " +
-----------------
);
}
default:
return value.data.field + ": " + value.data.key + " " + x;
}
}
}
})
};
},
columns: ["CustomerID"]
}
};
},
provide: {
grid: [Page, Aggregate, Group]
},
methods: {
valueAccess1: function(field, data, column) {
return data[field] + "-" + data["ShipCity"];
},
valueAccess2: function(field, data, column) {
return data[field] + "-" + data["ShipCountry"];
}
}
};
</script>
|
