Faking a browser resize, but things aren't going as expected - why are resize events not firing?

4 posts, 0 answers
  1. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 08 Aug 2011 Link to this post

    Hi Telerik,

    This is from Stack Overflow, sorry for the copy-paste.

    I have a dashboard web application. It contains some controls on it which are sized based on the browser and are also resizeable by the user. They are dynamically created and, as such, I persist their dimensions through page postbacks by storing their state in Session and in a database.

    When my dashboard first loads there is a chance that I am pulling data out of the Database onto a monitor which is not the same size as when the data was written to the Database. The controls need to be resized proportional to how they were before. Fortunately, it appears that the controls are able to resize themselves to the correct, proportional dimensions if they believe they need to re-calculate their dimensions.

    As such, on first page load, I would like to simulate the browser resizing. Is it possible to do something like this in javascript?


    So, what I've done is this:

    protected void Page_Load(object sender, EventArgs e)
    {
        RegenerationManager.Instance.RegenerateDockContents();
        //Reload controls once to have them auto-detect browser settings.
        if (!IsPostBack) ScriptManager.RegisterStartupScript(Page, Page.GetType(), "KEY01", "ForceResize();", true);
    }

    function ForceResize() {
     
        setTimeout(function () {
            window.onresize = function () { alert('Thanks, its resized!!'); };
     
            $(window).resize();
        }, 100);
    }

    The window's onresize event is confirmed to be firing, but I do not see the controls on the page respond in the same way that they do when I click the shrink/expand browser window icon in the upper right hand corner of the browser.

    That is to say, I have OnClientResizing events for some RadPanes. These events do not fire when I call browser resize. What are they bound to?

    I have tried forcing a postback on the RadPanes parent splitter. This does not seem to be sufficient enough to cause them to adjust their dimensions appropriately.

    Thoughts?
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 11 Aug 2011 Link to this post

    Hi Sean,

    The ClientResize event of RadSplitter is raised if an actual change of the size occurs, thus calling explicitly resize to the browser without changing its dimensions the splitter will got raise its event.

    If you need to force resize of the splitter in order to force recalculation of controls nested inside the splitter I would recommend you instead of faking browser resize to call the RadSplitter's client-side method repaint() - this method will force repaint() to all nested controls, e.g.:
    <script type="text/javascript">
        Sys.Application.add_load(function(){
            var splitter = $find("<%= RadSplitter1.ClientID %>");
            splitter.repaint();
        });
    </script>

    Please let us know if this helps.

    Kind regards,
    Dobromir
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Sean
    Sean avatar
    200 posts
    Member since:
    Nov 2010

    Posted 11 Aug 2011 Link to this post

    Hey,

    I had a client-side event bound to the resize event, so repainting didn't work, either. Regardless, I settled on this which seems fine.

    function ForceResize() {
        setTimeout(function () {
            var splitter = $find(radSplitter2ID);
            splitter.resize(splitter.get_width() - 1, splitter.get_height() - 1);
        }, 100);
    }
  5. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 17 Aug 2011 Link to this post

    Hi Sean,

    This indeed will force resize to be raised, however, it will modify the overall layout and restoring the original size will trigger another execution of resize handlers etc., that is why I did not suggested this approach. But if it is working for your scenario it is OK as a solution.

    Greetings,
    Dobromir
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top