Scroll event or vertical resource into view programmatically

[Casimodo]

Hi,

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?

Regards

Kasimier Buchcik

 

[Vladimir Iliev]

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:

• Scheduler: scroll to selected event in "Timeline" views

Regards,
Vladimir Iliev
Telerik

 

 

[Casimodo]

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;

    scheduler.dataSource.one("requestEnd", function (e) {

        if (e.type !== "read") return;

        scheduler.one("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.
                scheduler.select({
                    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.
                    scheduler.editEvent(eve);
                }

            }, 50);
        });
    });
});

Regards & thanks

Kasimier Buchcik