Splitter Height with RadScheduler

[Chris]

Hey,

I've got a RadSplitter with two panes, one left and one right.  The one on the right contains a RadScheduler.  There are some months in the RadScheduler that add an additional row of dates at the bottom, which increases the size it to be bigger than what is defined for my RadSplitter.  Is it possible to dynamically change the height of the Splitter to fit the size of my Pane with the RadScheduler?

[Chris]

Here's my HTML Code:

<telerik:RadSplitter ID="radContentSplitter" runat="server" Width="975" Height="570">
    <telerik:RadPane ID="radAllotmentPane" runat="server" Width="250">
       <!-- What is in this pane isn't really important for this problem -->
    </telerik:RadPane>
    <telerik:RadSplitBar ID="radSplitter" runat="server" CollapseMode="Forward" />
    <telerik:RadPane ID="radSchedulerPane" runat="server">
        <telerik:RadScheduler ID="radScheduler" runat="server" Skin="Office2007" SelectedView="MonthView"
             Width="100%" OverflowBehavior="Expand" ShowViewTabs="False"
             FirstDayOfWeek="Sunday" LastDayOfWeek="Saturday" DayStartTime="08:00:00" DayEndTime="18:00:00"
             DataKeyField="ID" DataSubjectField="Subject" DataStartField="Start" DataEndField="End"
             CustomeAttributeNames="ProjectId,Hours" EnableCustomAttributeEditing="true" >
             <MonthView VisibleAppointmentsPerDay="30" />
             <AppointmentContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="radSchedulerContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="Edit Entry" Value="EditEntry" />
                        <telerik:RadMenuItem Text="Delete Entry" Value="CommandDelete" />
                    </Items>
                </telerik:RadSchedulerContextMenu>
             </AppointmentContextMenus>
             <TimeSlotContextMenus>
                <telerik:RadSchedulerContextMenu runat="server" ID="radSchedulerEmptyContextMenu">
                    <Items>
                        <telerik:RadMenuItem Text="Add Vacation Day" Value="InsertVacation" />
                        <telerik:RadMenuItem Text="Add Training Day" Value="InsertTraining" />
                    </Items>
                </telerik:RadSchedulerContextMenu>
             </TimeSlotContextMenus>
        </telerik:RadScheduler>
    </telerik:RadPane>
</telerik:RadSplitter>

Is there a way to use the OverflowBehaviour="Expand" and also have a vertical scrollbar?  It works fine when I test it in IE8 and Firefox.  But when I try compatibility mode to check it in IE7, the Scheduler goes over top of the Splitter.

[Chris]

Here's an image as well of what it looks like in IE7.

[Tsvetie]

Hello Chris,
The splitter does not have the expand-with-content feature that you need. In case you want, you can implement it yourself using the client-side API of the control. Please refer to our Initially Resize the RadSplitter according to its content knowledgebase article for a code sample that will help you get started.

Regarding the problem with the scheduler showing outside of the boundaries of its parent pane - this is an IE bug that was fixed in IE8. For information how to fix it, please refer to our RadSplitter integration with relatively positioned elements article.

Kind regards,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Chris]

Thanks for the help.  That script to resize the splitter did work; however I do notice that there is a brief pause from when the splitter is it's initial size, then it resizes.  Every time after that it resizes fine.  Is there anyway we can resize the splitter on the server side?

[Tsvetie]

Hi Chris,
In case you find a way to calculate the offsetHeight of the content of the pane - yes, you can. However, as this depends on styles, JavaScript, etc., this will be impossible. What you can do, is check the height of the scheduler with the different settings, and use those fixed values server-side.

In case this is not an option, you can hide the splitter until you re-size it and then show it. For example:

<head runat="server">
    <title></title>
    <style type="text/css">
    .HideRadSplitter .RadSplitter
    {
        position:absolute;
        top:-9999px;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <telerik:RadSplitter ID="RadSplitter" runat="server" OnClientLoad="OnClientLoad" CssClass="HideRadSplitter">
        <telerik:RadPane ID="RadPane1" runat="server">
        </telerik:RadPane>
        <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Both">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="RadPane2" runat="server">
        </telerik:RadPane>
    </telerik:RadSplitter>
    <script type="text/javascript">
        function OnClientLoad(sender, args)
        {
            alert(1);// Code that re-sizes the splitter.

            Sys.UI.DomElement.removeCssClass(sender.get_element(), "HideRadSplitter");
            if($telerik.isIE)
            {
                sender.getContainerElement().style.position = "static";
            }
        }
    </script>
    </form>
</body>

Kind regards,
Tsvetie
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.