Customizing the Report Designer Toolbar in Bold Reports

The Report Designer toolbar has a set of icons that enable you to perform common design operations, significantly enhancing your report creation process. These icons are designed to optimize your efficiency and streamline the design workflow, allowing you to create a report with ease. You can customize the designer toolbar to meet your specifications, creating a personalized workspace that caters to your unique needs.

Changing the Toolbar Appearance

To customize the toolbar, use the toolbarSettings property. You can achieve this by modifying the CSS style snippet below, replacing ToolbarItem which the actual toolbar item name.

.e-rptdesigner-toolbar- <<ToolbarItem>>:before{
  // add your customization
} 

The table below shows the list of items in the toolbar and their corresponding Styles CSS Names:

ToolName	Toolbar Style CSS Name	Toolbar Item Image
Copy	.e-rptdesigner-toolbar-copy
Cut	.e-rptdesigner-toolbar-cut
Paste	.e-rptdesigner-toolbar-paste
Delete	.e-rptdesigner-toolbar-delete
Undo/Redo	.e-rptdesigner-toolbar-undo .e-rptdesigner-toolbar-undo
Zoom In/Zoom Out	.e-rptdesigner-toolbar-zoomin .e-rptdesigner-toolbar-zoomout
Order	.e-rptdesigner-toolbar-sendbackward .e-rptdesigner-toolbar-sendforward .e-rptdesigner-toolbar-sendtoback .e-rptdesigner-toolbar-sendtofront
Center	.e-rptdesigner-toolbar-horizontal .e-rptdesigner-toolbar-vertical
Alignment	.e-rptdesigner-toolbar-leftalign .e-rptdesigner-toolbar-center .e-rptdesigner-toolbar-rightalign .e-rptdesigner-toolbar-topalign .e-rptdesigner-toolbar-middle .e-rptdesigner-toolbar-bottomalign
Distribute	.e-rptdesigner-toolbar-spacinghorizontal .e-rptdesigner-toolbar-spacingvertical
Sizing	.e-rptdesigner-toolbar-SizeToControl .e-rptdesigner-toolbar-SizeToWidth .e-rptdesigner-toolbar-SizeToHeight
AlignGrid	.e-rptdesigner-toolbar-aligntogrid .e-rptdesigner-toolbar-sizetogrid

You can download a sample application from here.