|
[App.Vue]
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='data' height='400px' :toolbar='toolbarTemplate' :toolbarClick="clickHandler"
:allowGrouping="true" :groupSettings="groupOptions">
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=120></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=150></e-column>
<e-column field='ShipCity' headerText='Ship City' width=150></e-column>
<e-column field='ShipName' headerText='Ship Name' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
export default {
data() {
return {
data: orderDetails.slice(0),
groupOptions: { columns: ["CustomerID", "ShipCity"] },
toolbarTemplate: [
{
template: function() {
return {
// Custom toolbar template defined here
template: Vue.component("custom-toolbar", {
template: `<ejs-toolbar >
<e-items>
<e-item id='collapse' text='Collapse All' prefixIcon='e-collapse'>thin</e-item>
</e-items>
</ejs-toolbar>`,
data: function() {
return {};
}
})
};
}
}
]
};
},
methods:{
clickHandler(args) {
let target = args.originalEvent.target.closest("button"); //find clicked button
if (target.id === "collapse") {
//collapse all expanded grouped row
this.$refs.grid.ej2Instances.groupModule.collapseAll();
}
}
},
provide: {
grid: [Toolbar, Group]
}
}
| 
