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

RAD Panel Bar Height Issue

7 Answers 203 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Fusion Outsourcing Software Pvt. Ltd. asked on 17 Jun 2009, 08:59 AM
Hello Telerik,

I am having a problem in resizing(height=100%) the scheduler in Panel Bar. The height & width of the panel fixed to 100%. But it display white spce in panel item for scheduler. Also we try to give height of scheduler to 100%, but it was getting out of the panel item.

I have pasted my code below:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> 
 
<%@ 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 id="Head1" runat="server">  
    <title>CRM</title> 
    <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Spliter/Splitter.SBM_Spliter.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Scheduler/Scheduler.SBM_Scheduler.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_PanelBar/PanelBar.SBM_PanelBar.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> 
        <div id="content">  
            <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                Width="100%" Height="100%" Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false">  
                <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="10%" 
                    BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                    Vipin  
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> 
                <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="90%" 
                    BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px">  
                        <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                              
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition">  
                            <telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" 
                                Skin="SBM_PanelBar" Height="100%" Width="100%" AllowCollapseAllItems="true" EnableEmbeddedSkins="false">  
                                <CollapseAnimation Type="InQuart" /> 
                                <Items> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="Calendar" 
                                        BorderStyle="None" BorderWidth="0px">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="Calendar">  
                                                <ItemTemplate> 
                                                    Vipin  
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" Text="Scheduler" 
                                        BorderStyle="None" BorderWidth="0px">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="WeekScheduler">  
                                                <ItemTemplate> 
                                                <div style="float:left; width: 100%; height:100%;">  
                                                    <telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID" 
                                                        DataStartField="Start" DataSubjectField="Subject" EnableEmbeddedSkins="false" 
                                                        SelectedView="MultiDayView" ShowAllDayRow="false" ShowNavigationPane="false" 
                                                        Skin="SBM_Scheduler" CssClass="RadScheduler_SBM_Scheduler">  
                                                        <MultiDayView ColumnHeaderDateFormat="D" NumberOfDays="2" UserSelectable="false"  /> 
                                                        <WeekView UserSelectable="false" /> 
                                                        <MonthView UserSelectable="false" /> 
                                                        <TimelineView UserSelectable="false" /> 
                                                        <DayView UserSelectable="false"  /> 
                                                    </telerik:RadScheduler></div>  
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="To Do's" 
                                        BorderStyle="None" BorderWidth="0px" BackColor="RosyBrown">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="TODO">  
                                                <ItemTemplate> 
                                                    Vipin  
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                </Items> 
                            </telerik:RadPanelBar> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        <div id="footer">  
            &nbsp;  
        </div> 
    </div> 
    </form> 
</body> 
</html> 
 
also have a look on the CSS, we are using pasted below:

html, body, form {  
    font-familysans-serifserif"Trebuchet MS"Verdana;  
    font-size11px;  
    font-weightnormal;  
    color#000000;  
    text-decorationnone;  
    line-height18px;  
    margin0px;  
    padding0px;  
    height: 100%;  
    width: 100%;  
}  
#wrapper {  
    padding0px;  
    width: 100%;  
    margin-top0px;  
    margin-rightauto;  
    margin-bottom0px;  
    margin-left0px;  
    height: 99%;  
    positionabsolute;  
    clip: rect(0px,auto,auto,0px);  
}  
#header {  
    margin0px;  
    padding0px;  
    floatleft;  
    width: 100%;  
    height: 100%;  
    border0px none #A6DBFF;  
    background-color#fefeff;  
    text-aligncenter;  
    background-imageurl('../img/header_backg.jpg');  
    background-positionbottombottom;  
    background-repeat:repeat-x;  
}  
#content {  
    margin0px;  
    padding0px;  
    floatleft;  
    width: 100%;  
    border-right-width0px;  
    border-left-width0px;  
    border-right-style: none;  
    border-left-style: none;  
    border-right-color#A6DBFF;  
    border-left-color#A6DBFF;  
    border-bottom-width0px;  
    border-bottom-style: none;  
    border-bottom-color#A6DBFF;  
    height: 98%;  
}  
#conten#leftcolumn {  
    margin0px;  
    floatleft;  
    width: 15%;  
    padding-top0px;  
    padding-right0px;  
    padding-bottom: 1%;  
    padding-left0px;  
}  
#conten#centrecolumn {  
    margin0px;  
    floatleft;  
    width: 26%;  
    border-right-width0px;  
    border-right-style: none;  
    border-right-color#A6DBFF;  
    padding-top0px;  
    padding-right0px;  
    padding-bottom: 1%;  
    padding-left0px;  
    height: 98%;  
    border-left-width0px;  
    border-left-style: none;  
    border-left-color#A6DBFF;  
}  
 
