Horizontal Scroll

6 posts, 1 answers
  1. Laurence
    Laurence avatar
    9 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. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 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!
     
  3. 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
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3747 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!
     
  5. Rogelio
    Rogelio avatar
    1 posts
    Member since:
    Jul 2019

    Posted 06 Oct 2020 in reply to Georgi Krustev Link to this post

    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?
  6. Martin
    Admin
    Martin avatar
    295 posts

    Posted 08 Oct 2020 Link to this post

    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).

Back to Top