P. 1
RadControls for ASP.NET Ajax

RadControls for ASP.NET Ajax


|Views: 25,634|Likes:
Published by CAP History Library

More info:

Published by: CAP History Library on Jan 07, 2009
Copyright:Attribution Non-commercial Share Alike


Read on Scribd mobile: iPhone, iPad and Android.
download as PDF, TXT or read online from Scribd
See more
See less





RadControls for ASP.NET AJAX


RadControls for ASP.NET AJAX

At the top of the Smart Tag, the Choose Data Source drop-down to bind the tree view and the Build
link to bring up the Item Builder should be familiar by now. So should the standard Ajax
, Skin Selection, and Learning Center items. Because you can define item templates for the tree
view, there is also an Edit Templates link to bring up the Template Design Surface.
If you bind the tree view to a data source, the Smart Tag changes to its bound version:

The bound Smart Tag lets you change the data source, reconfigure the current data source, or refresh the
schema. In addition, there is a link to bring up the NavigationItemBinding Collection Editor. This collection
should be familiar to you from the Data Binding chapter.
The bound Smart Tag still contains the Edit Templates item to bring up the Template Design Surface.

Properties Window

At design time, you can use the Properties Window to configure almost every aspect of the tree view, with the
exception of templates. As before, let us look at the most important properties.

Specifying Items

Probably the most important property of the tree view is the one that specifies what items appear and their
hierarchical relationships. What properties you choose for this task depends on whether you want to load items
from a data source:

RadControls for ASP.NET AJAX


RadControls for ASP.NET AJAX

If you want to load items from a data source, you can use the the standard data-binding properties
(DataSourceID and DataMember), or use the DataSource property and DataBind method in the code-
behind. When binding RadTreeView to a data source, you can use the DataTextField,
DataTextFormatString, DataValueField, and DataNavigationUrlField properties to map fields from the
data source to properties of the nodes, or use the DataBindings property to map even more node

If you want to establish a hierarchical relationship between nodes, use the DataFieldID and
DataFieldParentID properties. When setting up a hierarchy in this way, you can use the
MaxDataBindDepth property to limit the depth of the hierarchy.

When using an inherently hierarchical data source such as an XmlDataSource or SiteMapDataSource,
there is no need to use the DataFieldID and DataFieldParentID properties. The hierarchy is
automatically honored by the tree view.

If you want to use statically declared items, you can use the Nodes property to bring up the RadTreeView
Item Builder
, or you can switch to the Source view and define the structure directly in the mark-up.

If you want to use both data-bound and statically-declared items, set the AppendDataBoundItems
property to true.

Other tree view properties

In addition to the Skin property, you can affect the look-and-feel of the tree view by setting the
ShowLineImages property to control whether the tree view displays lines connecting its nodes, and setting the
ExpandAnimation and CollapseAnimation properties to specify animated effects when the nodes are expanded
or collapsed.
Basic behavior is controlled by the MultipleSelect property, which specifies whether the user can select more
than one node at a time, and the SingleExpandPath, which allows only one node at any level to be expanded
at a time.
In addition, a few properties can be used to enable or disable RadTreeView features.

The AllowNodeEditing property makes nodes editable. When AllowNodeEditing is true, users can edit the
text of nodes by clicking on a node a second time once it is selected (the same way you can edit the item
text in RadControl Item Builder dialogs).

The CheckBoxes property adds check boxes to the nodes. The check boxes feature is described in more
detail later in this chapter.

The EnableDragAndDrop property allows the user to drag nodes and drop them on other nodes, or on other
elements of the Web page. The drag-and-drop feature is also described in more detail later.

The ContextMenus property lets you bring up the RadTreeViewContextMenus Collection Editor, where you
can define the context menus that are used by items.

RadTreeVeiw Item Builder

RadTreeView lets you edit the list of statically defined nodes using the RadTreeView Item Builder. This item
builder is very similar to the hierarchical Property Builder dialogs you looked at in the chapter on Navigation
controls. Display the item builder either from the Smart Tag or by clicking the ellipsis button on the Nodes
property in the Properties Window.
Below is a screen shot of the RadTreeView Item Builder. Use the buttons on the upper left to build or edit the
node hierarchy. You can select any of the nodes and set its properties using the properties pane on the right of
the dialog. Typically, you will set the Text property first.

RadControls for ASP.NET AJAX


