Select parent on select of child item in radtreelist

[Kaushal]

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>

[Marin]

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

[Kaushal]

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

[Marin]

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

[Kaushal]

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

[Priya]

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.

[Marin]

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