Horizontal Scroll

4 posts, 1 answers
  1. Laurence
    Laurence avatar
    8 posts
    Member since:
    May 2008

    Posted 15 Sep 2014 Link to this post

    Hi, Is there any way to enable horizontal scrolling to my Scheduler?
  2.
  3. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3724 posts

    Posted 16 Sep 2014 Link to this post

    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!
     
  5. Mariappan
    Mariappan avatar
    3 posts
    Member since:
    Sep 2014

    Posted 29 Sep 2014 in reply to Georgi Krustev Link to this post

    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
  7. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3724 posts

    Posted 29 Sep 2014 Link to this post

    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!
     
  8.
Back to Top