I was not able to set the auto height alignment for Custom appointment in the RadScheduler.
In my scenario,
1. I'm Using Telerik AJAX UI Q2 2011 and Dot.net 4.0 Framework. (i'm not in any position to this configuration)
2. I'm using Custom Appointment Template (Height 90px x Width 130px) and it must show without any freezing/shrink as exact dimension.
3. I want to have Dynamic Cell alignment in scheduler hence i don't want to set the row height and column width in the scheduler control when i bind datasource. B'coz If i set these values RowHeight="90" ColumnWidth="130" all the cells allotted with the same dimension. Here if i have no events on particular hours i don't want to see that cell has more space. please refer screenshot for more information.
4. Here i give you the code i used. Almost we have using this scheduler only to show events/appointments, we don't need to create appointments and any other edit modal functionality (just read only functionality)
<telerik:RadScheduler runat="server" ID="eventCalendar" Skin="Web20" ShowAllDayRow="false" RowHeight="90"
ColumnWidth="130" DayView-ShowResourceHeaders="false"
AllowDelete="false" AllowInsert="false" AllowEdit="false" AdvancedForm-Modal="false"
AdvancedForm-Enabled="false" AppointmentStyleMode="Auto" DayView-ReadOnly="true"
WeekView-ReadOnly="true" MonthView-ReadOnly="true" TimelineView-ReadOnly="true" OnNavigationComplete="SchedulerNavigating"
ReadOnly="true" Height="600px" Width="775px" OverflowBehavior="Expand" CustomAttributeNames="DisplayStartTime,EventRecurrenceId, EventColor, DisplayEndTime,
StartDate,EndDate,DisplayPermitName,DisplayFacilityVisibility,DisplayDayViewGroupOrder,
DisplayClientVisibility,DisplayResourceVisibility,Id, EventColor
IsEditableEvent,DisplayCalendarTime,IsHoliday,IsRecurrence,ExpectedAttendance"
DataStartField="StartDate" EnableDatePicker="true"
EnableEmbeddedSkins="true" DataDescriptionField="EventColor" MonthView-GroupingDirection="Horizontal"
DataEndField="EndDate" DataKeyField="Id" DataRecurrenceParentKeyField="EventRecurrenceId" WeekView-EnableExactTimeRendering="true"
DayView-ShowHoursColumn="true" DataRecurrenceField="EventRecurrenceId" FirstDayOfWeek="Sunday"
LastDayOfWeek="Saturday" DataSubjectField="DisplayPermitName"
WeekView-GroupingDirection="Horizontal" OnAppointmentDataBound="eventCalendar_AppointmentDataBound" >
<ExportSettings OpenInNewWindow="true" FileName="SchedulerExport">
<Pdf PageTitle="Schedule" Author="Telerik" Creator="Telerik" Title="Schedule" />
</ExportSettings>
<%--<ResourceTypes>
<telerik:ResourceType AllowMultipleValues="true" KeyField="DisplayResourceName" Name="Resource" TextField="DisplayResourceName" ForeignKeyField="DisplayResourceName" />
</ResourceTypes>--%>
<%--TimelineView-NumberOfSlots="7"--%>
<%--daystarttime="08:00:00" dayendtime="23:00:00" DayStartTime="08:00:00" DayEndTime="18:00:00"--%>
<AppointmentTemplate>
<asp:Panel ID="appPanel" runat="server" Width="130" Height="130" style="min-heightL: 120px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td id="divColorChange" runat="server" style="width: 5px; min-width: 5px; max-width: 10px !important;">
<div width="100%">
</div>
</td>
<td id="divApp" runat="server">
<%--CustomAttributeNames="StartTime,EndTime,SessionDate,DisplayPermitName,StartDate,DisplayClientVisibility,DisplayResourceVisibility,DisplayFacilityVisibility,EndDate,ID,DisplayPermitVisibility,DisplayFacilityName,DisplayResourceName,DisplayClientName,Event_ID,DisplayRoomNumber"--%>
<div class="AlignCenter">
<p style="width: 95%">
<asp:Image ID="imageRecurrenceIcon" runat="server" Visible='<%# Convert.ToBoolean(Eval("IsRecurrence")) %>' style="float: right;"
ImageUrl="~/Images/Recurrence_icon.png" />
<asp:LinkButton runat="server" ID="lblDisplayPermitName" Visible='<%# Convert.ToBoolean(Eval("IsEditableEvent")) %>'
OnClick="RedirectToEventMaintenance" Style="font-weight: bold; color: Black; word-wrap: break-word; font-size: 10px;" CommandArgument='<%# Eval("Id") + "~" + Eval("StartDate")%>'>
<%# Eval("DisplayPermitName")%>
</asp:LinkButton>
<asp:Label ID="labelPermitName" Visible='<%# !Convert.ToBoolean(Eval("IsEditableEvent")) %>'
Style="font-weight: bold; color: Black; word-wrap: width: 100%; break-word; font-size: 10px;"
runat="server" Text='<%# Eval("DisplayPermitName")%>' CssClass="FontBold"></asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblStartTime" Style="font-weight: normal; word-wrap: break-word;
color: Black; font-size: 9px; text-align: left; float: left;">
<%# Eval("DisplayCalendarTime")%></asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayClientTypeName" Style="font-weight: normal;
word-wrap: break-word; color: Black; font-size: 9px; width: 100%; text-align: left;
float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayClientVisibility")) %>'>
<%# Eval("DisplayClientName")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayFacilityName" Style="font-weight: normal;
color: Black; font-size: 9px; word-wrap: break-word; width: 100%; float: left;
float: left; text-align: left; float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayFacilityVisibility")) %>'>
<%# Eval("DisplayFacilityname")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayResourceName" Style="font-weight: normal;
color: Black; font-size: 9px; word-wrap: break-word; width: 100%; text-align: left;
float: left;">
<%# Eval("DisplayResourceName")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:LinkButton ID="linkButtonMore" Visible='<%# !Convert.ToBoolean(Eval("IsHoliday")) %>'
Style="font-weight: bold; color: Black; font-size: 9px; text-align: left; float: left;" runat="server"
OnClientClick="javascript:return false;" Text="More"></asp:LinkButton>
</p>
<asp:HiddenField ID="hiddenFieldIsEditable" runat="server" Value='<%# Eval("DisplayIsEditableEvent")%>' />
</div>
</td>
</tr>
</table>
</asp:Panel>
</AppointmentTemplate>
</telerik:RadScheduler>
5. All i want is in Day View mode, if any hours not utilized for any events, it supposed to not occupy any space, but still i want to show the hours timeline (my client preferred to show working hours even there is no events to show).
6. I was not able to attach my style sheet here, but really i am sure they didn't create any impact on this issue. If still it required let me know i will send in an email.
7. Actually i need a solution as similar to this issue http://www.telerik.com/community/forums/aspnet-ajax/scheduler/timeline-view-vertical-header-does-not-line-up-with-appoints.aspx
Thanks,
Ilayaraja
In my scenario,
1. I'm Using Telerik AJAX UI Q2 2011 and Dot.net 4.0 Framework. (i'm not in any position to this configuration)
2. I'm using Custom Appointment Template (Height 90px x Width 130px) and it must show without any freezing/shrink as exact dimension.
3. I want to have Dynamic Cell alignment in scheduler hence i don't want to set the row height and column width in the scheduler control when i bind datasource. B'coz If i set these values RowHeight="90" ColumnWidth="130" all the cells allotted with the same dimension. Here if i have no events on particular hours i don't want to see that cell has more space. please refer screenshot for more information.
4. Here i give you the code i used. Almost we have using this scheduler only to show events/appointments, we don't need to create appointments and any other edit modal functionality (just read only functionality)
<telerik:RadScheduler runat="server" ID="eventCalendar" Skin="Web20" ShowAllDayRow="false" RowHeight="90"
ColumnWidth="130" DayView-ShowResourceHeaders="false"
AllowDelete="false" AllowInsert="false" AllowEdit="false" AdvancedForm-Modal="false"
AdvancedForm-Enabled="false" AppointmentStyleMode="Auto" DayView-ReadOnly="true"
WeekView-ReadOnly="true" MonthView-ReadOnly="true" TimelineView-ReadOnly="true" OnNavigationComplete="SchedulerNavigating"
ReadOnly="true" Height="600px" Width="775px" OverflowBehavior="Expand" CustomAttributeNames="DisplayStartTime,EventRecurrenceId, EventColor, DisplayEndTime,
StartDate,EndDate,DisplayPermitName,DisplayFacilityVisibility,DisplayDayViewGroupOrder,
DisplayClientVisibility,DisplayResourceVisibility,Id, EventColor
IsEditableEvent,DisplayCalendarTime,IsHoliday,IsRecurrence,ExpectedAttendance"
DataStartField="StartDate" EnableDatePicker="true"
EnableEmbeddedSkins="true" DataDescriptionField="EventColor" MonthView-GroupingDirection="Horizontal"
DataEndField="EndDate" DataKeyField="Id" DataRecurrenceParentKeyField="EventRecurrenceId" WeekView-EnableExactTimeRendering="true"
DayView-ShowHoursColumn="true" DataRecurrenceField="EventRecurrenceId" FirstDayOfWeek="Sunday"
LastDayOfWeek="Saturday" DataSubjectField="DisplayPermitName"
WeekView-GroupingDirection="Horizontal" OnAppointmentDataBound="eventCalendar_AppointmentDataBound" >
<ExportSettings OpenInNewWindow="true" FileName="SchedulerExport">
<Pdf PageTitle="Schedule" Author="Telerik" Creator="Telerik" Title="Schedule" />
</ExportSettings>
<%--<ResourceTypes>
<telerik:ResourceType AllowMultipleValues="true" KeyField="DisplayResourceName" Name="Resource" TextField="DisplayResourceName" ForeignKeyField="DisplayResourceName" />
</ResourceTypes>--%>
<%--TimelineView-NumberOfSlots="7"--%>
<%--daystarttime="08:00:00" dayendtime="23:00:00" DayStartTime="08:00:00" DayEndTime="18:00:00"--%>
<AppointmentTemplate>
<asp:Panel ID="appPanel" runat="server" Width="130" Height="130" style="min-heightL: 120px;">
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="100%">
<tr>
<td id="divColorChange" runat="server" style="width: 5px; min-width: 5px; max-width: 10px !important;">
<div width="100%">
</div>
</td>
<td id="divApp" runat="server">
<%--CustomAttributeNames="StartTime,EndTime,SessionDate,DisplayPermitName,StartDate,DisplayClientVisibility,DisplayResourceVisibility,DisplayFacilityVisibility,EndDate,ID,DisplayPermitVisibility,DisplayFacilityName,DisplayResourceName,DisplayClientName,Event_ID,DisplayRoomNumber"--%>
<div class="AlignCenter">
<p style="width: 95%">
<asp:Image ID="imageRecurrenceIcon" runat="server" Visible='<%# Convert.ToBoolean(Eval("IsRecurrence")) %>' style="float: right;"
ImageUrl="~/Images/Recurrence_icon.png" />
<asp:LinkButton runat="server" ID="lblDisplayPermitName" Visible='<%# Convert.ToBoolean(Eval("IsEditableEvent")) %>'
OnClick="RedirectToEventMaintenance" Style="font-weight: bold; color: Black; word-wrap: break-word; font-size: 10px;" CommandArgument='<%# Eval("Id") + "~" + Eval("StartDate")%>'>
<%# Eval("DisplayPermitName")%>
</asp:LinkButton>
<asp:Label ID="labelPermitName" Visible='<%# !Convert.ToBoolean(Eval("IsEditableEvent")) %>'
Style="font-weight: bold; color: Black; word-wrap: width: 100%; break-word; font-size: 10px;"
runat="server" Text='<%# Eval("DisplayPermitName")%>' CssClass="FontBold"></asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblStartTime" Style="font-weight: normal; word-wrap: break-word;
color: Black; font-size: 9px; text-align: left; float: left;">
<%# Eval("DisplayCalendarTime")%></asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayClientTypeName" Style="font-weight: normal;
word-wrap: break-word; color: Black; font-size: 9px; width: 100%; text-align: left;
float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayClientVisibility")) %>'>
<%# Eval("DisplayClientName")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayFacilityName" Style="font-weight: normal;
color: Black; font-size: 9px; word-wrap: break-word; width: 100%; float: left;
float: left; text-align: left; float: left;" Visible='<%# Convert.ToBoolean(Eval("DisplayFacilityVisibility")) %>'>
<%# Eval("DisplayFacilityname")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:Label runat="server" ID="lblDisplayResourceName" Style="font-weight: normal;
color: Black; font-size: 9px; word-wrap: break-word; width: 100%; text-align: left;
float: left;">
<%# Eval("DisplayResourceName")%>
</asp:Label>
</p>
<p style="width: 95%">
<asp:LinkButton ID="linkButtonMore" Visible='<%# !Convert.ToBoolean(Eval("IsHoliday")) %>'
Style="font-weight: bold; color: Black; font-size: 9px; text-align: left; float: left;" runat="server"
OnClientClick="javascript:return false;" Text="More"></asp:LinkButton>
</p>
<asp:HiddenField ID="hiddenFieldIsEditable" runat="server" Value='<%# Eval("DisplayIsEditableEvent")%>' />
</div>
</td>
</tr>
</table>
</asp:Panel>
</AppointmentTemplate>
</telerik:RadScheduler>
5. All i want is in Day View mode, if any hours not utilized for any events, it supposed to not occupy any space, but still i want to show the hours timeline (my client preferred to show working hours even there is no events to show).
6. I was not able to attach my style sheet here, but really i am sure they didn't create any impact on this issue. If still it required let me know i will send in an email.
7. Actually i need a solution as similar to this issue http://www.telerik.com/community/forums/aspnet-ajax/scheduler/timeline-view-vertical-header-does-not-line-up-with-appoints.aspx
Thanks,
Ilayaraja