Auto expand when parent item selected

4 posts, 0 answers
  1. nichole
    nichole avatar
    2 posts
    Member since:
    Dec 2014

    Posted 02 Dec 2014 Link to this post

    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

  2. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 05 Dec 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. nichole
    nichole avatar
    2 posts
    Member since:
    Dec 2014

    Posted 06 Dec 2014 Link to this post

    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
  5. Kostadin
    Admin
    Kostadin avatar
    1709 posts

    Posted 10 Dec 2014 Link to this post

    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.

     
Back to Top