Select parent on select of child item in radtreelist

7 posts, 1 answers
  1. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 11 Jan 2012 Link to this post

    Hello,

    I have implemented RadTreeList client side selection functionality, which does as follows: 

    1. When i select Parent, it select all child.
    2. When I deselect Parent, it deselect all child.
    3. When I deselect child, No effect occurs. All selection remains as it is except current selection.
    4. When I select the child, It should select parent item of that child not all child.

    Now I using this script I can get first 3 rules but cannot get 4th one.

    Here I have created Script as bellow:

    Script:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function OnClientNodeClicked(sender, args) {
                var currNode = args.get_item();
                var childNodes = currNode.get_childItems();
                var nodeCount = currNode.get_childItems().length;
                if (nodeCount > 0) {
                    var isChecked = currNode.get_selected();
                    UpdateAllChildren(currNode, childNodes, nodeCount, isChecked);
                }
            }
     
            function UpdateAllChildren(currNode, nodes, nodecount, checked) {
                var i;
                for (i = 0; i < nodecount; i++) {
                    if (checked) {
                        nodes[i].set_selected(true);
                    }
                    else {
                        nodes[i].set_selected(false);
                    }
                }
            }
        </script>
    </telerik:RadCodeBlock>


    RadTreeList HTML:

    <telerik:RadTreeList ID="rtlBusinessUnit" runat="server" DataKeyNames="Business_Unit_ID"
                        ClientSettings-AllowPostBackOnItemClick="false" OnNeedDataSource="rtlBusinessUnit_OnNeedDataSource"
                        ParentDataKeyNames="ParentBUID" OnItemCreated="rtlBusinessUnit_OnItemCreated"
                        OnItemDataBound="rtlBusinessUnit_OnItemDataBound" AutoGenerateColumns="false"
                        AllowMultiItemSelection="true">
                        <Columns>
                            <telerik:TreeListSelectColumn HeaderStyle-Width="38px" UniqueName="BussinessUnitCheckboxes">
                            </telerik:TreeListSelectColumn>
                            <telerik:TreeListBoundColumn DataField="Business_Unit_ID" HeaderText="Business_Unit_ID"
                                Visible="false" UniqueName="Business_Unit_ID" />
                            <telerik:TreeListBoundColumn DataField="LegalName" HeaderText="Name" UniqueName="LegalName" />
                            <telerik:TreeListBoundColumn DataField="Business_Unit_ID" HeaderText="Business_Unit_ID"
                                Visible="false" UniqueName="Business_Unit_ID" HeaderStyle-Width="80px" />
                        </Columns>
                        <ClientSettings>
                            <ClientEvents OnItemSelected="OnClientNodeClicked" OnItemDeselected="OnClientNodeClicked" />
                            <Selecting AllowItemSelection="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="300" />
                        </ClientSettings>
                    </telerik:RadTreeList>

  2. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 11 Jan 2012 Link to this post

    Hi Kaushal,

     You can handle the client-side ItemSelected event and then use the TreeList client-side API to check whether an item has a parent and select it if needed.

    function itemSelected(sender, args)
                    {
                        var parentItem = args.get_item().get_parentItem();
                        if (parentItem)
                        {
                            parentItem.set_selected(true);
                        }
                    }

    Kind regards,
    Marin
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 11 Jan 2012 Link to this post

    Hi Marin,

    Thanks for your quick reply. As you assisted, I have did the same thing but its not working any how. As on item selected i am already calling that function and when I am trying to select parent of that current selected child than it selects all child of that parent again. So here my 4th rule is not working.

    4th Rule : When I select the child, It should select parent item of that child not all child.

    Thanks & Regards,

    Kaushal Jani
  5. Answer
    Marin
    Admin
    Marin avatar
    1043 posts

    Posted 11 Jan 2012 Link to this post

    Hi Kaushal,

     In this case you may need to use an additional boolean variable to determine when to execute the logic for selecting the child items. Something like that:

    var parenItemSelected = false;
                    function itemSelected(sender, args)
                    {
                        var parentItem = args.get_item().get_parentItem();
                        if (parentItem)
                        {
                            parenItemSelected  = true;
                            parentItem.set_selected(true);
                        }
                        if (!parenItemSelected)
                        {
                            //select child items
                        }
                    }

    Note that you may need to adjust this code in the case when an item has both a parent and child items.

    Regards,
    Marin
    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. Kaushal
    Kaushal avatar
    47 posts
    Member since:
    Sep 2010

    Posted 11 Jan 2012 Link to this post

    Hi Marin,

    Thank you so much. It works.

    To Complete this functionality with all above four rules, please follow code as below:

    JavaScript:

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var parenItemSelected = false;
            function OnClientNodeClicked(sender, args) {
                var currNode = args.get_item();
                var childNodes = currNode.get_childItems();
                var nodeCount = currNode.get_childItems().length;
                var parentItem = currNode.get_parentItem();
                if (parentItem) {
                    parenItemSelected = true;
                    parentItem.set_selected(true);
                }
                if (currNode.get_selected()) {
                    CheckAllChildren(childNodes, nodeCount);
                }
                else {
                    UnCheckAllChildren(currNode,childNodes, nodeCount);
                }
                parenItemSelected = false;
            }
     
            function UnCheckAllChildren(currNode,nodes, nodecount) {
                var i;
                for (i = 0; i < nodecount; i++) {
                    nodes[i].set_selected(false);
                }
                currNode.set_selected(false);
            }
     
            function CheckAllChildren(nodes, nodecount) {
                var i;
                if (!parenItemSelected) {
                    for (i = 0; i < nodecount; i++) {
                        nodes[i].set_selected(true);
                    }
                }
            }
        </script>
    </telerik:RadCodeBlock>

    HTML CONTROL:

    <telerik:RadTreeList ID="rtlBusinessUnit" runat="server" DataKeyNames="Business_Unit_ID"
                        ClientSettings-AllowPostBackOnItemClick="false" OnNeedDataSource="rtlBusinessUnit_OnNeedDataSource"
                        ParentDataKeyNames="ParentBUID" OnItemCreated="rtlBusinessUnit_OnItemCreated"
                        OnItemDataBound="rtlBusinessUnit_OnItemDataBound" AutoGenerateColumns="false"
                        AllowMultiItemSelection="true">
                        <Columns>
                            <telerik:TreeListSelectColumn HeaderStyle-Width="38px" UniqueName="BussinessUnitCheckboxes">
                            </telerik:TreeListSelectColumn>
                            <telerik:TreeListBoundColumn DataField="Business_Unit_ID" HeaderText="Business_Unit_ID"
                                Visible="false" UniqueName="Business_Unit_ID" />
                            <telerik:TreeListBoundColumn DataField="LegalName" HeaderText="Name" UniqueName="LegalName" />
                            <telerik:TreeListBoundColumn DataField="Business_Unit_ID" HeaderText="Business_Unit_ID"
                                Visible="false" UniqueName="Business_Unit_ID" HeaderStyle-Width="80px" />
                        </Columns>
                        <ClientSettings>
                            <ClientEvents OnItemSelected="OnClientNodeClicked" OnItemDeselected="OnClientNodeClicked" />
                            <Selecting AllowItemSelection="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="300" />
                        </ClientSettings>
                    </telerik:RadTreeList>

     Thanks again for your co-operation Marin.

    Regards,

    Kaushal Jani
  7. Priya
    Priya avatar
    10 posts
    Member since:
    Dec 2012

    Posted 25 Dec 2012 Link to this post

    Hi Kaushal,
    Thanks for your code, it works when the nodes are already expanded i.e. parent and child all are visible, but it does not work when the view is collapsed (at initial load). evn if I select the parent and expand the node the children are not selected and this is because children are not created at initial load and they are created when we expand the node for the first time. 
    Please let me know if you have any solution for this. Thanks in advance.
  8. Marin
    Admin
    Marin avatar
    1043 posts

    Posted 02 Jan 2013 Link to this post

    Hi Priya,

     You are right - the child items are not created if the parent is not expanded yet so you cannot use the approach to select them on the client in this case. Since expand / collapse operation requires postback it might be more appropriate to select the child items on the server where you can access the current items that is expanding in the ItemCommand event and select its child items in the Page_PreRender event.

    Regards,
    Marin
    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