#conten#rightcolumn {  
    margin0px;  
    floatleft;  
    width: 58%;  
    padding-top0px;  
    padding-right0px;  
    padding-bottom: 1%;  
    padding-left0px;  
    height: 98%;  
}  
#footer {  
    margin0px;  
    padding0px;  
    clearboth;  
    height: 2%;  
    border-right-width1px;  
    border-bottom-width1px;  
    border-left-width0px;  
    border-right-style: none;  
    border-bottom-style: solid;  
    border-left-style: none;  
    border-right-color#A6DBFF;  
    border-bottom-color#A6DBFF;  
    border-left-color#A6DBFF;  
    width: 100%;  
    font-size10px;  
    background-color#A6DBFF;  
}  
#content .top {  
    margin0px;  
    padding0px;  
    floatleft;  
    height: 100%;  
    width: 100%;  
    border-bottom-width1px;  
    border-bottom-style: solid;  
    border-bottom-color#A6DBFF;  
}  
#content .bottombottom {  
    margin0px;  
    padding0px;  
    floatleft;  
    height: 100%;  
    width: 100%;  
}  
 
#search_contacts  
{  
    width:98%;  
    margin:0px;  
    padding:8px;  
    bordernone 0px #ff0000;  
    float:left;  
    background-color#A6DBFF;  
}  
#search_contacts .txtfield  
{  
 bordersolid 1px #000000;  
 widthauto;  
 font-size11px;  
 padding2px;  
   
}  
#search_contacts .btn_add  
{  
    color#FFFFFF;  
    margin0px;  
    padding0px;  
    height20px;  
    width50px;  
    border-top-width0px;  
    border-right-width0px;  
    border-bottom-width0px;  
    border-left-width0px;  
    border-top-style: none;  
    border-right-style: none;  
    border-bottom-style: none;  
    border-left-style: none;  
    background-color#AF251B;  
    font-familysans-serifserifVerdana"Trebuchet MS" , Arial;  
    font-size12px;  
    cursorpointer;  
    cursor: hand;  
}  
#contacts_grid  
{  
    width:98%;  
    margin:0px;  
    padding:0px;  
    bordernone 0px #ff0000;  
    float:left;  
    background-color#A6DBFF;  
}  
.ApplyPosition     
        {     
          positionrelative !important;     
        } 
It is displaying diffrently on 15", 17" & 19" monitor in terms of height.

Kindly help us

Thanks
Chinmay

7 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 17 Jun 2009, 12:07 PM
Hi Fusion Outsourcing Software Pvt. Ltd.,

The height of the row in RadScheduler is fixed in pixels via the RowHeight property (default value is 25px). So, it's normal to have space after the scheduler when you view business hours only.

Regards,
Paul
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.
0
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
answered on 17 Jun 2009, 12:25 PM
Hello Paul,

We have removed the scheduler from panel bar, but still the height of is not adjusted to 100%. I think problem is not with scheduler, problem is in panel bar.

We have put the following code in Panel item instead of scheduler to view the height of panel item and its not occupying the whole space, there is some white space coming below the panel item.

Try this code there is no scheduler, but still we are facing the same problem

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> 
 
