grid columnchooser not working

[hai shi tan]

It show the column on toolbar but i get this error
Uncaught TypeError: grid.value.columnChooserModule is undefined

import { ref, onMounted, inject, provide, createApp, h, getCurrentInstance, defineComponent } from 'vue';
import { GridPlugin, GridComponent, ColumnsDirective, ColumnDirective, Page, Sort, Filter, Toolbar, Edit, ExcelExport, PdfExport, ColumnChooser } from '@syncfusion/ej2-vue-grids';
import { ToolbarPlugin } from "@syncfusion/ej2-vue-navigations";
...
    const toolbar = [
    'ColumnChooser',
...
    const toolbarClick = function (args) {
...
    }else if (args.item.properties.id.includes('_columnchooser')) {
        grid.value.columnChooserModule.openColumnChooser();
    }

...
<template>
    <div class="col-lg-12 control-section">
        <GridComponent
            ref="grid"
            :dataSource="data"
            :toolbar="toolbar"
            :showColumnChooser="true"
        >
            <ColumnsDirective>
                <ColumnDirective headerText="S.No" width="90" textAlign="Center"></ColumnDirective>
                <ColumnDirective field="id" headerText="ID" width="120" textAlign="Right" :isReadOnly="true"></ColumnDirective>
                <ColumnDirective field="code" headerText="Code" width="120" :validationRules="codeRules" :isPrimaryKey="true"></ColumnDirective>

[Dineshnarasimman Muthu]

Hi,

Greetings from Syncfusion Support.

We have reviewed your query regarding error thrown upon the implementing the ColumnChooser in the grid. Based on the provided code information it seems that you have implemented toolbarClick event and used openColumnChooser method to open the columnChooser in the grid.

We would like to tell you that when the 'ColumnChooser' is included in the toolbar property and enabling the showColumnChooser itself opens the columnchooser, the external openColumnChooser don't be necessary. We have attached the sample for your reference.

Documentation: https://helpej2.syncfusion.com/vue/documentation/grid/columns/column-chooser

If your requirement is to open the columnChooser using openColumnChooser() method, we suggest you to ensure whether the gridInstance which you used in the toolbarClick event is not undefined.

var grid=document.getElementById('grid').ej2_instances[0];

grid.openColumnChooser()

 

Please get back to us for further assistance.

Regards,

Dineshnarasimman M

Attachment: vuegridcolumnChooser_53f4e13c.zip