This is a migrated thread and some comments may be shown as answers.

Make Check All look similar to RadComboBox

5 Answers 88 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 14 Feb 2012, 12:48 PM
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

5 Answers, 1 is accepted

Sort by
0
Kalina
Telerik team
answered on 16 Feb 2012, 04:01 PM
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
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
0
Kalina
Telerik team
answered on 23 Feb 2012, 11:31 AM
Hello Jon,

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:

<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
Kalina
Telerik team
answered on 02 Mar 2012, 02:40 PM
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
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.
Tags
TreeView
Asked by
Jon
Top achievements
Rank 1
Answers by
Kalina
Telerik team
Jon
Top achievements
Rank 1
Share this question
or