Height of Splitter and Panes.

2 posts, 0 answers
  1. Fusion Outsourcing Software Pvt. Ltd.
    Fusion Outsourcing Software Pvt. Ltd. avatar
    16 posts
    Member since:
    Apr 2009

    Posted 09 Jun 2009 Link to this post

    Hello Telerik,

    I am having design issues. I paste the code below.
    Sample.Aspx
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample.aspx.cs" Inherits="Sample" %> 
     
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!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 runat="server"> 
        <title>CRM</title> 
        <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
        <link href="Telerik/RadSplitter/SampleSpliter/Splitter.SampleSpliter.css" rel="stylesheet" 
            type="text/css" /> 
    </head> 
    <body> 
        <form runat="server" id="frmCRM" style="height: 100%"> 
        <div id="wrapper"> 
            <telerik:RadAjaxManager runat="server" ID="ajax_manager"> 
            </telerik:RadAjaxManager> 
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
            </telerik:RadScriptManager> 
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:SchedulerConnectionString %>" 
                    SelectCommand="SELECT [ID], [EmpName] FROM [Employee]"></asp:SqlDataSource> 
            <div id="content"> 
                <telerik:RadSplitter ID="Splitter_main" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                    Width="100%" Height="100%" Orientation="Horizontal" Skin="SampleSpliter" EnableEmbeddedSkins="false" 
                    ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                    BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false"> 
                    <telerik:RadPane ID="Pane_top" Scrolling="None" runat="server" Width="100%" Height="10%" 
                        BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> 
                        <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="SqlDataSource1" 
                                FrameDuration="1" Height="40px"  RotatorType="ButtonsOver" 
                                ScrollDirection="Left,Right" Skin="Vista" Width="160" > 
                                <%--OnItemClick="UpdateScheduler" ondatabinding="RadRotator1_DataBinding" ondatabound="RadRotator1_DataBound" >--%> 
                                <ItemTemplate> 
                                    <div> 
                                        <asp:Image ID="Emp_image" runat="server" Height="40px" ImageUrl='<%# String.Format("~/Img/{0}.jpg", DataBinder.Eval(Container.DataItem, "ID")) %>' 
                                        AlternateText='<%# DataBinder.Eval(Container.DataItem, "ID")%>'  
                                            ToolTip='<%# DataBinder.Eval(Container.DataItem, "EmpName")%>' Width="40px" /> 
                                             
                                            </div> 
                                </ItemTemplate> 
                            </telerik:RadRotator> 
                    </telerik:RadPane> 
                    <telerik:RadSplitBar ID="Splitbar_top" runat="server" CollapseMode="Forward" Width="100%" /> 
                    <telerik:RadPane ID="Pane_bottom" Scrolling="None" runat="server" Width="100%" Height="90%" 
                        BackColor="#ff0000" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> 
                        <telerik:RadSplitter ID="Splitter_bottom" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                            Width="100%" Orientation="Vertical" Skin="SampleSpliter" EnableEmbeddedSkins="false" 
                            ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                            BorderSize="0" BorderStyle="None" BorderWidth="0px"> 
                            <telerik:RadPane ID="Pane_contacts" Scrolling="None" runat="server" Width="16%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> 
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="SplitBar_contacts" runat="server" CollapseMode="Both" Width="20px" 
                                Height="100%" /> 
                            <telerik:RadPane ID="Pane_today" Scrolling="None" runat="server" Width="26%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> 
                                 
                                 
     
                                 
                            </telerik:RadPane> 
                            <telerik:RadSplitBar ID="SplitBar_Today" runat="server" CollapseMode="Both" Width="20px" 
                                Height="100%" /> 
                            <telerik:RadPane ID="Pane_Scheduler" Scrolling="None" runat="server" Width="58%" Height="100%" 
                                BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"> 
                                 
                                <telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" 
                            Height="100%" Skin="Vista" Width="100%"> 
                            <CollapseAnimation Type="InOutQuint" /> 
                            <Items> 
                                <telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" 
                                    Text="Scheduler"> 
                                    <Items> 
                                        <telerik:RadPanelItem runat="server" Height="100%" Value="WeekScheduler" > 
                                            <ItemTemplate> 
                                             
                                             
                                              <telerik:RadSplitter ID="Splitter_Scheduler" runat="server" Height ="100%" Width="100%" LiveResize="true" ResizeMode="AdjacentPane" 
                                    Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                                    ResizeWithBrowserWindow="true" SplitBarsSize="20" 
                                    BorderSize="0" BorderStyle="None" BorderWidth="0px"> 
                                                  <telerik:RadPane ID="Pane_calender" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedScripts="false" Height="10%"> 
                                                      <telerik:RadCalendar ID="RadCalendar1" runat="server" Font-Names="Arial, Verdana, Tahoma" 
                                                          ForeColor="Black" Style="border-color: #ececec" Height="10%"> 
                                                      </telerik:RadCalendar> 
                                                  </telerik:RadPane> 
                                                   
                                                  <telerik:RadPane ID="Pane_WeekScheduler" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedScripts="false"> 
                                                   
                                                      <telerik:RadScheduler ID="RadScheduler1" runat="server" DataKeyField="ID" DataStartField="Start" 
                    DataSubjectField="Subject" DataEndField="End" Skin="Vista" Height="80%"> 
                                                      </telerik:RadScheduler> 
                                                       
                                                  </telerik:RadPane> 
                                     
                                    </telerik:RadSplitter>   
                                             
                                           </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                            </Items> 
                                            </telerik:RadPanelItem> 
                                            <telerik:RadPanelItem runat="server" Text="ToDo's"> 
                                    <Items> 
                                        <telerik:RadPanelItem runat="server" Value="Todo"> 
                                            <ItemTemplate> 
                                            </ItemTemplate> 
                                        </telerik:RadPanelItem> 
                                    </Items> 
                                </telerik:RadPanelItem> 
                            </Items> 
                            <ExpandAnimation Type="None" /> 
                        </telerik:RadPanelBar> 
                                             
                                 
                                 
                                     
                                 
                            </telerik:RadPane> 
                            <%--<telerik:RadSplitBar ID="RadSplitBar4" runat="server" CollapseMode="Forward" Width="20px" 
                                Height="100%" />--%> 
                        </telerik:RadSplitter> 
                    </telerik:RadPane> 
                </telerik:RadSplitter></div> 
            <div id="footer"> 
            </div> 
        </div> 
        </form> 
    </body> 
    </html> 

    In the Above Code, all looks fine till i have just Panelbar(ID="PanelBar_Scheduler") & its item templates.

     Now I want to divide rightmost Pane(ID="Pane_Scheduler") into 2 subpanes (top(ID="Pane_calender") & bottom(ID="Pane_WeekScheduler")), so i put a splitter(ID="Splitter_Scheduler").
    I want to set Heights of these 2 panes in %age (Top-30%, Bottom -70%). So when i tried that it shows a message popup
    "Stop Running this script
    A script running on this page is causing internet explorer to run slowly. If it continues to run, your computer may become unresponsive. 
    Yes          No    "
    So i removed it so error do not pop up. But when i put Calender and Scheduler. The design behaved very Weirdly. The Scheduler is running out of the pane. I can't figure out where the problem is.
    I want that the calender & scheduler both fits in RadPane(ID="Pane_Scheduler") i.e. Between PanelBaritems(Text="Scheduler" &  Text="ToDo's").

    I am Binding Scheduler in Code behind. Code below.
    Sample.Aspx.CS

    using System; 
    using System.Collections; 
    using System.Configuration; 
    using System.Data; 
    using System.Linq; 
    using System.Web; 
    using System.Web.Security; 
    using System.Web.UI; 
    using System.Web.UI.HtmlControls; 
    using System.Web.UI.WebControls; 
    using System.Web.UI.WebControls.WebParts; 
    using System.Xml.Linq; 
    using Telerik.Web.UI; 
    using System.Web.Configuration; 
    using System.Data.SqlClient; 
    using System.Collections.Specialized; 
     
    public partial class Sample : System.Web.UI.Page 
    { 
        string connectionString = WebConfigurationManager.ConnectionStrings["SchedulerConnectionString"].ConnectionString; 
         
        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadScheduler RadScheduler1 = (RadScheduler)PanelBar_Scheduler.FindItemByValue("WeekScheduler").FindControl("RadScheduler1"); 
            RadScheduler1.ResourceTypes.Clear(); 
            string selectSQL = "Select * from Appointments"; 
            SqlDataSource EmployeeSource = new SqlDataSource(connectionString, selectSQL); 
            SqlDataSource EmployeeSource1 = new SqlDataSource(connectionString, selectSQL); 
            selectSQL = "Select * from Employee"; 
            SqlDataSource Empl = new SqlDataSource(connectionString, selectSQL); 
            Empl.ID = "Employees"; 
            selectSQL = "Select * from Resource"; 
            SqlDataSource rsrc = new SqlDataSource(connectionString, selectSQL); 
            rsrc.ID = "Resources"; 
            RadScheduler1.DataSourceID = null; 
            ResourceType radschedemp = new ResourceType(); 
            radschedemp.ForeignKeyField = "Emp_ID"; 
            radschedemp.TextField = "EmpName"; 
            radschedemp.Name = "Employee1"; 
            radschedemp.DataSource = Empl; 
            radschedemp.KeyField = "ID"; 
            ResourceType radschedres = new ResourceType(); 
            radschedres.ForeignKeyField = "Resource_ID"; 
            radschedres.TextField = "ResourceName"; 
            radschedres.Name = "Resource1"; 
            radschedres.DataSource = rsrc; 
            radschedres.KeyField = "ID"; 
            RadScheduler1.ResourceTypes.Add(radschedemp); 
            RadScheduler1.ResourceTypes.Add(radschedres); 
            RadScheduler1.DataStartField = "StartDate"; 
            RadScheduler1.DataSubjectField = "Subject"; 
            RadScheduler1.DataKeyField = "ID"; 
            RadScheduler1.DataEndField = "EndDate"; 
            RadScheduler1.GroupBy = "Date,Employee1"; 
            RadScheduler1.DataSource = EmployeeSource; 
            RadScheduler1.DataBind(); 
        } 
     
        class InlineInsertTemplate : IBindableTemplate 
        { 
            private TextBox _textBox; 
            private TextBox _textBox1; 
     
            public void InstantiateIn(Control container) 
            { 
                _textBox = new TextBox(); 
                //_textBox.TextMode = TextBoxMode.MultiLine; 
                _textBox.Width = Unit.Percentage(10); 
                _textBox.BorderStyle = BorderStyle.Groove; 
     
                container.Controls.Add(_textBox); 
     
                _textBox1 = new TextBox(); 
                //_textBox1.TextMode = TextBoxMode.MultiLine; 
                _textBox1.Width = Unit.Percentage(10); 
                _textBox1.BorderStyle = BorderStyle.Groove; 
     
                container.Controls.Add(_textBox1); 
     
                LinkButton insertButton = new LinkButton(); 
                insertButton.Text = "Insert"; 
                insertButton.CommandName = "Insert"; 
     
                container.Controls.Add(insertButton); 
     
                LinkButton cancelButton = new LinkButton(); 
                cancelButton.Text = "Cancel"; 
                cancelButton.CommandName = "Cancel"; 
     
                container.Controls.Add(cancelButton); 
     
     
            } 
     
            public IOrderedDictionary ExtractValues(Control container) 
            { 
                IOrderedDictionary result = new OrderedDictionary(); 
     
                result.Add("Subject", _textBox.Text); 
                result.Add("EmpName", _textBox1.Text); 
     
                return result; 
            } 
        } 
     
        protected override void OnInit(EventArgs e) 
        { 
            base.OnInit(e); 
            RadScheduler RadScheduler1 = (RadScheduler)PanelBar_Scheduler.FindItemByValue("WeekScheduler").FindControl("RadScheduler1"); 
            RadScheduler1.InlineInsertTemplate = new InlineInsertTemplate(); 
        } 
         
         
     
        protected void UpdateScheduler(object sender, Telerik.Web.UI.RadRotatorEventArgs e) 
        { 
            RadScheduler RadScheduler1 = (RadScheduler)PanelBar_Scheduler.FindItemByValue("WeekScheduler").FindControl("RadScheduler1"); 
            RadScheduler1.ResourceTypes.Clear(); 
            if (e.Item.BorderStyle == BorderStyle.Groove) 
            { 
                e.Item.BorderStyle = BorderStyle.None; 
                e.Item.BorderColor = System.Drawing.Color.White; 
            } 
            else 
            { 
                e.Item.BorderStyle = BorderStyle.Groove; 
                e.Item.BorderColor = System.Drawing.Color.Red; 
            } 
     
            string selectSQL = "Select * from Appointments Where Emp_ID =" + ((e.Item.Index) + 1); 
            SqlDataSource EmployeeSource = new SqlDataSource(connectionString, selectSQL); 
            SqlDataSource EmployeeSource1 = new SqlDataSource(connectionString, selectSQL); 
            selectSQL = "Select * from Employee Where ID = " + ((e.Item.Index) + 1); 
            SqlDataSource Empl = new SqlDataSource(connectionString, selectSQL); 
            Empl.ID = "Employees"; 
            selectSQL = "Select * from Resource"; 
            SqlDataSource rsrc = new SqlDataSource(connectionString, selectSQL); 
            rsrc.ID = "Resources"; 
            RadScheduler1.DataSourceID = null; 
            ResourceType radschedemp = new ResourceType(); 
            radschedemp.ForeignKeyField = "Emp_ID"; 
            radschedemp.TextField = "EmpName"; 
            radschedemp.Name = "Employee1"; 
            radschedemp.DataSource = Empl; 
            radschedemp.KeyField = "ID"; 
            ResourceType radschedres = new ResourceType(); 
            radschedres.ForeignKeyField = "Resource_ID"; 
            radschedres.TextField = "ResourceName"; 
            radschedres.Name = "Resource1"; 
            radschedres.DataSource = rsrc; 
            radschedres.KeyField = "ID"; 
            RadScheduler1.ResourceTypes.Add(radschedemp); 
            RadScheduler1.ResourceTypes.Add(radschedres); 
            RadScheduler1.DataStartField = "StartDate"; 
            RadScheduler1.DataSubjectField = "Subject"; 
            RadScheduler1.DataKeyField = "ID"; 
            RadScheduler1.DataEndField = "EndDate"; 
            RadScheduler1.GroupBy = "Date,Employee1"; 
            RadScheduler1.DataSource = EmployeeSource; 
            RadScheduler1.DataBind(); 
        } 
     
     
    } 


    Please Help me, I am badly stuck here.

    Thank You,
    Chinmay Sharma.


  3. Svetlina Anati
    Admin
    Svetlina Anati avatar
    2795 posts

    Posted 12 Jun 2009 Link to this post

    Hi Fusion,

    I tried to build up a test page based on your code but I had to comment a lot of code due to missing custom classes and DB. After I modified the demo and ran it I was not able to reproduce teh problem. However, I have the following suggestions:

    1. Set position: relative to the RadPane which is parent of the scheduler - this should solve teh problem with the scheduler floating out of the pane. You can do this by using a CSS class as shown below:

      <head id="Head1" runat="server">  
          <title>CRM</title> 
          <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
          <link href="Telerik/RadSplitter/SampleSpliter/Splitter.SampleSpliter.css" rel="stylesheet" 
              type="text/css" /> 
              <style type="text/css">  
              .ApplyPosition  
              {  
                position: relative !important;  
              }  
              </style> 
      </head> 

      ..................................................................................................................................................................................

        <telerik:RadPane ID="Pane_WeekScheduler" runat="server" EnableEmbeddedBaseStylesheet="False" 
                                                                      EnableEmbeddedScripts="false" CssClass="ApplyPosition">  
                                                                      <telerik:RadScheduler ID="RadScheduler1" runat="server" DataKeyField="ID" DataStartField="Start" 
                                                                          DataSubjectField="Subject" DataEndField="End" Skin="Vista" Height="80%">  
                                                                      </telerik:RadScheduler> 
                                                                  </telerik:RadPane> 
    2. When you have a RadSplitter, nested in an element which is different than RadPane, e.g. RadPanelBar, please set the RadSplitter's ResizeWithParentPane property to false.
      When you have a RadSplitter, directly nested in a RadPane, please do not set its Width and height explicitly to 100% - the splitter will occupy 100% of the RadPane by default and these setting make additional calculations which lead to problems.
    3. When you have a RadPane directly nested in a vertical RadSplitter, do not set its Height - it will be calculated automatically. Similarly for a RadPane directly nested in a horizontal splitter, do not set its Width.

    I believe that the additional and not needed calculations which your page performed will disappear along with the error after you apply the above explained modifications.


    Sincerely yours,
    Svetlina
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top