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.
|
App.vue
:dataSource="data"
:toolbar="toolbar"
:toolbarClick="toolbarClick"
:showColumnChooser="true"
export default {
data() {
return {
data: data,
toolbar: ["Open column"],
methods: {
toolbarClick: function(args) {
if (args.item.text === "Open column") {
this.$refs.grid.ej2Instances.columnChooserModule.openColumnChooser();
}
|
|
App.vue
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" :toolbar="toolbar" :toolbarClick="toolbarClick" :showColumnChooser="true" allowPaging="true" >
<e-columns>
…
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
…
export default {
data() {
return {
data: data,
toolbar: ["Open column"]
};
},
methods: {
toolbarClick: function(args) {
if (args.item.text === "Open column") {
var left = args.originalEvent.target.offsetLeft + args.originalEvent.target.offsetWidth;
var height = args.originalEvent.target.offsetTop + args.originalEvent.target.offsetHeight;
this.$refs.grid.ej2Instances.columnChooserModule.openColumnChooser( left ,height);
}
}
},
provide: {
grid: [Edit, Toolbar, Page, ColumnChooser]
}
};
</script>
|
