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

Zooming in and out of OrgChart

3 Answers 187 Views
OrgChart
This is a migrated thread and some comments may be shown as answers.
technotes
Top achievements
Rank 1
technotes asked on 18 Mar 2013, 07:59 PM
I have looked at the example in the demo, but I don't want to have to use a rad window..  I have the orgchart inside of a RadPageView.

So my question is how do I get the control for the setZoom Function in the online demo
If you look at the first line that doesn't work it returns a null.  I am new to Javascripting so I am not sure how to grab the control.
function setZoom() {
    var org = $find(".RadOrgChart").get(0);
    var org = $($(".RadWindow iframe").get(0).contentWindow.document).find(".RadOrgChart").get(0)
    //var org = $find("ctl00_MainContent_rocProjects");
                                     
    if ($telerik.isFirefox)
        org.style.MozTransform = "scale(" + scaleParamX + "," + scaleParamY + ")";
    else if ($telerik.isIE && !$telerik.isIE7)
        org.style.zoom = scaleParamX;
    else if ($telerik.isIE7)
        $(org).find(".rocRootNodeList").get(0).style.zoom = scaleParamX;
    else if ($telerik.isOpera || $telerik.isSafari)
        org.style.WebkitTransform = "scale(" + scaleParamX + ")";
}


3 Answers, 1 is accepted

Sort by
0
MasterChiefMasterChef
Top achievements
Rank 2
answered on 19 Mar 2013, 01:43 PM
Hi Technotes,

You can learn about all available jQuery selectors here in their api (http://api.jquery.com/category/Selectors/). If you are trying to select a single object (the RadOrgChart), you could make a selection based on the ID. Right now you are making a selection based on the class.

$find(".RadOrgChart1") --> this will select all items with the class "RadOrgChart1"

$find("#RadOrgChart1") --> this will select the item with the ID of "RadOrgChart1"

Assuming the ID is "ctl00_MainContent_rocProjects", you would simply put a # in front of the selection:
var org = $("#ctl00_MainContent_rocProjects");


Hopefully this helps,
Master Chief
0
Efe kaya
Top achievements
Rank 1
answered on 22 Mar 2013, 03:00 PM
hi everbody,
i added structure zoom to radorgchart. but just appear in radwindow. i want to remove radwindow.how i can write java script ??? i didnt understand "$($(".RadWindow iframe").get(0).contentWindow.document).find(".RadOrgChart").get(0);"
0
Peter Filipov
Telerik team
answered on 27 Mar 2013, 09:34 AM
Hi Efe,

With the following line of code we get a reference to the DOM element of the RadOrgChart. The RadWindow is rendered in iframe element, with the ".RadWindow iframe" selector we are getting a reference to it. In case that you want to create a sample without window you could use the following sample code:

function setZoom() {
    var org = $(document).find(".RadOrgChart").get(0);
  
    if (window.$telerik.isFirefox)
        org.style.MozTransform = "scale(" + scaleParamX + "," + scaleParamY + ")";
    else if (window.$telerik.isIE && !window.$telerik.isIE7)
        org.style.zoom = scaleParamX;
    else if (window.$telerik.isIE7)
        $(org).find(".rocRootNodeList").get(0).style.zoom = scaleParamX;
    else if (window.$telerik.isOpera || window.$telerik.isSafari)
        org.style.WebkitTransform = "scale(" + scaleParamX + ")";
}



Regards,
Peter Filipov
the Telerik team
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.
Tags
OrgChart
Asked by
technotes
Top achievements
Rank 1
Answers by
MasterChiefMasterChef
Top achievements
Rank 2
Efe kaya
Top achievements
Rank 1
Peter Filipov
Telerik team
Share this question
or