Hi,
I have a TreeView inside a RadComboBox and it works pretty well. I am now trying to duplicate the Check All functionality that comes with the RadComboBox. I have the functionality working just fine with the exception of the appearance.
I've applied the rcbCheckAllItems CSS style to the Check All node that I have added to the top of the tree, the problem is that only the main text of the node gets the style applied - not the node's row. How would I go about copying that functionality? Or would I need to add a dummy row above the TreeView inside the RadComboBox ItemTemplate?
Regards,
Jon
I have a TreeView inside a RadComboBox and it works pretty well. I am now trying to duplicate the Check All functionality that comes with the RadComboBox. I have the functionality working just fine with the exception of the appearance.
I've applied the rcbCheckAllItems CSS style to the Check All node that I have added to the top of the tree, the problem is that only the main text of the node gets the style applied - not the node's row. How would I go about copying that functionality? Or would I need to add a dummy row above the TreeView inside the RadComboBox ItemTemplate?
Regards,
Jon
5 Answers, 1 is accepted
0
Hi Jon,
As I understand - you want to apply the “rcbCheckAllItems” CSS style to a RadTreeView node.
I am afraid that the RadTreeNode and the RadComboBox CheckAll section are different UI elements, they have different rendering, and use different styles defined in different control skins.
That is why you cannot apply the “rcbCheckAllItems” as is to a RadTreeView node.
However you can use the RadTreeNode templates. You can create your custom CSS style to be applied to the root node to make it look similar to the CheckAll section:
Regards,
Kalina
the Telerik team
As I understand - you want to apply the “rcbCheckAllItems” CSS style to a RadTreeView node.
I am afraid that the RadTreeNode and the RadComboBox CheckAll section are different UI elements, they have different rendering, and use different styles defined in different control skins.
That is why you cannot apply the “rcbCheckAllItems” as is to a RadTreeView node.
However you can use the RadTreeNode templates. You can create your custom CSS style to be applied to the root node to make it look similar to the CheckAll section:
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
CheckBoxes
=
"True"
Height
=
"280px"
CheckChildNodes
=
"true"
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Software"
Expanded
=
"true"
>
<
NodeTemplate
>
<
div
style
=
"yourCustomStyle"
>Node text</
div
>
</
NodeTemplate
>
<
Nodes
>
<
telerik:RadTreeNode
Text
=
"Business & Office"
/>
<
telerik:RadTreeNode
Text
=
"Database"
/>
<
telerik:RadTreeNode
Text
=
"Networking"
/>
<
telerik:RadTreeNode
Text
=
"Presentation"
/>
<
telerik:RadTreeNode
Text
=
"Project Management"
/>
<
telerik:RadTreeNode
Text
=
"Reports"
/>
<
telerik:RadTreeNode
Text
=
"Spreadsheet"
/>
<
telerik:RadTreeNode
Text
=
"Word Processing"
/>
</
Nodes
>
</
telerik:RadTreeNode
>
...
...
...
Regards,
Kalina
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0

Jon
Top achievements
Rank 1
answered on 20 Feb 2012, 11:13 AM
Hi Kalina,
Thanks for that.
The "rcbCheckAllItems" style worked suprisingly well for the tree view - in fact it worked almost perfectly.
The issue that I have when using both the node template method and aslo the "rcbCheckAllItems" style is that the style only affects the node - not the whole row. As I am using checkboxes it ends up looking a bit silly.
With the combo box the Check All top row is just that - the top row. - that is what I'd like to duplicate on the tree view
The attached image shows on the left what I get on the tree view and on the right is the combo box...
Regards,
Jon
Thanks for that.
The "rcbCheckAllItems" style worked suprisingly well for the tree view - in fact it worked almost perfectly.
The issue that I have when using both the node template method and aslo the "rcbCheckAllItems" style is that the style only affects the node - not the whole row. As I am using checkboxes it ends up looking a bit silly.
With the combo box the Check All top row is just that - the top row. - that is what I'd like to duplicate on the tree view
The attached image shows on the left what I get on the tree view and on the right is the combo box...
Regards,
Jon
0
Hello Jon,
Can you provide me the markup that you use?
Thank you in advance.
Regards,
Kalina
the Telerik team
Can you provide me the markup that you use?
Thank you in advance.
Regards,
Kalina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0