<%@ 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 id="Head1" runat="server"
    <title>CRM</title> 
    <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Spliter/Splitter.SBM_Spliter.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Scheduler/Scheduler.SBM_Scheduler.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_PanelBar/PanelBar.SBM_PanelBar.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> 
        <div id="content"
            <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                Width="100%" Height="100%" Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false"
                <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="13%" 
                    BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                    Vipin 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> 
                <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="87%" 
                    BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px"
                        <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition" Height="100%"  > 
                            <telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" 
                                Skin="SBM_PanelBar" Height="100%" Width="100%" AllowCollapseAllItems="true" EnableEmbeddedSkins="false" BackColor="Red"
                                <CollapseAnimation Type="InQuart" /> 
                                <Items> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="Calendar"  BorderStyle="None" BorderWidth="0px"
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="Calendar"
                                                <ItemTemplate> 
                                                   <telerik:RadSplitter ID="Splitter_sched" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="false" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px"
                        <telerik:RadPane ID="Pne_sched" runat="server" Scrolling="None" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition" BackColor="Bisque" Height="100%" > 
                            </telerik:RadPane> 
                                                    </telerik:RadSplitter> 
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" Text="Scheduler" 
                                        BorderStyle="None" BorderWidth="0px"
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="WeekScheduler"   Selected="false" Height="100%" BackColor="Green"
                                                <ItemTemplate> 
                                                  <telerik:RadSplitter ID="Splitter_sched" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="false" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px"
                        <telerik:RadPane ID="Pne_sched" runat="server" Scrolling="None" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition" Height="100%" BackColor="Bisque" > 
                            </telerik:RadPane> 
                                                    </telerik:RadSplitter> 
                                               
                                                    <%--<telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID" 
                                                        DataStartField="Start" DataSubjectField="Subject" EnableEmbeddedSkins="false" 
                                                        SelectedView="MultiDayView" ShowAllDayRow="false" ShowNavigationPane="false" 
                                                        Skin="SBM_Scheduler" CssClass="RadScheduler_SBM_Scheduler"
<MultiDayView ColumnHeaderDateFormat="D" NumberOfDays="2" UserSelectable="false" /> 
                                                        <WeekView UserSelectable="false" /> 
                                                        <MonthView UserSelectable="false" /> 
                                                        <TimelineView UserSelectable="false" /> 
                                                        <DayView UserSelectable="false" /> 
                                                    </telerik:RadScheduler>--%> 
                                                     
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="To Do's" BorderStyle="None" BorderWidth="0px"
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="TODO"
                                                <ItemTemplate> 
                                                    Vipin 
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                </Items> 
                            </telerik:RadPanelBar> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        <div id="footer"
            &nbsp; 
        </div> 
    </div> 
    </form> 
</body> 
</html>  
 



0
Paul
Telerik team
answered on 17 Jun 2009, 01:01 PM
Hi there,

Here's your modified code snippet that shows the needed approach.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> 
 
<%@ 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 id="Head1" runat="server">  
    <title>CRM</title> 
    <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Spliter/Splitter.SBM_Spliter.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Scheduler/Scheduler.SBM_Scheduler.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_PanelBar/PanelBar.SBM_PanelBar.css" rel="stylesheet" 
        type="text/css" /> 
    <style type="text/css">  
        .RadPanelBar .rpLevel1 .rpFirst  
        {  
            padding-top: 0 !important;  
            padding-bottom: 0 !important;  
            height: 100% !important;  
        }  
        .RadPanelBar .rpGroup .rpLink,  
        .RadPanelBar .rpGroup .rpTemplate  
        {  
            height: 100% !important;  
        }  
    </style> 
