Is there a way to control the row height in the weekly view of the scheduler? I know you can control the number of minutes per row, and the time label row span, but if I am going to use this control in my application, I need to be able to shrink the size of the rows.
Is this possible? I havent seen it in any of the examples.
Thank you.
Is this possible? I havent seen it in any of the examples.
Thank you.
6 Answers, 1 is accepted
0
Hello Joseph,
Yes, there is a way to control the height of the rows. Please, try the following selectors:
Feel free to contact us if you have any questions.
All the best,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Yes, there is a way to control the height of the rows. Please, try the following selectors:
<style type="text/css"> |
.RadScheduler .rsContent .rsHoursTable th |
{ |
font-size:10px; |
height:15px; |
} |
.rsContent .rsContentTable .rsCell |
{ |
height:15px; |
} |
</style> |
Feel free to contact us if you have any questions.
All the best,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0
Accepted
Hello Joseph,
Actually, this solution will not work quite well under IE browser. Here is a better fix:
Greetings,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Actually, this solution will not work quite well under IE browser. Here is a better fix:
<style type="text/css"> |
.RadScheduler .rsContent .rsHoursTable th |
{ |
font-size:10px; |
line-height: 15px; |
height:15px; |
} |
.rsContent .rsContentTable .rsCell |
{ |
font-size:10px; |
line-height: 15px; |
height:15px; |
} |
</style> |
Greetings,
Peter
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
0

Prasanna
Top achievements
Rank 1
answered on 06 Dec 2012, 03:17 PM
Hello Peter,
The above solution doesn't work for me. I just tried the below code
$(".rsContentTable").height(document.documentElement.clientHeight - 200 + "px");
$(".rsContentWrapper").height(document.documentElement.clientHeight - 200 + "px");
$(".rsContentScrollArea").height(document.documentElement.clientHeight - 200 + "px");
var slotPerDay = $find("ctl00_ContentPlaceHolder1_rsBusinessHours").get_activeModel().get_slotsPerDay();
var rowHeight = (document.documentElement.clientHeight - 200) / slotPerDay;
for (id = 0; id < $(".rsAlt").length; id++) {
$(".rsAlt")[id].style.height = rowHeight + "px";
}
for (trID = 0; trID < $(".rsVerticalHeaderTable tr").length; trID++) {
$(".rsVerticalHeaderTable tr")[trID].style.height = rowHeight + "px";
}
for (trConID = 0; trConID < $(".rsContentTable tr").length; trConID++) {
$(".rsContentTable tr")[trConID].style.height = rowHeight + "px";
}
$find("ctl00_ContentPlaceHolder1_rsBusinessHours").repaint();
the row height of the scheduler changed but the appointment height doesn't changed.
Let me know the solution
Thanks in advance,
Prasanna
The above solution doesn't work for me. I just tried the below code
$(".rsContentTable").height(document.documentElement.clientHeight - 200 + "px");
$(".rsContentWrapper").height(document.documentElement.clientHeight - 200 + "px");
$(".rsContentScrollArea").height(document.documentElement.clientHeight - 200 + "px");
var slotPerDay = $find("ctl00_ContentPlaceHolder1_rsBusinessHours").get_activeModel().get_slotsPerDay();
var rowHeight = (document.documentElement.clientHeight - 200) / slotPerDay;
for (id = 0; id < $(".rsAlt").length; id++) {
$(".rsAlt")[id].style.height = rowHeight + "px";
}
for (trID = 0; trID < $(".rsVerticalHeaderTable tr").length; trID++) {
$(".rsVerticalHeaderTable tr")[trID].style.height = rowHeight + "px";
}
for (trConID = 0; trConID < $(".rsContentTable tr").length; trConID++) {
$(".rsContentTable tr")[trConID].style.height = rowHeight + "px";
}
$find("ctl00_ContentPlaceHolder1_rsBusinessHours").repaint();
the row height of the scheduler changed but the appointment height doesn't changed.
Let me know the solution
Thanks in advance,
Prasanna
0

Shinu
Top achievements
Rank 2
answered on 07 Dec 2012, 06:00 AM
Hi Prasanna,
Try setting the RowHeight property of RadScheduler to increase the height of the row.
ASPX:
Try overriding the default CSS as follows to increase the height of the appointment.
CSS:
Hope this helps.
Regards,
Shinu.
Try setting the RowHeight property of RadScheduler to increase the height of the row.
ASPX:
<
telerik:RadScheduler
ID
=
"RadScheduler1"
runat
=
"server"
RowHeight
=
"40px"
..... >
</
telerik:RadScheduler
>
Try overriding the default CSS as follows to increase the height of the appointment.
CSS:
<style type=
"text/css"
>
.RadScheduler .rsAptOut > .rsAptMid, .RadScheduler .rsAptMid > .rsAptIn, .RadScheduler .rsAptIn > .rsAptContent
{
height
:
30px
!important
;
}
</style>
Hope this helps.
Regards,
Shinu.
0

Prasanna
Top achievements
Rank 1
answered on 07 Dec 2012, 03:14 PM
Thanks for your quick replay. Its works fine for a single appointment but i have many appointments in different time.
what to do? Let me know
what to do? Let me know
0
Hello,
Since the appointment position and dimensions are calculated based on the timeslot, any change to the appointment height might cause unusual behavior. Therefore we recommend modifying the scheduler row height and this will change accordingly the appointment height property. This way you can avoid any appearance issues.
Regards,
Boyan Dimitrov
the Telerik team
Since the appointment position and dimensions are calculated based on the timeslot, any change to the appointment height might cause unusual behavior. Therefore we recommend modifying the scheduler row height and this will change accordingly the appointment height property. This way you can avoid any appearance issues.
Regards,
Boyan Dimitrov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.