Column chooser in toolbar and header text in header row not working

Question

Hi,Recently I have tried to use Syncfusion components to build a demo. I encountered an issue that the column chooser dropdown list in the toolbar does not show, while the column chooser in the column menu can work well. I was wondering if you could investigate the demo to see if it is an issue with the components or something else wrong.As for the header text in the header row, I used to try to set a column's header text in dataBound event but it does not reflect in the header row (i.e., it still shows the field). Still, similarly, the column menu can render the correct header text rather than the field.I use the auto-generation feature of columns due to the data structure.P.S.- Procedures to run the sampleYou could navigate to the debug section of VS Code and launch in the predefined mode called "electron: debug" or "electron: dev" on Windows/macOS after installing all dependencies. As an alternative, you could also use the command `npm run electron:serve` under the root directory. Please note that the app is a demo for evaluating the feasibility of developing a Windows/macOS desktop app using Vue 3 and Electron. Hence, the app is not expected to be launched and work well via the browser. Instead, a desktop app should be error-free and launched with the dev mode which means you could invoke the browser developer tools using the keys Ctrl+Shift/option+I.To navigate to the view containing the data grid, type "SZ000021" in the first textbox and select a recent date (one day recommended). After submitting the form, waiting for the search results.Attachment: Kobe_bc0a93e0.zip

Sujith Kumar Rajkumar · Accepted Answer

Hi Arvin, 
 
Greetings from Syncfusion support. 
 
We launched the shared sample but could not get any data to be updated in the Grid by using the “type ‘SZ000021’ in the first textbox and selecting a recent date”. However we were able to identify the problem cause and we have explained them below, 
 
Query – 1: “Recently I have tried to use Syncfusion components to build a demo. I encountered an issue that the column chooser dropdown list in the toolbar does not show, while the column chooser in the column menu can work well.” 
 
This problem is occurring because the ‘ColumnChooser’ module(which is required for enabling the column chooser) is not injected in the provide section. So this can be resolved by injecting this module as demonstrated in the below code snippet, 
 




import { ColumnMenu, Filter, Freeze, Resize, Sort, Toolbar, ColumnChooser } from "@syncfusion/ej2-vue-grids"; 
 
export default { 
    provide: { grid: [ColumnMenu, Filter, Freeze, Resize, Sort, Toolbar, ColumnChooser] }, 
} 
 
More details on the column chooser and the list of available Grid features and the modules that need to be injected for including them can be checked from the below links, 
 
https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-chooser 
https://ej2.syncfusion.com/vue/documentation/grid/module/ 
 
Query – 2: “As for the header text in the header row, I used to try to set a column's header text in dataBound event but it does not reflect in the header row (i.e., it still shows the field).” 
 
From the shared sample we could see that you are directly updating the column properties like, minWidth, type, etc., and suspect that this is where you need to update the columns header text. You can achieve this requirement by calling the Grid’s refreshColumns method after updating the Grid column properties in order for the columns to be refreshed with the updated values. 
 
This is demonstrated in the below code snippet for your reference, 
 




// Grid’s dataBound event handler 
adjustGrid() { 
    for (var searchResultGridColumn of this.$refs[this.searchResultGridName].ej2Instances.columns) { 
        searchResultGridColumn.minWidth = 50; 
        searchResultGridColumn.type = "number"; 
        searchResultGridColumn.headerText = "..."; 
    } // end for 
 
    this.$refs[this.searchResultGridName].refreshColumns(); 
}, // end method adjustGrid 
 
API: https://ej2.syncfusion.com/vue/documentation/api/grid/#refreshcolumns 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R