</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> 
        <div id="content" width="100%" height="100%">  
            <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                Width="100%" Height="100%" Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false">  
                <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="10%" 
                    BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                    Vipin  
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" 
                    Height="100%" /> 
                <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="90%" 
                    BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Height="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px">  
                        <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False">  
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition" 
                            Width="100%" Height="100%">  
                            <telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" 
                                Skin="SBM_PanelBar" Height="100%" Width="100%" AllowCollapseAllItems="true" EnableEmbeddedSkins="false">  
                                <CollapseAnimation Type="InQuart" /> 
                                <Items> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="Calendar" 
                                        BorderStyle="None" BorderWidth="0px">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="Calendar">  
                                                <ItemTemplate> 
                                                    Vipin  
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" Text="Scheduler" 
                                        BorderStyle="None" BorderWidth="0px">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="WeekScheduler">  
                                                <ItemTemplate> 
                                                    <telerik:RadSplitter ID="Splitter_sched" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                                                        Width="100%" Height="100%" ResizeWithParentPane="true" SplitBarsSize="20" BorderSize="0" 
                                                        BorderStyle="None" BorderWidth="0px">  
                                                        <telerik:RadPane ID="Pne_sched" runat="server" Height="100%" BackColor="Green">  
                                                            123  
                                                        </telerik:RadPane> 
                                                    </telerik:RadSplitter> 
                                                    <%--<div style="float: left; width: 100%; height: 100%;">  
                                                        <telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID" 
                                                            DataStartField="Start" DataSubjectField="Subject" EnableEmbeddedSkins="false" 
                                                            SelectedView="MultiDayView" ShowAllDayRow="false" ShowNavigationPane="false" 
                                                            Skin="SBM_Scheduler" CssClass="RadScheduler_SBM_Scheduler" Width="100%"   
                                                            Height="100%" RowHeight="30px">  
                                                            <MultiDayView ColumnHeaderDateFormat="D" NumberOfDays="2" UserSelectable="false" /> 
                                                            <WeekView UserSelectable="false" /> 
                                                            <MonthView UserSelectable="false" /> 
                                                            <TimelineView UserSelectable="false" /> 
                                                            <DayView UserSelectable="false" /> 
                                                        </telerik:RadScheduler> 
                                                    </div>--%> 
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="To Do's" 
                                        BorderStyle="None" BorderWidth="0px" BackColor="RosyBrown">  
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="TODO">  
                                                <ItemTemplate> 
                                                    Vipin  
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                </Items> 
                            </telerik:RadPanelBar> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        <div id="footer">  
            &nbsp;  
        </div> 
    </div> 
    </form> 
</body> 
</html> 
 


Best wishes,
Paul
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.
0
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
answered on 17 Jun 2009, 02:36 PM
Hello Paul,

Thanks a lot  Paul  that worked . We are now able to put Scheduler there with few changes . But only thing is that an unwanted Scrollbar is there for "scheduler" panel Item.  please  if u could help us out with that  also  .

i am pasting the modified code .


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Sample2.aspx.cs" Inherits="Sample2" %> 
 
<%@ 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 id="Head1" runat="server"
    <title>CRM</title> 
    <link href="CSS/crmstyles.css" rel="stylesheet" type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Spliter/Splitter.SBM_Spliter.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_Scheduler/Scheduler.SBM_Scheduler.css" rel="stylesheet" 
        type="text/css" /> 
    <link href="Telerik/RadControls/SBM_PanelBar/PanelBar.SBM_PanelBar.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> 
        <div id="content"
            <telerik:RadSplitter ID="RadSplitter1" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                Width="100%" Height="100%" Orientation="Horizontal" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                BorderSize="0" BorderStyle="None" BorderWidth="0px" FullScreenMode="false"
                <telerik:RadPane ID="RadPane1" Scrolling="None" runat="server" Width="98%" Height="10%" 
                    BackColor="#A6DBFF" BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                    Vipin 
                </telerik:RadPane> 
                <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="100%" /> 
                <telerik:RadPane ID="RadPane2" Scrolling="None" runat="server" Width="98%" Height="90%" 
                    BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                    <telerik:RadSplitter ID="RadSplitter2" runat="server" LiveResize="true" ResizeMode="AdjacentPane" 
                        Width="100%" Orientation="Vertical" Skin="SBM_Spliter" EnableEmbeddedSkins="false" 
                        ResizeWithBrowserWindow="true" ResizeWithParentPane="true" SplitBarsSize="20" 
                        BorderSize="0" BorderStyle="None" BorderWidth="0px"
                        <telerik:RadPane ID="RadPane3" Scrolling="None" runat="server" Width="16%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane4" Scrolling="None" runat="server" Width="26%" Height="100%" 
                            BorderWidth="0px" BorderStyle="none" EnableEmbeddedBaseStylesheet="False"
                             
                        </telerik:RadPane> 
                        <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Both" Width="20px" 
                            Height="100%" /> 
                        <telerik:RadPane ID="RadPane5" Scrolling="None" runat="server" BorderWidth="0px" 
                            BorderStyle="none" EnableEmbeddedBaseStylesheet="False" CssClass="ApplyPosition"
                            <telerik:RadPanelBar ID="PanelBar_Scheduler" runat="server" ExpandMode="FullExpandedItem" 
                                Skin="SBM_PanelBar" Height="100%" Width="100%" AllowCollapseAllItems="true" EnableEmbeddedSkins="false"
                                <CollapseAnimation Type="InQuart" /> 
                                <Items> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="Calendar" 
                                        BorderStyle="None" BorderWidth="0px"
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="Calendar"
                                                <ItemTemplate> 
                                                    Vipin 
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="True" ImageUrl="Img/schedule.png" Text="Scheduler" 
                                        BorderStyle="None" BorderWidth="0px" > 
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="WeekScheduler"
                                                <ItemTemplate> 
                                                <div style="float:left; width: 100%; height:100%; background-color:Green; overflow:hidden;"
                                                    <telerik:RadScheduler ID="RadScheduler1" runat="server" DataEndField="End" DataKeyField="ID" 
                                                        DataStartField="Start" DataSubjectField="Subject" EnableEmbeddedSkins="false" 
                                                        SelectedView="MultiDayView" ShowAllDayRow="false" ShowNavigationPane="false" 
                                                        Skin="SBM_Scheduler" Height="100%"  > 
                                                        <MultiDayView ColumnHeaderDateFormat="D" NumberOfDays="2" UserSelectable="false"  /> 
                                                        <WeekView UserSelectable="false" /> 
                                                        <MonthView UserSelectable="false" /> 
                                                        <TimelineView UserSelectable="false" /> 
                                                        <DayView UserSelectable="false"  /> 
                                                    </telerik:RadScheduler></div
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                    <telerik:RadPanelItem Expanded="false" ImageUrl="Img/schedule.png" Text="To Do's" 
                                        BorderStyle="None" BorderWidth="0px" BackColor="RosyBrown"
                                        <Items> 
                                            <telerik:RadPanelItem runat="server" Value="TODO"
                                                <ItemTemplate> 
                                                    Vipin 
                                                </ItemTemplate> 
                                            </telerik:RadPanelItem> 
                                        </Items> 
                                    </telerik:RadPanelItem> 
                                </Items> 
                            </telerik:RadPanelBar> 
                        </telerik:RadPane> 
                    </telerik:RadSplitter> 
                </telerik:RadPane> 
            </telerik:RadSplitter> 
        </div> 
        <div id="footer"
            &nbsp; 
        </div> 
    </div> 
    </form> 
