[Solved] Zooming in and out of OrgChart

[technotes]

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 + ")";
}

[MasterChiefMasterChef]

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

[Efe kaya]

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

[Peter Filipov]

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