Auto expand when parent item selected

[nichole]

Hi, can someone teach me how to auto expand the child item when the parent item was selected by giving sample code?

In ItemCommand, the command name is  "ItemClick".

Here is my JavaScript:

<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>

UI design:

01.<telerik:RadTreeList ID="RadTreeList1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" ParentDataKeyNames="ParentId" CellSpacing="0" GridLines="None" OnNeedDataSource="RadTreeList1_NeedDataSource" HideExpandCollapseButtonIfNoChildren="true" AllowMultiItemSelection="true" OnPreRender="RadTreeList1_PreRender" OnItemCommand="RadTreeList1_ItemCommand" OnItemDataBound="RadTreeList1_ItemDataBound">
02.<Columns>
03.<telerik:TreeListBoundColumn DataField="id" HeaderText="access_id" UniqueName="access_id" DataType="System.decimal" ReadOnly="True" SortExpression="access_id" Display="false"></telerik:TreeListBoundColumn>
04.<telerik:TreeListBoundColumn DataField="access_code" HeaderText="Access Right" UniqueName="role_access_access_id" ReadOnly="True" SortExpression="access_code"></telerik:TreeListBoundColumn>
05.<telerik:TreeListBoundColumn DataField="ParentId" HeaderText="Parent ID" UniqueName="ParentId" ReadOnly="True" SortExpression="ParentId" Display="false"></telerik:TreeListBoundColumn>
06.<telerik:TreeListSelectColumn UniqueName="SelectColumn" HeaderText="Select Menu" ></telerik:TreeListSelectColumn>
07.</Columns>
08. <ClientSettings AllowPostBackOnItemClick="true">
09.<ClientEvents OnItemDeselected="OnClientNodeClicked" OnItemSelected="OnClientNodeClicked"  />
10.<Selecting AllowItemSelection="true" />
11.</ClientSettings>
12.</telerik:RadTreeList>

and the code:

1.Protected Sub RadTreeList1_NeedDataSource(sender As Object, e As TreeListNeedDataSourceEventArgs)

2.        Try

3.            Dim gvAccess = DirectCast(sender, RadTreeList)

4.            gvAccess.DataSource = GetAccessMenuView().ToList

5.        Catch ex As Exception

6.            InformationBox.DisplayError(ex)

7.        End Try

8.End Sub


i had try this,  but not work.

1.Protected Sub RadTreeList1_PreRender(sender As Object, e As EventArgs)
2.        Dim RadTreeList1 = DirectCast(sender, RadTreeList)
3.        If parentIndex IsNot Nothing Then
4.            Dim parent As TreeListDataItem = RadTreeList1.Items(CInt(parentIndex))
5.            RadTreeList1.ExpandItemToLevel(parent, parent.HierarchyIndex.NestedLevel + 1)
6.        End If
7.End Sub

[Kostadin]

Hello Nichole,

A possible solution is to fire ExpandCollapse command when you select an item. For this purpose you have to hook OnItemSelected client event and call fireCommand method. Please check out the following code snippet.

function OnItemSelected(sender, args) {
    args.get_item().fireCommand("ExpandCollapse", "")
}

Regards,
Kostadin
Telerik

 

 

[nichole]

i have event for my OnItemSelected

so, i add args.get_item().fireCommand("ExpandCollapse", "") into my previous javascript as below. But it not working. Am i add at wrong place?

01.function OnClientNodeClicked(sender, args) {
02.           args.get_item().fireCommand("ExpandCollapse", "")
03.           var currNode = args.get_item();
04.           var childNodes = currNode.get_childItems();
05.           var nodeCount = currNode.get_childItems().length;
06.           var parentItem = currNode.get_parentItem();
07.
08.           if (parentItem) {
09.
10.               parenItemSelected = true;
11.               parentItem.set_selected(true);
12.           }
13.
14.           if (currNode.get_selected()) {
15.               CheckAllChildren(childNodes, nodeCount);
16.           }
17.           else {
18.               UnCheckAllChildren(currNode, childNodes, nodeCount);
19.           }
20.           parenItemSelected = false;
21.       }

Thanks and Regard,

Nichole

[Kostadin]

Hi Nichole,

I noticed that this OnClientNodeClicked function is fired for both OnItemDeselected and OnItemSelected. Could you please fire a different function for both events and let me know whether the issue remains. Also could you please verify that OnItemCommand server side event is fired after fireCommand is called?

Regards,
Kostadin
Telerik