Specifying the following configuration settings \n columnChooser: { enabled: true }, \n searchPanel: { visible: true, width: 240, placeholder: \"Filter...\" },<\/code> \nwould display the default features of columnChooser, searchPanel etc. provided in Devextreme datagrid. \nBut if we wanted to change the default icon or other settings for the columnChooser button, we had to apply the code inside the onToolbarPreparing <\/em><\/strong>method in a way like – <\/p>\n
But in higher versions like 21.x series or above, where the toolbar itself is a configuration property simply enabling true will not work for default features like columnChooser, searchPanel.We would need to add ‘columnChooserButton’ in the toolbar items list to display it in the toolbar. \ntoolbar: { \n items: [ \n { \n location: 'after', \n widget: 'dxButton', \n options: { \n icon: 'refresh', \n onClick() { \n $scope.dataGrid.refresh(); \n }, \n }, \n }, \n 'columnChooserButton', \n ], \n },<\/code><\/p>\n
if we want to change icon or other settings, this can be done in more simpler and cleaner way as follows:- \n { \n name: 'columnChooserButton', \n location: 'auto', \n options: { \n icon: \"fal fa-columns\", \n } \n }, \n { \n name: 'searchPanel', \n location: 'auto' \n },<\/code><\/p>\n