Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Smith
40
Setting FrameStyle Height
posted

I have a page that has 2 UltraWebGrids on it, an upper and lower.  The grids themselves can vary in length, so the FrameStyle of each grid has been hard coded so users can look at one set of info in the upper and compare to the info in the lower. 

I'm trying to figure out a way to make these frames' height size dynamically on page resize.  Can anyone point me in the right direction?

Thanks.

Parents
No Data
Reply
  • 2677
    posted

    Hello ThatGuy,

    If you want to dynamically resize the grids when the window is resized, you will need to do a little javascript. 

    First, handle the body onload function.

    then hook up the window.onresize() function.

    Then resize the grid in the onresize function using the grid.resize(width,height) method.

    I have provided you with a code snippet of all of this including a generic way to find the size of the window in different browsers.  In the grid.resize() method, you will see that i set the width to the width of the window.  If you dont want to do that, you can get the width of the grid by doint the following:  parseInt(topGrid.MainGrid.style.width)

    <body onload="OnLoad()">

    function OnLoad() {
                window.onresize = WindowResized;
            }       

    function WindowResized() {
                var windowSize = GetWindowSize();
                var topGrid = igtbl_getGridById("UltraWebGrid1");
                topGrid.resize(windowSize.width, windowSize.height / 2);
                var bottomGrid = igtbl_getGridById("UltraWebGrid2");
                bottomGrid.resize(windowSize.width, windowSize.height / 2);
            }
            function GetWindowSize() {
                var w = 0;
                var h = 0;
                //IE
                if (!window.innerWidth) {
                    //strict mode
                    if (!(document.documentElement.clientWidth == 0)) {
                        w = document.documentElement.clientWidth;
                        h = document.documentElement.clientHeight;
                    }
                    //quirks mode
                    else {
                        w = document.body.clientWidth;
                        h = document.body.clientHeight;
                    }
                }
                //w3c
                else {
                    w = window.innerWidth;
                    h = window.innerHeight;
                }
                return { width: w, height: h };
            }

     This should do the trick. 

Children
No Data