Jon
Top achievements
Rank 1
answered on 28 Feb 2012, 03:12 PM
Hi Kalina,
I'm juggling too many things but finally back on this.
I've included the relevant markup below, as you'll see the treeview is inside a combo box - hence me wanting to duplicate the Check All from there...
Regards,
Jon
ASPX:
VB Markup:
I'm juggling too many things but finally back on this.
I've included the relevant markup below, as you'll see the treeview is inside a combo box - hence me wanting to duplicate the Check All from there...
Regards,
Jon
ASPX:
<
telerik:RadComboBox
ID
=
"uxLocationIDs"
runat
=
"server"
ShowToggleImage
=
"True"
OnClientDropDownClosed
=
"uxLocationIDs_OnClientDropDownClosed"
OnClientLoad
=
"uxLocationIDs_OnClientLoad"
ExpandAnimation-Type
=
"None"
CollapseAnimation-Type
=
"None"
EmptyMessage
=
""
AutoPostBack
=
"False"
CssClass
=
"formComboField"
Height
=
"254px"
>
<
ItemTemplate
>
<
div
id
=
"div2"
>
<
telerik:RadTreeView
runat
=
"server"
ID
=
"uxLocationIDs_RadTreeView"
Width
=
"100%"
Height
=
"250px"
Checkboxes
=
"True"
CheckChildNodes
=
"True"
TriStateCheckBoxes
=
"True"
DataSourceID
=
"SqlDataSourceLocations"
DataTextField
=
"Location"
DataValueField
=
"LocationID"
DataFieldID
=
"LocationID"
DataFieldParentID
=
"ParentID"
onnodedatabound
=
"uxParentRadTreeView_NodeDataBound"
OnDataBound
=
"uxParentRadTreeView_OnDataBound"
OnClientNodeChecked
=
"GenericParentTreeViewCheckbox_CheckAll"
>
</
telerik:RadTreeView
>
</
div
>
</
ItemTemplate
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
""
/>
</
Items
>
</
telerik:RadComboBox
>
VB Markup:
Protected
Sub
uxParentRadTreeView_OnDataBound(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Dim
_radTreeView
As
RadTreeView =
DirectCast
(sender, RadTreeView)
Dim
_checkAllNode
As
RadTreeNode =
New
RadTreeNode(
"Check All"
,
"-10"
)
_checkAllNode.CssClass =
"rcbCheckAllItems"
_radTreeView.Nodes.Insert(0, _checkAllNode)
End
Sub
0
Hello Jon,
As I have already mentioned - applying a RadComboBox item CSS style to a RadTreeView node is not officially supported.
You can try adding a NodeTemplate in this way:
Greetings,
Kalina
the Telerik team
As I have already mentioned - applying a RadComboBox item CSS style to a RadTreeView node is not officially supported.
You can try adding a NodeTemplate in this way:
<
telerik:RadComboBox
ID
=
"uxLocationIDs"
runat
=
"server"
ShowToggleImage
=
"True"
ExpandAnimation-Type
=
"None"
CollapseAnimation-Type
=
"None"
EmptyMessage
=
""
AutoPostBack
=
"False"
CssClass
=
"formComboField"
Height
=
"254px"
>
<
ItemTemplate
>
<
div
id
=
"div2"
>
<
telerik:RadTreeView
runat
=
"server"
ID
=
"uxLocationIDs_RadTreeView"
Width
=
"100%"
Height
=
"250px"
CheckBoxes
=
"True"
CheckChildNodes
=
"True"
TriStateCheckBoxes
=
"True"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Check All"
Value
=
"-11"
Expanded
=
"true"
>
<
NodeTemplate
>
<
div
class
=
"rcbCheckAllItems"
style
=
"width: 80px"
>
Check All</
div
>
</
NodeTemplate
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 1"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 1.1"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 2"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 2.1"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 3"
>
<
Nodes
>
<
telerik:RadTreeNode
runat
=
"server"
Text
=
"Node 3.1"
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
</
div
>
</
ItemTemplate
>
<
Items
>
<
telerik:RadComboBoxItem
Text
=
""
/>
</
Items
>
</
telerik:RadComboBox
>
Greetings,
Kalina
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.