</body> 
</html> 
 




Thank You
Chinmay.
0
Paul
Telerik team
answered on 19 Jun 2009, 01:01 PM
Hello Fusion Outsourcing Software Pvt. Ltd.,

I think you've missed to include the additional styles in the head tag:

<style type="text/css">     
        .RadPanelBar .rpLevel1 .rpFirst     
        {     
            padding-top: 0 !important;     
            padding-bottom: 0 !important;     
            height: 100% !important;     
        }     
        .RadPanelBar .rpGroup .rpLink,     
        .RadPanelBar .rpGroup .rpTemplate     
        {     
            height: 100% !important;     
        }     
    </style>    
 


Greetings,
Paul
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.
0
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
answered on 21 Jun 2009, 06:10 AM

Hello Paul,

 

I have the additional tag you provided me with in my CSS, but no change seems to appear that extra scrollbar. The additional Tag helped Scheduler in occupying the full height of the Panelitem, but now there is an extra scrollbar. So can't track out where the problem is. I am providing the CSS & ASPX Code. Please have a look around & provide me with some solution.
CSS:

.RadPanelBar_SBM_PanelBar  
{  
    background#fff;  
}  
 
.RadPanelBar_SBM_PanelBar .rpRootGroup  
{  
    border-color#a7bac5 #a7bac5 #8cabc0;  
}  
 
.RadPanelBar_SBM_PanelBar .rpLink,  
.RadPanelBar_SBM_PanelBar .rpTemplate  
{  
    color#039;  
    fontnormal 12px/24px "Segoe UI"Arialsans-serif;  
}  
 
.RadPanelBar_SBM_PanelBar .rpLink  
{  
    background-imageurl('PanelBar/RootItemBg.gif');  
}  
 
.RadPanelBar_SBM_PanelBar .rpOut  
{  
    border-color#A6D9F4;  
}  
 
.RadPanelBar_SBM_PanelBar .rpLink  
{  
    background-color#a6d9f4;  
    border-color:  #E8F5FC;  
}  
 
