This is a migrated thread and some comments may be shown as answers.

Set height dynamically

1 Answer 107 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
July
Top achievements
Rank 2
July asked on 19 Jun 2012, 01:54 PM
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







1 Answer, 1 is accepted

Sort by
0
July
Top achievements
Rank 2
answered on 19 Jun 2012, 02:18 PM
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!!
Tags
Splitter
Asked by
July
Top achievements
Rank 2
Answers by
July
Top achievements
Rank 2
Share this question
or