Auto Resize image in radwindow

10 posts, 2 answers
  1. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 19 Aug 2014 Link to this post

    Hi,
    I have some photos which are large as 3000px X 4000px.
    When I open one of them in my ie or chrome browser, the browser set it's size to browser size automatically. Bu when I open that photo in a radwindow (and resize radwindow), windows shows scrollbars. Is there any way to set image size to its parent container(radwindow).

    I used this code to open a photo in a radwindow. (sender is a imagebutton).

            function OpenWindow(sender) {
                var link = sender.src;
                var wnd = window.radopen(link, null);
                wnd.set_status("");
                wnd.setSize(400, 400);
                return false;
            }

    The Result is in the attachment. I want to shrink image automatically to its parent size.

    Many thanks.

  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2014 in reply to gozcelik Link to this post

    Hi,

    Please try the below sample code snippet which works fine at my end.

    ASPX:
    <asp:ImageButton ID="imgbtnBigImage" runat="server" ImageUrl="~/Images/index122.jpg"
        OnClientClick="OpenWindow(this); return false;" />
    <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/index11.jpeg"
        OnClientClick="OpenWindow(this); return false;" />
    <telerik:RadWindowManager ID="RadWindowManager1" runat="server" OnClientAutoSizeEnd="OnClientAutoSizeEnd">
    </telerik:RadWindowManager>

    JavaScript:
    function OpenWindow(sender) {
        var link = sender.src;
        var wnd = window.radopen(link, null);
    }
    function OnClientAutoSizeEnd(sender, args) {
        var win = $find("<%=RadWindowManager1.ClientID%>");
        win.autoSize(true);
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 20 Aug 2014 in reply to Shinu Link to this post

    Hi Shinu,
    Thanks for your reply. But It's not working for me:(
    First of all, "OnClientAutoSizeEnd" script isn't running after my "wnd.setSize(400, 400);" command. It's running only if I resize window manually with my cursor.
    Even "OnClientAutoSizeEnd" script run, window won't change its content size. If my image is 3000x4000px and my windows is 400x400px, I want to show image as 400x400px in window. I mean windows must not change its size belong to image size, must show image belong to window size.
    Thanks.
  5. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 20 Aug 2014 Link to this post

    I found an example, but I don't know how:
    Click this link http://demos.telerik.com/aspnet-ajax/window/examples/radopen/defaultcs.aspx 
    And press "Open RadWindow" button. microsoft site will be open. When you change size of windows, you can see that images change their size. Xbox image for example. See attachment pls.
  6. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Aug 2014 Link to this post

    Hi,

    Making an HTML element get the size of its parent is done with CSS where the elements are located, for example, the following markup will make the images in this content page fit the window they are in (be it RadWindow or the browser window):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            html, body, form, img.img100percent
            {
                margin: 0;
                padding: 0;
                height: 100%;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <img class="img100percent" src="images/some-image.png" alt="" />
        </form>
    </body>
    </html>



    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  7. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 20 Aug 2014 in reply to Marin Bratanov Link to this post

    Hi Marin,
    It works:) Thanks to all.

    I have an other problem. I used wnd.set_status(""); command in script. But as you can see in my attachment, status bar shows the page URL. How can I disable it?
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2014 in reply to gozcelik Link to this post

    Hi,

    Please do the following modification in your JavaScript.

    JavaScript:
    function OpenWindow(sender) {
        var link = sender.src;
        var wnd = window.radopen(link, null);
        setTimeout(function () {
            wnd.set_status("");
        }, 0);
    }

    Thanks,
    Shinu.
  9. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 20 Aug 2014 in reply to Shinu Link to this post

    Hi Shuni,
    I is not working unfortunately:(

    My script is:

    function OpenWindow(sender) {
        var link = sender.src;
        link = "ShowPicture.aspx?o=" + link;
        var wnd = window.radopen(link, null,400,400);
     
        setTimeout(function () {
            wnd.set_status("");
        }, 0);
        return false;
    }
  10. Answer
    Marin Bratanov
    Admin
    Marin Bratanov avatar
    3602 posts

    Posted 20 Aug 2014 Link to this post

    Hi guys,

    The status is the URL of the loaded page and is populated in the OnClientPageLoad event of the RadWindow, so this is where you need to set it to an empty string to remove it.

    The easier option is to simply set the VisibleStatusbar property to false so you do not have the status bar at all.


    Regards,

    Marin Bratanov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. gozcelik
    gozcelik avatar
    15 posts
    Member since:
    Jul 2009

    Posted 20 Aug 2014 Link to this post

    Hi,
    I looked for a "EnableStatusbar" property. Apparently I missed "VisibleStatusbar".

    Thank to all.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017