The control comprises of a single toolstrip with a number of buttons of different types and separators on it. It is very easily populated in just two steps:
- define toolbar structure - the items hierarchy and content
- customize toolbar appearance - the visual appearance of the items defined by the applied skins.
ToolBar structure
The typical toolbar structure consists of RadToolBar parent-object and RadToolBarItem child-items. RadToolBarItem is the instance representing the elements (buttons of different types, separators and/or other third-party components) that are visible by the end users, and allow them to perform actions (click, navigate with keyboard, etc.)
Example
The following example shows a single toolbar with numerous items:
| |
 Copy Code |
|
<rad:radtoolbar runat="server" id="Radtoolbar1" skin="macOS" UseFadeEffect="True">
<items>
<rad:radtoolbarbutton AccessKey="n" Tooltip="New (Alt+N)" CommandName="New" />
<rad:radtoolbarbutton AccessKey="o" Tooltip="Open (Alt+O)" CommandName="Open" />
<rad:radtoolbarbutton AccessKey="s" Tooltip="Save (Alt+S)" CommandName="Save" />
<rad:radtoolbarseparator />
<rad:radtoolbartogglebutton AccessKey="l" Tooltip="Align Left (Alt+L)" ButtonGroup="Alignment" CommandName="alignLeft" />
<rad:radtoolbartogglebutton AccessKey="c" Tooltip="Align Center (Alt+C)" ButtonGroup="Alignment" CommandName="Center" />
<rad:radtoolbartogglebutton AccessKey="r" Tooltip="Align Right (Alt+R)" ButtonGroup="Alignment" CommandName="alignRight" />
<rad:radtoolbartogglebutton AccessKey="j" Tooltip="Justify (Alt+J)" ButtonGroup="Alignment" CommandName="Justify" />
</items>
</rad:radtoolbar> |
You can populate the toolbar in either of the following ways:
- through declarative definition in aspx/ascx file (as shown in the example above)
- programmatically - this is the way when you use the codebehind for defining the toolbar structure
- through XML - you can have static XML file
- through data binding - to (IEnumerable, IListSource)
ToolBar Appearance
You can easily customize the appearance of your Telerik RadToolBar instance by using skins. A skin for Telerik RadToolBar contains a custom CSS file and a set of images placed in one folder. The name of the folder defines the name of the skin. Each skin folder must reside in "~/RadControls/ToolBar/Skins". The skin allows customization of the appearance of:
- the toolstrip
- the buttons
- the separators
You can use one of the predefined skins or create your own skin.