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

Auto expand when parent item selected

3 Answers 74 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
nichole
Top achievements
Rank 1
nichole asked on 03 Dec 2014, 03:16 AM
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

3 Answers, 1 is accepted

Sort by
0
Kostadin
Telerik team
answered on 05 Dec 2014, 02:35 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
nichole
Top achievements
Rank 1
answered on 06 Dec 2014, 07:06 AM
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
0
Kostadin
Telerik team
answered on 10 Dec 2014, 01:13 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
TreeList
Asked by
nichole
Top achievements
Rank 1
Answers by
Kostadin
Telerik team
nichole
Top achievements
Rank 1
Share this question
or