Scroll event or vertical resource into view programmatically

3 posts, 0 answers
  1. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 19 Feb 2016 Link to this post


    we're using a custom TimelineWeekView with vertical resources - representing people. Adding events is done by dragging & dropping a visual onto a day-column. An event is then created for a pre-selected person on the column's day. Then we sync the data-source, reload the data-source and finally obtain the newly added event and select it programmatically.

    Now, how to scroll that event into view? Apparently, just selecting the event programmatically does not scroll it into view. Since the event is located in the person-resource's row, we would actually like to scroll to that resource's row.

    How can we scroll an event or a vertical resource into view programmatically in this scenario?


    Kasimier Buchcik


  2. Vladimir Iliev
    Vladimir Iliev avatar
    2190 posts

    Posted 23 Feb 2016 Link to this post

    Hi Kasimier,

    Currently scrolling to the selected event is not supported in the "Timeline" views and custom solution would be needed. For example you can utilize the "change" event of the Scheduler to scroll to the selected event manually:

    Vladimir Iliev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Casimodo
    Casimodo avatar
    71 posts
    Member since:
    Mar 2015

    Posted 02 Mar 2016 in reply to Vladimir Iliev Link to this post

    Hi Vladimir,

    thanks for the response. I didn't stop poking at it and found out that I can scroll to my event.

    Basically what we needed was to set the resources info on the select options: resources: { PersonId: personId }

    Also note that our scheduler uses the internal scrolling of the scheduler.

    Works fine now. Here's the snippet:

    // Save the event.
    scheduler.dataSource.sync().then(function () {
        // Show notification
        setTimeout(function () { notify(notificationMessage) });
        // Find the local event by uid, because, at this point, the ID is not set for the newly create ScheduleEvent entity.
        var eve = scheduler.dataSource.getByUid(uid);
        if (!eve) return;
        // NOTE: After a every sync we always automatically reload the scheduler elsewhere,
        // so now we need to attach to the reload request end event.
        var id = eve.Id;
    "requestEnd", function (e) {
            if (e.type !== "read") return;
  "dataBound", function (e) {
                // At this point the server has sent back an added event entity with a valid ID.
                // Find the event by ID.
                eve = scheduler.dataSource.get(id);
                if (!eve) return;
                // Select and focus
                setTimeout(function () {
                    // Select the time range and resource slot.
                        start: eve.start,
                        end: eve.end,
                        isAllDay: false,
                        resources: { PersonId: personId }
                    // Fire the mousedown event in order to select this specific event.
                    scheduler.element.find("[data-uid='" + eve.uid + "']").trigger("mousedown");
                    if (schedulerViewModel.schedulerOptions.isOpenEditorAfterDropEnabled) {
                        // Open event editor view.
                }, 50);

    Regards & thanks

    Kasimier Buchcik

Back to Top