I want to use Horizontal Grouping on the scheduler, but I find as the number of resources grows, the cell widths are resized smaller to fit all columns into the view.
In the code below I have added 10 meeting rooms to show my problem.
How can I set a minimum width of the resource column so that all the event cells are readable?
I have added a horizontal scrollbar in my example, but I still need to set a min width.
Thanks
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/scheduler/resources-grouping-horizontal">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2015.2.805/styles/kendo.silver.min.css" />
<script src="//kendo.cdn.telerik.com/2015.2.805/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.all.min.js"></script>
<script src="//kendo.cdn.telerik.com/2015.2.805/js/kendo.timezones.min.js"></script>
<style>
.k-scheduler-layout {
table-layout: fixed;
}
.k-scheduler-layout > tbody > tr > td:first-child
{
width: 80px;
}
.k-scheduler-content .k-scheduler-table,
.k-scheduler-header .k-scheduler-table
{
width: 2000px
}
</style>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script>
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [
"day",
{ type: "week", selected: true },
"month",
"timeline"
],
timezone: "Etc/UTC",
dataSource: {
batch: true,
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "//demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "//demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "//demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"]
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" },
{ text: "Meeting Room 303", value: 3, color: "#6eb3fa" },
{ text: "Meeting Room 404", value: 4, color: "#f58a8a" },
{ text: "Meeting Room 501", value: 5, color: "#6eb3fa" },
{ text: "Meeting Room 601", value: 6, color: "#f58a8a" },
{ text: "Meeting Room 703", value: 7, color: "#6eb3fa" },
{ text: "Meeting Room 80", value: 8, color: "#6eb3fa" },
{ text: "Meeting Room 901", value: 9, color: "#f58a8a" },
{ text: "Meeting Room 113", value: 10, color: "#6eb3fa" },
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>
</body>
</html>
5 Answers, 1 is accepted
Rank 1
I forgot to say this is a problem seen in the month and week views.
If i set the scroll width to 4000 then it fixes the problem in week and month view, but the day view is then too wide. Is there a way to control this?
.k-scheduler-header .k-scheduler-table
{
width: 4000px
}
Rank 1
Ideally what I would like to do is:
1) Set the group column width per view (day/week/month) so that they are easily readable.
2) The horizontal scroll bar would then resize dynamically to accommodate the scheduler width
Or if that is not possible, is there a way to set the horizontal scroll for each view?
(The width of the scheduler depends on the number of resources being shown horizontally and the current view,)
Thanks
The desired behavior would require dynamically update the CSS styles related to the column width - this could be achieved using the "dataBound" event of the Scheduler. For your convenience I created small custom demo which you can use as baseline:
Regards,
Vladimir Iliev
Telerik
Rank 1
Thanks that works well, though I'm surprised how complicated the solution is.
I am using AngularJS, so was wondering if there was a way to change the width by applying different styles e.g. div < class="tablewidth-{{view-name}}" >
so when the view-name variable changed the corresponding style is applied to the table.
The desired behavior is not supported out of the box and custom solution would be needed. For example you can extend the desired view and override the methods responsible for the rendering in order to add the desired CSS classes to the elements. For example of extending the scheduler build-in views you can check this demo.
Regards,
Vladimir Iliev
Telerik