RadControls for ASP.NET AJAX

Each node has its own set of properties: Text is the string that represents the node, ToolTip is the tool tip for
the node, and Value is a value associated with the node. You can add images to a node by setting the
ImageUrl, DisabledImageUrl, ExpandedImageUrl, HoveredImageUrl and SelectedImageUrl properties. If any
of the other image properties is not set, the node uses the ImageUrl property as the image default. You may
also want to use the Selected, Enabled, and Expanded properties to specify the state of the item when the
Web page first loads. The NavigateUrl and Target properties let you use the node to navigate to another Web
A few properties determine whether the node participates in specific features that are enabled at the tree
view level:

The AllowEdit property controls whether the node can be edited when the tree view's AllowNodeEditing
property is true.

The Checkable property controls whether the node gets a check box when the tree view's CheckBoxes
property is true. The Checked property specifies whether the check box is checked when the page first

The AllowDrag and AllowDrop properties specify how the node participates in the drag-and-drop feature
when the tree view's EnableDragAndDrop property is true.

The EnableContextMenu property specifies whether the node displays a context menu when the user right
clicks and the ContextMenus property collection defines a set of context menus. ContextMenuID specifies
which context menu to use.

Collection Editors

RadControls for ASP.NET AJAX


RadControls for ASP.NET AJAX

RadTreeView uses two associated collection editors, the NavigationItemBinding Collection Editor, which is
used to edit the DataBindings property collection, and the RadTreeViewContextMenu Collection Editor,
which is used to edit the ContextMenus property collection.
You have already seen how the NavigationItemBinding Collection Editor works in the Data Binding chapter. Let
us look briefly at the RadTreeViewContextMenu Collection Editor.

When using the RadTreeViewContextMenu Collection Editor,  the order of items does not matter, because each
node is associated with a context menu by its ContextMenuID property. To make this work, you must take note
of the ID property of each context menu in the collection, as this is the string that should be assigned to the
ContextMenuID property. Another important property is the Items property, which can be used to bring up the
RadContextMenu Item Builder, where you can define the items in the context menu. You may also wish to set
the Skin property for the menu, as this is not inherited from the tree view.

Template Design surface

You can use the tree view's Smart Tag or context menu to bring up the Template Design surface, where you can
create item templates. RadTreeView supports two types of template: a global RadTreeNode template that
affects all nodes in the tree view, and individual item templates, which are associated with specific nodes in
the Nodes collection. A drop-down control on the RadTreeView Smart Tag (when it is in template editing mode)
lets you specify which template you want to edit:

RadControls for ASP.NET AJAX


RadControls for ASP.NET AJAX

When a tree view includes both a RadTreeNode template and individual item templates, the item templates
have priority over the RadTreeNode template. That is, the RadTreeNode template is used for every node that
does not have its own item template.

Check boxes

When the CheckBoxes property of RadTreeView is true, the tree view adds check boxes to any nodes that have
the Checkable property set to true (the default). For any node with Checkable set to true, the Checked
property indicates its state.
In the code-behind, you can check all of the checkable nodes in a tree view by calling its CheckAllNodes
method. Similarly, you can set all nodes to the unchecked state by calling the ClearCheckedNodes method.
You can quickly find all of the checked nodes in a tree view by reading the CheckedNodes property.

By default, all check boxes behave independently. However, in some applications, you may want to implement
a cascading effect. That is, when a parent node is checked, all of its children are automatically checked as
well, and when a parent node is unchecked, all of its children inherit that state. Achieving this effect is simple:
just set the CheckChildNodes property to true.
You can convert the check boxes in the tree view from ordinary two-state check boxes to tri-state check boxes
by setting the TriStateCheckBoxes property to true. Tri-state check boxes have three states: "Checked",
"Unchecked", and "Indeterminate". The state of a tri-state check box is intended to reflect the state of the
check boxes on child nodes. When all the child nodes of a tri-state check box are checked, the tri-state check
box is checked. When they are all unchecked, the tri-state check box is unchecked. When the child nodes are a
mix of checked and unchecked nodes, the tri-state check box is in an indeterminate state. Changing the
checked state of a child node automatically changes the state of all parent tri-state check boxes.

The following walk-through explores some of the features of RadTreeView check boxes. It creates a Web page
with two tree views on it, one with ordinary check boxes, and one with tri-state check boxes. Both have the

You're Reading a Free Preview

/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->