.RadPanelBar_SBM_PanelBar .rpExpanded  
{  
    border-color#3C7FB1;  
}  
 
.RadPanelBar_SBM_PanelBar .rpFocused,  
.RadPanelBar_SBM_PanelBar .rpLink:hover  
{  
    color#0060ef;  
}  
 
.RadPanelBar_SBM_PanelBar .rpSelected,  
.RadPanelBar_SBM_PanelBar .rpSelected:hover  
{  
    background-color#90cbea;  
}  
 
/* <disabled items> */ 
.RadPanelBar_SBM_PanelBar .rpDisabled,  
.RadPanelBar_SBM_PanelBar .rpDisabled:hover  
{  
    color#bbb;  
}  
 
.RadPanelBar_SBM_PanelBar .rpDisabled:hover .rpOut  
{  
    border-color#A6D9F4;  
}  
/* </disabled items> */ 
 
/* <expand arrows> */ 
.RadPanelBar_SBM_PanelBar .rpExpandable .rpText,  
.RadPanelBar_SBM_PanelBar .rpExpanded .rpText  
{  
    background-colortransparent;  
    background-imageurl('PanelBar/Expandable.png');  
}  
/* </expand arrows> */ 
 
/* <subitems> */ 
.RadPanelBar_SBM_PanelBar .rpGroup  
{  
    background-color#fff;  
}  
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpTemplate  
{  
    color#000;  
    background-colortransparent;  
    background-imagenone;  
}  
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink:hover  
{  
    color#000;  
}  
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpOut  
{  
    background-colortransparent;  
    background-imageurl('PanelBar/SubItemStates.png');  
    background-repeatno-repeat;  
}  
 
 
/* <subitems (disabled)> */ 
.RadPanelBar_SBM_PanelBar .rpGroup .rpDisabled,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpDisabled:hover,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpDisabled:hover .rpOut  
{  
    background-imagenone;  
}  
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpDisabled,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpDisabled:hover  
{  
    color#bbb;  
    text-decorationnone;  
    background-color#fff;  
}  
/* </subitems (disabled)> */ 
 
/* <subitems> */ 
 
/* <background positioning> */ 
.RadPanelBar_SBM_PanelBar .rpLink,  
.RadPanelBar_SBM_PanelBar .rpExpanded  
{  
    background-position: 0 0;  
}  
 
