RadScheduler Dynamic Width

[don]

Dear Telerik,

On the MonthView of RadScheduler, I would like for the calendar to expand to fill the entire width of the user's browser window. If I leave the Width property empty, it works perfectly in IE, but in Firefox, all of the columns are super skinny, to the point where it is basically unreadable.

Am I doing something wrong to have it work in IE but not in Firefox? Of course, my preference is for it to have the same behavior in Firefox.

If that's not possible or will not be possible soon, do you have any quick suggestions on how to somehow get the width of the browser window and pass it back to the server to then set the width of the RadScheduler? If the user resized the window, the RadScheduler would not resize until the next postback, but that's at least a step in the right direction.

Thanks,

Don

[Peter]

Hi Don,

I am not sure why you experience this problem. RadScheduler with default settings should function exactly as you need it for both IE and Firefox. Do you have a live url or a project which exhibits the problem?



Best wishes,
Peter
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[don]

Hi Peter,

OK, that helps to know that it at least should work. With that in mind, I played with it a bit further and found that the issue was caused by having the scheduler inside table that otherwise did not have any other elements or attributes that determined its width. This reproduces the problem in Firefox (works fine in IE):

<table border=0>

<tr align=center>

<td>

<telerik:RadScheduler runat=server ID=rS SelectedView="MonthView" OverflowBehavior="Expand" ReadOnly="True" ShowHeader=false Skin="Default"></telerik:RadScheduler>

</td>

</tr>

</table>

This example obviously don't serve any real purpose, but in our application we have other rows in the table that center some other controls above and below the RadScheduler.

Now that I know this is the case, we can work around it, but I wanted you to know the cause.

Thanks,

Don

[Chuck Jabbour]

Is there a solution to this problem? Don needed a simple 100% width for RadScheduler so removing it from the table or not setting a width on the table worked for him. What if I want to simply put the RadScheduler in a cell with 75% width and in the cell to the right (25%) want to show other information. This works fine in IE, but not Firefox.

This is all I have in my RS declaration:

 

<telerik:RadScheduler ID="RadScheduler1" runat="server" AllowDelete="False"

 

 

AllowEdit="False" AllowInsert="False" DataEndField="MeetingDateImplicitEnd"

 

 

DataKeyField="RecordID" DataStartField="MeetingDateImplicit"

 

 

DataSubjectField="SubjectName" SelectedView="MonthView" Skin="Office2007"

 

 

Height="800px">

 

 

<weekview workdayendtime="23:00:00" workdaystarttime="00:00:00" />

 

 

<MonthView VisibleAppointmentsPerDay="10" />

 

 

<Localization AdvancedAllDayEvent="All day" />

 

 

<AdvancedForm DateFormat="M/d/yyyy" TimeFormat="h:mm tt" />

 

 

<dayview workdayendtime="23:00:00" workdaystarttime="00:00:00" />

 

 

<multidayview workdayendtime="23:00:00" workdaystarttime="00:00:00" />

 

 

</telerik:RadScheduler>

 

If I take it out of the table and set the width to 75%, it works well, except I still need to add information to 25% of the screen to the right.

[Peter]

Hi Chuck,

Please, try setting table-layout:fixed for the table that contains RadScheduler.

Kind regards,
Peter
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Chuck Jabbour]

Excellent! That worked. Thank you very much.

[Bill Battaglia]

Getting similar results and tried your latest, but that did not fix the issue. The RadScheduler should stretch out to fill the full area no matter the size of the browser window but it stops part of the way.

