Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Horizontal Scroll

5 Answers 386 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Laurence
Top achievements
Rank 1
Laurence asked on 15 Sep 2014, 10:49 PM
Hi, Is there any way to enable horizontal scrolling to my Scheduler?

5 Answers, 1 is accepted

Sort by
0
Accepted
Georgi Krustev
Telerik team
answered on 16 Sep 2014, 10:23 AM
Hello Laurence,

You can enable horizontal scrolling using additional CSS code. Here is a Dojo demo that shows how to enable horizontal scrolling.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Mariappan
Top achievements
Rank 1
answered on 29 Sep 2014, 07:12 AM
Hi Georgi Krustev,

I am trying to implement horizontal scrolling in Scheduler control with ability to keep the timer column visible (freeze) when scrolling.  

Also, the demo you have shared is not loading in chrome. Please let us know what could be the problem.

Thanks
0
Georgi Krustev
Telerik team
answered on 29 Sep 2014, 10:28 AM
Hello Mariappan,

Locking of a particular day column in the MultiDay view (in any view in that matter) is not supported. 

I tested the link and it opens the demo correctly in Chrome. Could you try this one (fullscreen link to the demo)?

If you still cannot open it, then here is the source of the demo. Just paste in a '.html' file:
<!DOCTYPE html>
<html>
<head>
    <style>body { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title>Scheduler - horizontal scroll</title>
    <script src="http://code.jquery.com/jquery-1.9.1.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><script src="http://runner.telerik.io/edit-button.min.js"></script><script>snippInfo = { hash:'AQet',user:'ggkrustev',version:1,editOrigin: 'http://dojo.telerik.com/'}; editButtonHelper.createButton(snippInfo,document.body);</script>
 
    <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",
            "agenda"
        ],
        timezone: "Etc/UTC",
        dataSource: {
            batch: true,
            transport: {
                read: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings",
                    dataType: "jsonp"
                },
                update: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings/update",
                    dataType: "jsonp"
                },
                create: {
                    url: "http://demos.telerik.com/kendo-ui/service/meetings/create",
                    dataType: "jsonp"
                },
                destroy: {
                    url: "http://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", "Attendees"]
        },
        resources: [
            {
                field: "roomId",
                name: "Rooms",
                dataSource: [
                    { text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
                    { text: "Meeting Room 201", value: 2, color: "#f58a8a" }
                ],
                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>

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rogelio
Top achievements
Rank 1
answered on 06 Oct 2020, 05:55 PM
Hi there, 

I have a couple of questions. How do you set the horizontal scroll bar in this source code? and Is there a way to know if the horizontal scroll bar in the kendo content is present? ... I'm looking for a way to know if the horizontal scroll is enable in a kendo grid section but I have not found something and I was not able to inspect the element by google dev tools. Could you help me on this, please?
0
Martin
Telerik team
answered on 08 Oct 2020, 03:20 PM

Hello Rogelio,

The horizontal scrollbar is displayed by adding the additional CSS in the style tags. Regarding checking if a scrollbar is visible, you can refer to this stackoverflow thread on the same subject.

If you have any questions about the Grid, please open a new thread. As the current one is about the Scheduler, that would help us keep the communication clean and separate for the different components.

Regards,
Martin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

Tags
Scheduler
Asked by
Laurence
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Mariappan
Top achievements
Rank 1
Rogelio
Top achievements
Rank 1
Martin
Telerik team
Share this question
or