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.
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.