<table width="100%" cellpadding="0" cellspacing="0" border="0">

            <tr>

                <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%">

                        <tr>

                            <td height="40" width="10"></td>

                            <td class="txtSectionHeader">Calendar</td>

                            <td width="40" class="btnSections">

                                <asp:ImageButton ID="NewTimeIt" runat="server" ToolTip="New TimeIt"

                                    ImageUrl="~/Images/NewTimeIt.png" OnClientClick="javascript:OpenNewTimeItInfo(); return false;" /></td>

                            <td width="40" class="btnSections">

                                <asp:ImageButton ID="NewEvent" runat="server" ToolTip="New Event"

                                    ImageUrl="~/Images/NewEvent.png" OnClientClick="javascript:OpenNewEvent(); return false;" /></td>

                            <td width="200"></td>

                        </tr></table></td>

            </tr>

            <tr>

                <td>

                    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="table-layout: fixed">

                        <tr>

                            <td>

                                <asp:SqlDataSource ID="SqlDataSource1" runat="server"

                            ConnectionString="<%$ ConnectionStrings:ePonti %>" SelectCommand="SELECT DISTINCT ....">

                            <SelectParameters>

                                <asp:Parameter Name="ResourceID" />

                                <asp:SessionParameter Name="CompanyID" SessionField="CompanyID" />

                                <asp:Parameter Name="WOStartDate" />

                                <asp:Parameter Name="WOEndDate" />

                            </SelectParameters>

                        </asp:SqlDataSource>

                        <asp:HiddenField ID="hdnCompanyID" runat="server" />

                        <asp:UpdatePanel ID="UP1" runat="server">

                            <ContentTemplate>

                            <telerik:RadScheduler ID="RadScheduler1" runat="server" EditFormDateFormat="MM/dd/yyyy" DataDescriptionField="ToolTip"

                                DataEndField="TaskEndDate" DataKeyField="ID" DataSourceID="SqlDataSource1" DataStartField="TaskStartDate"

                                DataSubjectField="Subject" OverflowBehavior="Expand" Localization-HeaderMultiDay="Work Week"

                                OnNavigationComplete="RadScheduler1_NavigationComplete" Skin="Windows7" Height="500px" Width="1000"

                                OnClientRecurrenceActionDialogShowing="OnClientRecurrenceActionDialogShowing">

                                <AdvancedForm Modal="true" Width="100%" />

                                <TimelineView UserSelectable="false" />

                                </telerik:RadScheduler></ContentTemplate></asp:UpdatePanel></td>

                            <td valign="top" align="left" width="200">

                                <div style="overflow-y:scroll;height:460px;">

                                    <asp:CheckBoxList Height="40px" CssClass="gridAltFieldsInView" BorderColor="Black" BorderWidth="0px" ID="chkResourceList"

                                        runat="server" AutoPostBack="True" CellPadding="0" CellSpacing="5" RepeatColumns="1"></asp:CheckBoxList></div></td>

                </tr></table></td>

            </tr>

        </table>

[Peter]

Hello Bill,

Could you please try the suggestion from this troubleshooting topic and let me know if it helps?

Regards,
Peter
the Telerik team

[Bill Battaglia]

Peter,

This did not solve the issue, attached is a screen shot that will help illustrate.

Note: utilizing Telerik.Web.UI  v2011.1.413.40

Thanks,

Bill

[Peter]

Hello Bill,

I have noticed that you set Width="1000" for RadScheduler which will set this attribute in pixels. If you want RadScheduler to span the entire width of its holding container, please set Width="100%" (in percents).

Greetings,
Peter
the Telerik team

[Bill Battaglia]

Peter,

Tried that before and did the modifications again to test - setting both Width & AdvancedForm-Width:

<telerik:RadScheduler ID="RadScheduler1" runat="server" EditFormDateFormat="MM/dd/yyyy" DataDescriptionField="ToolTip"

DataEndField="TaskEndDate" DataKeyField="ID" DataSourceID="SqlDataSource1" DataStartField="TaskStartDate"

DataSubjectField="Subject" OverflowBehavior="Expand" Localization-HeaderMultiDay="Work Week"

OnNavigationComplete="RadScheduler1_NavigationComplete" Skin="Windows7" Height="500px" Width="100%"

OnClientRecurrenceActionDialogShowing="OnClientRecurrenceActionDialogShowing" AdvancedForm-Width="100%">

<TimelineView UserSelectable="false" />

</telerik:RadScheduler>

Best,

Bill

[Peter]

Hello Bill,

Were you able to achieve the desired result? With the test code you sent, setting Width="100%" stretched RadScheduler as per your requirement. How did it go at  your end?

Kind regards,
Peter
the Telerik team

[Bill Battaglia]

Found the issue, my coder psted a line in the code file setting the width, once I removed that it worked.
Thanks,

Bill