14 Answers, 1 is accepted
Unfortunately this is a limitation of RadOrgChart and there is not work around for it.
Hope this will explain the issue.
Plamen
Telerik
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.
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.
Plamen
Telerik
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".
1.You can hide the expand/collapse button with the following css:
<style type=
"text/css"
>
.rocExpandArrow, .rocCollapseArrow {
visibility
:
hidden
;
}
</style>
<
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
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?
Yes, the classes of the expand /collapse icons are the same in the nodes loaded by web service.
Plamen
Telerik
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');
}
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.
Plamen
Telerik
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.
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.
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.
Plamen
Telerik
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);
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