In the earlier versions of devextreme, we used the onToolbarPreparing method to add custom buttons or elements in the devextreme toolbar.
Devextreme datagrid Example:
e.toolbarOptions.items.push({
widget: 'dxButton',
showText : 'always',
options: {
icon: 'fa fa-user',
text: 'Export',
onClick: function () {
}
},
location: 'after'
}); ……..
});
Specifying the following configuration settings
columnChooser: { enabled: true },
searchPanel: { visible: true, width: 240, placeholder: "Filter..." },
would display the default features of columnChooser, searchPanel etc. provided in Devextreme datagrid.
But if we wanted to change the default icon or other settings for the columnChooser button, we had to apply the code inside the onToolbarPreparing method in a way like –
e.toolbarOptions.items.find(i => i.name = "columnChooserButton").options.icon = "fa fa-columns"
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.
toolbar: {
items: [
{
location: 'after',
widget: 'dxButton',
options: {
icon: 'refresh',
onClick() {
$scope.dataGrid.refresh();
},
},
},
'columnChooserButton',
],
},
if we want to change icon or other settings, this can be done in more simpler and cleaner way as follows:-
{
name: 'columnChooserButton',
location: 'auto',
options: {
icon: "fal fa-columns",
}
},
{
name: 'searchPanel',
location: 'auto'
},
People having good knowledge of Financial accounting can get an Accounting Certification from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.
