This is a migrated thread and some comments may be shown as answers.

Horizontal grouping not sizing correctly

5 Answers 113 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Gray
Top achievements
Rank 1
Gray asked on 02 Sep 2015, 12:07 PM

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

Sort by
0
Gray
Top achievements
Rank 1
answered on 02 Sep 2015, 12:28 PM

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
        }​

0
Gray
Top achievements
Rank 1
answered on 02 Sep 2015, 01:11 PM

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

0
Vladimir Iliev
Telerik team
answered on 04 Sep 2015, 09:24 AM
Hi Gray,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Gray
Top achievements
Rank 1
answered on 05 Sep 2015, 03:20 PM

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.     

 

0
Vladimir Iliev
Telerik team
answered on 08 Sep 2015, 06:55 AM
Hi Gray,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Scheduler
Asked by
Gray
Top achievements
Rank 1
Answers by
Gray
Top achievements
Rank 1
Vladimir Iliev
Telerik team
Share this question
or