Articles in this section
Category / Section

Customizing the Report Designer Toolbar in Bold Reports

Published:
Updated:

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.

image.png

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
image.png
Cut .e-rptdesigner-toolbar-cut
image.png
Paste .e-rptdesigner-toolbar-paste
image.png
Delete .e-rptdesigner-toolbar-delete
image.png
Undo/Redo .e-rptdesigner-toolbar-undo
.e-rptdesigner-toolbar-undo
image.png
Zoom In/Zoom Out .e-rptdesigner-toolbar-zoomin
.e-rptdesigner-toolbar-zoomout
image.png
Order .e-rptdesigner-toolbar-sendbackward
.e-rptdesigner-toolbar-sendforward
.e-rptdesigner-toolbar-sendtoback
.e-rptdesigner-toolbar-sendtofront
image.png
Center .e-rptdesigner-toolbar-horizontal
.e-rptdesigner-toolbar-vertical
image.png
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
image.png
Distribute .e-rptdesigner-toolbar-spacinghorizontal
.e-rptdesigner-toolbar-spacingvertical
image.png
Sizing .e-rptdesigner-toolbar-SizeToControl
.e-rptdesigner-toolbar-SizeToWidth
.e-rptdesigner-toolbar-SizeToHeight
image.png
AlignGrid .e-rptdesigner-toolbar-aligntogrid
.e-rptdesigner-toolbar-sizetogrid
image.png

You can download a sample application from here.

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied