Rubber band scrolling problem with part of the day view

7 posts, 0 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Jun 2012

    Posted 27 Jan 2014 Link to this post

    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();
    }
    };
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Jan 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    5 posts
    Member since:
    Jun 2012

    Posted 01 Feb 2014 in reply to Alexander Valchev Link to this post

    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.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 05 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Chris
    Chris avatar
    5 posts
    Member since:
    Jun 2012

    Posted 05 Feb 2014 in reply to Alexander Valchev Link to this post

    Maybe you expect it, but I think it looks terrible. Also, it works that way whether it's in "mobile" mode or not.
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 06 Feb 2014 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Chris
    Chris avatar
    5 posts
    Member since:
    Jun 2012

    Posted 06 Feb 2014 in reply to Alexander Valchev Link to this post

    Excellent, Alex. That did the trick!
Back to Top
Kendo UI is VS 2017 Ready