Make Check All look similar to RadComboBox

[Jon]

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

[Kalina]

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:

<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 &amp; 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

[Jon]

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

[Kalina]

Hello Jon,

Can you provide me the markup that you use?
Thank you in advance.

Regards,
Kalina
the Telerik team

[Jon]

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:

<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

[Kalina]

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:

<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