Rubber band scrolling problem with part of the day view

[Chris]

If you look at scheduler1.png, you'll see what the scheduler looks like when I'm not scrolling (it's so pretty!). However, when I start scrolling on the top or the bottom of the control, the times are offset from the content, as shown in scheduler2.png. Below is my angular initialization code. Thanks!

BTW, we're using this inside the new AppStudio (previous Icenium) and *loving* it. Keep up the good work!


<div id="scheduler" kendo-scheduler k-options="schedulerOptions"></div>

​$scope.schedulerOptions = {
startTime: new Date(kendo.toString($scope.today, 'd') + " 8:00 AM"),
endTime: new Date(kendo.toString($scope.today, 'd') + " 6:00 PM"),
views: ["day"],
editable: false,
dateHeaderTemplate: "",
footer: false,
height: 747,
majorTimeHeaderTemplate: kendo.template("<div class='schedule-tick'>#=kendo.toString(date, 'h')#<span>#=kendo.toString(date, 'tt')#</span></div>"),
minorTickCount: 4,
eventTemplate: $("#schedule-event-template").html(),
dataSource: $scope.appointmentDataSource,
  navigate: function (e) {
$scope.today = e.date;
var todaysDate = new Date();
if ($scope.today.setHours(0, 0, 0, 0) === todaysDate.setHours(0, 0, 0, 0)) {
$scope.isToday = true;
} else {
$scope.isToday = false;
}
$scope.$digest();
}
};

[Alexander Valchev]

Hi Chris,

I was not able to reproduce the same problem on this demo page. Please compare your current implementation with the one demonstrated in the example and try to upgrade the Kendo UI version in case you are using an outdated one. In case this does not help I would like to ask you to isolate the issue in a jsBin page which I can run and test locally. In addition please specify the device(s) and OS version that you are testing with. In this way I will be able to examine your case in details and assist you further.

Regards,
Alexander Valchev
Telerik

[Chris]

Thanks, Alex. I was able to repro my exact problem on that demo page. All I had to do was scroll the agenda with my finger (on a touch-enabled screen) and for a second before the app registers my touch as the intension to add a new appointment, it scrolls the right-hand-side of the agenda w/o scrolling the left-hand-side of the agenda. See the attached bugrepro.png to see the problem.

[Alexander Valchev]

Hello Chris,

Thank you for the detailed instructions. I was able to reproduce the behaviour. Actually this is expected and is caused by the way mobile kinetic scrolling works.
The effect occurs because the right-hand-side and the left-hand-side of the agenda are located in different containers.

Regards,
Alexander Valchev
Telerik

[Chris]

Maybe you expect it, but I think it looks terrible. Also, it works that way whether it's in "mobile" mode or not.

[Alexander Valchev]

Hi Chris,

We can suggest a workaround which will allow you to avoid the behavior. Please check this example.

The following code is used to disable the elastic scrolling effect:

dataBound: function() {
    var scroller = this.view()._touchScroller;

    if(scroller) {
        scroller.yinertia.elastic = false;
        scroller.pane.y.resistance = 0;
    }
}

Regards,
Alexander Valchev
Telerik

[Chris]

Excellent, Alex. That did the trick!