Telerik UI for ASP.NET AJAX

This tutorial will walk you through creating a RadToolBar and shows how to:

  • Use the RadToolBar Item Editor to build a simple toolbar.

  • Use different types of toolbar buttons.

  • Apply a skin to the toolbar to change its look & feel.

  1. Drag a RadToolBar component from the toolbox onto your Web page. The RadToolBar Smart Tag should appear automatically:

     

    toolbar smarttag

  2. On the Smart Tag, choose Edit Items. The RadToolBar Item Editor appears:

     

    toolbar itembuilderempty

  3. Click the Add RadToolBarButton button (

    ToolBar Add Button
    ) to add a button to your toolbar.

  4. In the properties pane on the right of the item editor, set the following properties for the button you added:

    • Set the Text property to "A".

    • Set the CheckOnClick property to True. This makes the button have two states, "on" (checked) and "off" (unchecked).

    • Set the Checked property to True. This sets this button's state to "on".

    • Set the Group property to "Group1". This makes the button part of a group that act like radio buttons.

  5. Click the Add RadToolBarButton button two more times to add two more buttons to the toolbar. Set their properties as follows:

    • Set the Text property to ""B" and "C", respectively.

    • Set the CheckOnClick property to True.

    • Set the Group property to "Group1".

    The item editor should now look like the following:

     

    toolbar itembuilder 3buttons

  6. Click the Add RadToolBarDropDown button (

    ToolBar Add Drop Down Button
    ) to add a drop-down button to the toolbar. With the drop-down button selected, use the properties pane to change its Text property to "Details".

  7. With the "Details" button selected, click the Add RadToolBarButton to drop-down button (

    ToolBar Add Child Button
    ) to add a button to the drop-down list of the "Details" button. Select the button you added to the list and set its Text property to "One".

  8. Select the "Details" button again and click the Add RadToolBarButton to drop-down button two more times to add two more buttons to the drop-down list.

    • On the first of these (the second button in the drop-down list), set the IsSeparator property to True and the Text property to an empty string.

    The item builder should now look like the following:

     

    toolbar itembuildergroup&dropdown

  9. Click the Add RadToolBarSplitButton button (

    ToolBar Add Split Button
    ) to add a split button to the toolbar.

    • Set its Text property to "Add Item".

    • Set its EnableDefaultButton property to False.

  10. With the "Add Item" button selected, click the Add RadToolBarButton to drop-down button two times to add two child buttons to the drop-down list of the split button.

    • On the first, set the Text property to "Red" and the ForeColor property to "Red".

    • On the second, set the Text property to "Blue" and the ForeColor property to "Blue".

    The item builder should look like the following:

     

    toolbar itembuildergroupdropdownandsplit

  11. Click Ok to exit.

  12. In the RadToolBar Smart Tag, use the Skin drop-down to change the skin for the RadToolBar to "Hay":

     

    toolbar chooseskin

  13. Still in the Smart Tag, click the Edit Templates link to apply a template to one of the toolbar buttons:

     

    toolbar edittemplates

  14. The Smart Tag changes to template editing mode. From the Display drop-down, select "Child Button 3" to attach a template to "Child Button 3":

     

    ToolBar Template

  15. Drag a RadDatePicker from the toolbox onto the Template Design Surface and set its Skin property to "Inox":

     

    ToolBar Date Picker Template

  16. Choose End Template Editing from the RadToolBar Smart Tag:

     

    ToolBar End Template Editing

  17. Run the application. Click on the first three buttons on the toolbar ("A", "B", and "C") and note how they function as a radio group. Click on the "Details" button to expand its drop-down list. Note the separator you added, and the date picker, which you can click to select a date:

     

    ToolBar

  18. Click the "Add Item" button, and note that its appearance changes to respond to the click, but the drop-down does not appear unless you click the drop-down arrow:

     

    ToolBar

See Also