Hide Node Expansion + symbol

15 posts, 0 answers
  1. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 21 May 2013 Link to this post

    How do I hide the Node Expansion symbol if there are no nodes underneath?
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 24 May 2013 Link to this post

    Hi Thanh,

     
    Unfortunately this is a limitation of RadOrgChart and there is not work around for it.

    Hope this will explain the issue.

    Regards,
    Plamen
    Telerik
    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. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 24 May 2013 Link to this post

    Can we hide the expansion symbol and have our own image that will call or trigger the same event as clicking on the node expansion symbol? 

    If so, can you send me an example call to trigger the node expansion event (passing in the node id (employeeID?)) ?

    In our sql query, we have a column that has the number of direct reports.  If the number of direct reports > 1 then we will show an expansion symbol that the user can click on.
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 29 May 2013 Link to this post

    Hi,

     
    I think I didn't explain properly -please excuse me for that. In scenarios like the one on this on-line demo the expansion arrow is hidden by default when there are no child nodes but in scenario with WCF load on demand this behavior can not be achieved because there is no way to know if the loaded node has children or not. Please excuse us for this limitation of the control. 

    Hope this will explain the issue.


    Regards,
    Plamen
    Telerik
    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. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 29 May 2013 Link to this post

    Okay, let me explain this again.

    Question 1:  Can we HIDE the default expansion button?
    Question 2:  I would like to add my own link in the node that calls the same function to epxand the node. 

    Once again, in my query, I HAVE the child node count.  So if i add my own hyperlink that says "Click to Expand", Can you give me an example of the call to expand that node?

    There must be some sort of onclick attribute for class="rocExpandGroupArrow".
  7. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 03 Jun 2013 Link to this post

    Hello,

     
    1.You can hide the expand/collapse button with the following css:

    <style type="text/css">
            .rocExpandArrow, .rocCollapseArrow {
             visibility:hidden;
            }
     
        </style>
    2. You can trigger the click event with jQuery as for example in the code:
    <script type="text/javascript">
               function OnClientClicked(sender, args) {
                   var $ = $telerik.$;
                   $(sender.get_element().parentElement.parentElement).find(".rocExpandArrow, .rocCollapseArrow").click();
               }
           </script>
       <div>
            <telerik:RadOrgChart runat="server" ID="RadOrgChart2" >
                <ItemTemplate>
                    <telerik:RadButton runat="server" OnClientClicked="OnClientClicked" AutoPostBack="false">
                    </telerik:RadButton>
                </ItemTemplate>
           </telerik:RadOrgChart>

    Hope this will be helpful.

    Regards,
    Plamen
    Telerik
    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.
  8. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 04 Jun 2013 Link to this post

    Hi.  Thanks for your reply.

    Your code to force a click event works for the nodes bound traditionally (page_load).  It does NOT work for the nodes rendered via web services.

    However, we are assuming that the classes for the nodes + - expansion are the same for nodes rendered via web services.  Please verify that the nodes rendered via web services are rendered with the classes ".rocExpandArrow, .rowCollapseArrow".  If not, then what are the classes?

    Note, I was just issued a full license.  Do you want me to open up a support ticket instead?
  9. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 05 Jun 2013 Link to this post

    Hi Thanh,

     
    Yes, the classes of the expand /collapse icons are the same in the nodes loaded by web service.

    Regards,
    Plamen
    Telerik
    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.
  10. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 07 Jun 2013 Link to this post

    The click event is not expanding out the node generated via web services.  Are you able to get the click to expand your web services rendered nodes? Note that I am turning off the expansion symbols and using my own button. Please see below:

    In the orgchartgroupitemdataservice.svc.cs, I am putting everything that was in the item template in the name variable.  This is because web services rendering does not use an item template.
    ...

               foreach (var row in rows)
                {
                    var name = "<a style='cursor:pointer' /></a>" 
                               + "<table cellpadding = '0px' cellspacing = '0px' width='100%' align='left' >"
                               + "    <tr>"
                               + "        <td valign='top'>"
                               + "            <img src='/images/person.png' alt='' height='50px' />"
                               + "        </td>"
                               + "        <td style='line-height:110%' id='" + row.values.Field<string>("EmpID") + "'> "
                               +              row.values.Field<string>("Name") + "<br />"
                               +              row.values.Field<string>("Position") + "<br />"
                               +              row.values.Field<string>("Division") + "<br />"
                               +              row.values.Field<string>("Department")
                               + "        </td>"
                               + "    </tr>"
                               + "    <tr>"
                               + "        <td class='a" + (row.values.Field<int>("NumberOfDirectReports")).ToString() + "'>"
                               + "      <span class='RadButton RadButton_Default rbSkinnedButton' style='display:inline-block;border-width:0px;'> "
                               + "      <input type='button' class='rbDecorated' value='[+/-]' OnClick='alert(1);getMousePosition3();OnClientClicked2(3);' />"
                               + "      </span>"
                               + "     </td>"
                               + "     </tr>"
                               + "        </table>";

                    var id = row.values.Field<string>("EmpID");
                    var item = new OrgChartGroupItemData() { Text = name, Id = id };

                    items.Add(item);


    ----
    Right now i'm just hard coding the id corresponding to the node I want to expand.  Since this is rendered ad-hoc in the web services code-behind, I can't use the telerik button control.  So I use a standard input button.
    ----

    In default.aspx:

    function OnClientClicked2(elementName) {

    var name_element = document.getElementById('11290451');
    // alert($(name_element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.innerHTML);
    alert($(document.getElementById('11290451').parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement).find("a:last").hasClass("rocExpandArrow"));

    // $(document.getElementById('11290451').parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement).find("a:last").click();

    $(name_element.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement).find(".rocExpandArrow").click();

    alert('finished');
    }
  11. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 12 Jun 2013 Link to this post

    Hi Thanh,

     
    The nodes should be generated properly view web service event is triggering from the click event when the expand button is hidden it is the same as preforming it manually. That is why in this case the issue is most probably caused by your custom implementation. 

    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  12. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 12 Jun 2013 Link to this post

    Have you tried triggering the click event on the web services rendered nodes using the jquery example you displayed above?

    Your code works fine with the non-web services rendered nodes.  The jquery call to perform the click on the web services rendered nodes do not work.  I used jquery call exactly. 

    By the way, should I open up a support ticket to get faster than 72 hour support?  I have had a full license for several weeks now.
  13. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 13 Jun 2013 Link to this post

    No, the issue is not caused by my custom implementation.

    The code you gave me does not work for dynamically generated content. 

    I believe the issue is due to the fact that JQUERY does not allow for the click event to be executed for dynamic data (aka web services generated nodes).  Please google this and you will find the issue.

    Please advise on how to accomplish this.  If there a client side ajax call I can make passing in the node id or something that would help.  I just need to replicate the call to the org chart control that is similar to the call that made on clicking the expand/collapse button.



  14. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 17 Jun 2013 Link to this post

    Hi Thanh,

     
    Yes indeed you are right that the provided code will not work correctly with the nodes that are opened with web service. For them you can use some custom code to trigger the event as for example the following one:

    <telerik:RadButton ID="RadButton2" runat="server" OnClientClicked="OnClientClicked" AutoPostBack="false">
     
                    </telerik:RadButton>
            <telerik:RadOrgChart runat="server" ID="RadOrgChart2" >
    <script type="text/javascript">
               function OnClientClicked(sender, args) {
                   var $ = $telerik.$;
                  
                   $(".rocExpandArrow")[0].click();
                 
               }
     
           </script>

    As for you want a faster support answers I will recommend you to submit support tickets instead of using the forum threads.

    Hope this information will be helpful.


    Regards,
    Plamen
    Telerik
    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 the blog feed now.
  15. Thanh
    Thanh avatar
    15 posts
    Member since:
    May 2013

    Posted 17 Jun 2013 Link to this post

    2 things:

    1. Your new example still has the same problem.  The click event is not associated with the new nodes because they did not exist on page load.  Your example is STILL using jquery.  The click event will not fire.  Instead of actually calling the function that normally gets called on the click event, you are instead trying to replicate the click event itself....which will not work with jquery on dynamically rendered data.

    2.  How do I use the telerik radbutton when I am  having to code the HTML elements myself in the orgchartgroupitemdataservice.svc.cs?  Recall this is the only way to do this since there is no item templates on web services rendered nodes.

                foreach (var row in rows)
                {
                    var name = "<a style='cursor:pointer' /></a>"                           
                               + "<table cellpadding = '0px' cellspacing = '0px' width='100%' align='left' >"
                               + "    <tr>"
                               + "        <td valign='top'>"
                               + "            <img src='/images/outlook-default-person.png' alt='' height='50px' />"
                               + "        </td>"
                               + "        <td style='line-height:110%' id='" + row.values.Field<string>("EmployeeID") + "'> "
                               +              row.values.Field<string>("Name") + "<br />"
                               +              row.values.Field<string>("Position") + "<br />"
                               +              row.values.Field<string>("Division") + "<br />"
                               +              row.values.Field<string>("Department")
                               + "        </td>"
                               + "    </tr>"
                               + "    <tr>"
                               + "        <td class='a" + (row.values.Field<int>("DirectReportsNumber")).ToString() + "'>"
                               + "      <span class='RadButton RadButton_Default rbSkinnedButton' style='display:inline-block;border-width:0px;'> "
                        //                            + "      <input type='button' class='rbDecorated' value='[+/-]' OnClick=\"alert('button clicked');OnClientClicked2('" + (row.values.Field<string>("EmpID")).ToString() + "btn" + "'\")' >"
                               + "      <input type='button' class='rbDecorated' value='[+/-]' OnClick='alert(1);getMousePosition3();OnClientClicked2(3);' />"
                               + "      </span>"
                               + "     </td>"
                               + "     </tr>"
                               + "        </table>";

                    var id = row.values.Field<string>("EmpID");
                    var item = new OrgChartGroupItemData() { Text = name, Id = id };

                    items.Add(item);


  16. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 20 Jun 2013 Link to this post

    Hello,

     I have inspected the code that you shared and here is the code that worked properly at our side :

    foreach (var row in rows)
    {
        var name = "<a style='cursor:pointer' /></a>"
                       + "<table cellpadding = '0px' cellspacing = '0px' width='100%' align='left' >"
                       + "    <tr>"
                       + "        <td valign='top'>"
                       + "           image"
                       + "        </td>"
                       + "        <td style='line-height:110%' id='" + row.values.Field<string>("Name") + "'> "
                       + row.values.Field<string>("Name") + "<br />"
                       + row.values.Field<string>("Name") + "<br />"
                       + row.values.Field<string>("Name") + "<br />"
                       + row.values.Field<string>("Name")
                       + "        </td>"
                       + "    </tr>"
                       + "    <tr>"
                       + "      <input type='button' class='rbDecorated' value='[+/-]' OnClick='onClickFunction(this)' />"
                       + "      </span>"
                       + "     </td>"
                       + "     </tr>"
                       + "        </table>";
        var id = row.values.Field<string>("EmployeeID");
        var item = new OrgChartGroupItemData() { Text = name, Id = id };
      
        items.Add(item);
    }
    function onClickFunction(e) {
                  var $ = $telerik.$;
                
                  $(e.parentElement.parentElement.parentElement).find(".rocExpandArrow, .rocCollapseArrow").click();
              }

    Hope this will be helpful.Regards,
    Plamen
    Telerik
    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 the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017