Zooming in and out of OrgChart

4 posts, 0 answers
  1. technotes
    technotes avatar
    9 posts
    Member since:
    Jan 2013

    Posted 18 Mar 2013 Link to this post

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


  2. MasterChiefMasterChef
    MasterChiefMasterChef avatar
    152 posts
    Member since:
    Jan 2013

    Posted 19 Mar 2013 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Efe kaya
    Efe kaya avatar
    3 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    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);"
  5. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 27 Mar 2013 Link to this post

    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.
Back to Top