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

Hide Node Expansion + symbol

14 Answers 97 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
Thanh
Top achievements
Rank 1
Thanh asked on 22 May 2013, 02:11 AM
How do I hide the Node Expansion symbol if there are no nodes underneath?

14 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 24 May 2013, 01:32 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 24 May 2013, 04:46 PM
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.
0
Plamen
Telerik team
answered on 29 May 2013, 01:34 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 29 May 2013, 03:32 PM
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".
0
Plamen
Telerik team
answered on 03 Jun 2013, 02:28 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 05 Jun 2013, 03:11 AM
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?
0
Plamen
Telerik team
answered on 05 Jun 2013, 12:14 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 07 Jun 2013, 04:35 PM
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');
}
0
Plamen
Telerik team
answered on 12 Jun 2013, 01:15 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 12 Jun 2013, 04:24 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 13 Jun 2013, 08:18 PM
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.



0
Plamen
Telerik team
answered on 17 Jun 2013, 04:32 PM
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.
0
Thanh
Top achievements
Rank 1
answered on 17 Jun 2013, 07:46 PM

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


0
Plamen
Telerik team
answered on 20 Jun 2013, 08:56 AM
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.
Tags
OrgChart
Asked by
Thanh
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Thanh
Top achievements
Rank 1
Share this question
or