New to Kendo UI for jQueryStart a free 30-day trial

Apply Simultaneous Scroll to Schedulers

Environment

ProductProgress® Kendo UI® Scheduler for jQuery
Operating SystemWindows 10 64bit
BrowserGoogle Chrome
Browser Version61.0.3163.100

Description

I am trying to use two Kendo UI Schedulers in a timeline view to display the related data.

How can I control the scroll bar of the Schedulers so that when I scroll one of the Schedulers, the other Scheduler scrolls accordingly?

Solution

  1. Hook the scroll event with jQuery by getting a reference to the element with the .k-scheduler-content class in the Schedulers.
  2. To set it to the other Scheduler, acquire the scrollLeft value of the scrolled element.
  3. To avoid recursion when you use the scrollLeft method, make sure that the scroll events are unbound.
html
<div id="scheduler"></div>

<div id="scheduler1"></div>

<script>
    $("#scheduler").kendoScheduler({
        date: new Date("2013/6/6"),
        allDaySlot: false,
        views: [
            "day",
            {
                type: "timeline",
                selected: true
            }
        ],
        dataSource: [{
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview"
        }]
    });

    $("#scheduler1").kendoScheduler({
        date: new Date("2013/6/6"),
        allDaySlot: false,
        views: [
            "day",
            {
                type: "timeline",
                selected: true
            }
        ],
        dataSource: [{
            id: 1,
            start: new Date("2013/6/6 08:00 AM"),
            end: new Date("2013/6/6 09:00 AM"),
            title: "Interview"
        }]
    });

    $(document).ready(function(e) {
        $("#scheduler .k-scheduler-content, #scheduler1 .k-scheduler-content").on('scroll', sync);
    })

    var sync = function() {
        var $elements = $("#scheduler .k-scheduler-content, #scheduler1 .k-scheduler-content");
        var $other = $elements.not(this).off('scroll');
        var other = $other.get(0);
        other.scrollLeft = this.scrollLeft;
        setTimeout(function() {
            $other.on('scroll', sync);
        }, 10);
    }
</script>
In this article
EnvironmentDescriptionSolution
Not finding the help you need?
Contact Support