Make Check All look similar to RadComboBox

6 posts, 0 answers
  1. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 14 Feb 2012 Link to this post

    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
  2. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 16 Feb 2012 Link to this post

    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 >>
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 20 Feb 2012 Link to this post

    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
  5. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 23 Feb 2012 Link to this post

    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.
  6. Jon
    Jon avatar
    813 posts
    Member since:
    Oct 2008

    Posted 28 Feb 2012 Link to this post

    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
  7. Kalina
    Admin
    Kalina avatar
    918 posts

    Posted 02 Mar 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017