.RadPanelBar_SBM_PanelBar .rpFocused,  
.RadPanelBar_SBM_PanelBar .rpLink:hover,  
.RadPanelBar_SBM_PanelBar .rpExpanded:hover  
{  
    background-position: 0 -200px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpSelected,  
.RadPanelBar_SBM_PanelBar .rpSelected:hover  
{  
    background-position: 0 -400px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpFirst .rpLink,  
.RadPanelBar_SBM_PanelBar .rpFirst .rpExpanded  
{  
    background-position: 0 -1px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpFirst .rpFocused,  
.RadPanelBar_SBM_PanelBar .rpFirst .rpLink:hover  
{  
    background-position: 0 -201px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpFirst .rpSelected,  
.RadPanelBar_SBM_PanelBar .rpFirst .rpSelected:hover  
{  
    background-position: 0 -401px;  
}  
 
/* <root items (disabled)> */ 
.RadPanelBar_SBM_PanelBar .rpDisabled:hover  
{  
    cursordefault;  
}  
 
.RadPanelBar_SBM_PanelBar .rpDisabled,  
.RadPanelBar_SBM_PanelBar .rpDisabled:hover,  
.RadPanelBar_SBM_PanelBar .rpDisabled:hover .rpOut  
{  
    background-position: 0 0;  
}  
/* </root items (disabled)> */ 
 
/*      <expand arrows> */ 
.RadPanelBar_SBM_PanelBar .rpExpandable .rpText,  
.RadPanelBar_SBM_PanelBar .rpExpanded .rpText  
{  
    padding-right20px;  
    background-repeatno-repeat;  
}  
 
.RadPanelBar_SBM_PanelBar_rtl .rpExpandable .rpText,  
.RadPanelBar_SBM_PanelBar_rtl .rpExpanded .rpText  
{  
    padding-left20px;  
}  
 
.RadPanelBar_SBM_PanelBar_rtl .rpGroup .rpText  
{  
    padding: 0 10px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpExpandable .rpText { background-position: 100% 0; }  
.RadPanelBar_SBM_PanelBar .rpExpanded .rpText { background-position: 100% -176px; }  
.RadPanelBar_SBM_PanelBar_rtl .rpExpandable .rpText { background-position: 0 0; }  
.RadPanelBar_SBM_PanelBar_rtl .rpExpanded .rpText { background-position: 0 -176px; }  
 
.RadPanelBar_SBM_PanelBar .rpExpandable.rpSelected .rpText,  
.RadPanelBar_SBM_PanelBar .rpExpandable.rpSelected:hover .rpText  
{  
    background-position: 100% -337px;  
}  
 
.RadPanelBar_SBM_PanelBar .rpExpanded.rpSelected .rpText,  
.RadPanelBar_SBM_PanelBar .rpExpanded.rpSelected:hover .rpText  
{  
    background-position: 100% -476px;  
}  
 
.RadPanelBar_SBM_PanelBar_rtl .rpExpandable.rpSelected .rpText,  
.RadPanelBar_SBM_PanelBar_rtl .rpExpandable.rpSelected:hover .rpText  
{  
    background-position: 0 -337px;  
}  
 
.RadPanelBar_SBM_PanelBar_rtl .rpExpanded.rpSelected .rpText,  
.RadPanelBar_SBM_PanelBar_rtl .rpExpanded.rpSelected:hover .rpText  
{  
    background-position: 0 -476px;  
}  
 
/*      </expand arrows> */ 
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink .rpOut { background-position: 0 200px; }  
 
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink:hover,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpFocused { background-position: 100% -22px; }  
.RadPanelBar_SBM_PanelBar .rpGroup .rpLink:hover .rpOut,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpFocused .rpOut { background-position: 0 0; }  
 
/*      <subitems (selected)> */ 
.RadPanelBar_SBM_PanelBar .rpGroup .rpSelected,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpSelected:hover { background-position: 100% -222pxbackground-colortransparent; }  
.RadPanelBar_SBM_PanelBar .rpGroup .rpSelected .rpOut,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }  
/*      </subitems (selected)> */ 
 
/*      <subitems (expand arrows)> */ 
.RadPanelBar_SBM_PanelBar .rpGroup .rpExpandable .rpText,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }  
.RadPanelBar_SBM_PanelBar .rpGroup .rpExpanded .rpText,  
.RadPanelBar_SBM_PanelBar .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }  
.RadPanelBar_SBM_PanelBar_rtl .rpGroup .rpExpandable .rpText,  
.RadPanelBar_SBM_PanelBar_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 0 -938px; }  
.RadPanelBar_SBM_PanelBar_rtl .rpGroup .rpExpanded .rpText,  
.RadPanelBar_SBM_PanelBar_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 0 -1078px; }  
/*      </subitems (expand arrows)> */ 
/* </background positioning> */ 
 .RadPanelBar_SBM_PanelBar .rpLevel1 .rpFirst    
        {    
            padding-top: 0 !important;    
            padding-bottom: 0 !important;    
            height: 100% !important;    
        }    
        .RadPanelBar_SBM_PanelBar .rpGroup .rpLink,    
        .RadPanelBar_SBM_PanelBar .rpGroup .rpTemplate    
        {    
            height: 100% !important;    
        }   

I am not able to paste the ASPX page. When i am trying to paste the ASPX Page here its showing popup "Some script is making IE to run slow"

ASPX code is same as last post. So please refer that.

Thanks,
Chinmay Sharma.
0
Paul
Telerik team
answered on 23 Jun 2009, 02:37 PM
Hello Fusion Outsourcing Software Pvt. Ltd.,

I know you have opened a support ticket on this problem - RAD Panel Bar Height Issue. Please use the mentioned support ticket to attach a simple running project that shows the problem(s) you have. There's no need to paste code in the tickets as attachments are allowed.

Attachments are not allowed in the forums due to security reasons.

Regards,
Paul
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.
Tags
PanelBar
Asked by
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Answers by
Paul
Telerik team
Fusion Outsourcing Software Pvt. Ltd.
Top achievements
Rank 1
Share this question
or