Set height dynamically

2 posts, 0 answers
  1. July
    July avatar
    205 posts
    Member since:
    Jul 2011

    Posted 19 Jun 2012 Link to this post

    This is my scenario:

    I have a Div = CenterBody, with set height dynamically depending on windows Heigth.
    I need create radsplitter programmatically and set height = ccenterBody Heigth.

    this is my aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="WebSearch.UI.Test" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
         <telerik:RadCodeBlock ID="CodeBlock" runat="server">
            <script type="text/javascript">

        //here set center body Height
                function pageLoad() {
                    var windowHeight;
                    if (typeof window.innerWidth != 'undefined') {
                        windowHeight = window.innerHeight;
                    }
                    // IE6 in standards compliant mode (i.e. with a valid doctype as the first
                    // line in the document)
                    else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth != 'undefined'
                    && document.documentElement.clientWidth != 0) {
                        windowHeight = document.documentElement.clientHeight;
                    }
                    // older versions of IE
                    else {
                        windowHeight = document.getElementsByTagName('body')[0].clientHeight;
                    }
                    document.getElementById("centerBody").style.height = (windowHeight - document.getElementById("centerBody").offsetTop) + "px";
                  
    // here i need set RadSplitter .height = = (windowHeight - document.getElementById("centerBody").offsetTop) + "px"; 
         
                }


                 
            </script>
        </telerik:RadCodeBlock>
        </head>
    <body>
        <form id="Form2" runat="server">  <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        


       <div id="centerBody" runat="server" style="border-color:Green; border-width:2px; border-style:solid; width:100%">
       </div>
                             
        
        </form>
    </body>
    </html>


    my aspx.cs where I create RadSplitter programmatically

     public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                RadSplitter splitter = new RadSplitter();
                splitter.ID = "RadSplitter1";
                splitter.Width = Unit.Percentage(100);
                splitter.Height = Unit.Percentage(100);
                splitter.Orientation = Orientation.Vertical;
                RadPane topPane = new RadPane();
                topPane.ID = "TopPane";
                Label topLabel = new Label();
                topLabel.ID = "TopLabel";
                topLabel.Text = "Top pane";
                topPane.Controls.Add(topLabel);
                splitter.Items.Add(topPane);
                RadSplitBar splitBar1 = new RadSplitBar();
                splitBar1.ID = "SplitBar1";
                splitter.Items.Add(splitBar1);
                RadPane middlePane = new RadPane();
                middlePane.ID = "MiddlePane";
                middlePane.Controls.Add(new LiteralControl("Middle pane"));
                splitter.Items.Add(middlePane);
                RadSplitBar splitBar2 = new RadSplitBar();
                splitBar2.ID = "SplitBar2";
                splitter.Items.Add(splitBar2);
                RadPane bottomPane = new RadPane();
                bottomPane.ID = "BottomPane";
                bottomPane.Controls.Add(new LiteralControl("Bottom pane"));
               
                splitter.Items.Add(bottomPane);
                centerBody.Controls.Add(splitter);
            }
        
        }


    the result is captura1.

    I need show as captura2

    How I can do this???

    regards







  2. July
    July avatar
    205 posts
    Member since:
    Jul 2011

    Posted 19 Jun 2012 Link to this post

    Sorry I found the solution.

    On pageload function I added


     var windowHight = document.height;
                    var windowWidth = document.width;


                    var vvv = $find("ctl00_RadSplitter1");
                    if (vvv == null)
                        vvv = $find("RadSplitter1");
                    vvv.set_height((windowHeight - document.getElementById("centerBody").offsetTop - 50) + "px");
                    vvv.set_width(windowWidth);

    And it works!!
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top