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" width="120"></e-column>
<e-column field="ShipCity" headerText="Ship City" 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", "ShipCity", "Freight"]
}
};
},
provide: {
grid: [Page, Aggregate, Group]
},
methods: {
}
};
window.format = function(value) {
debugger;
var x = value.count;
if (x > 1) {
x = value.count + "items";
} else {
x = value.count + "item";
}
switch (value.field) {
case "ShipCity":
if (value.items.level) {
return value.items.records[0].ShipCountry;
} else {
return value.items[0].ShipCountry;
}
case "Freight":
if (value.items.level) {
return x;
} else {
return x;
}
case "CustomerID":
if (value.items.level) {
return value.items.records[0][value.field];
} else {
return value.items[0][value.field];
}
default:
return value.field + ": " + value.key + " " + x;
}
};
</script>
|
