Event changes length while moving

6 posts, 1 answers
  1. Tim Fargo
    Tim Fargo avatar
    12 posts
    Member since:
    Sep 2008

    Posted 06 Nov 2015 Link to this post

    Let's say I have an event that goes from 9:00-10:00, and takes up 2 slots on the scheduler. When I drag that event to a different time, the faded image (while dragging) extends 3 slots, and appears to display over 8:30-10:00, but it will show 9:00-10:00 on the event, and when I release it does in fact save at 9:00-10:00.

     I don't think there is really anything too crazy about the properties of my grid, so I'm curious if this is something that has happened before that someone might be able to assist with? Here is the code for my grid just in case:

     

    var scheduler = $("#scheduler").kendoScheduler({
        date: start,
        startTime: start,
        endTime: end,
        height: 435,
        width: 1310,
        editable: {
            template: $("#editor").html(),
            destroy: false,
            window: {
                title: "Edit Task"
            }
        },
        footer: false,
        dataBound: function (e) {
            CreateDropArea(this);
            SetColors(e);
        },
        views: [
            { type: "timeline", majorTick: 60, columnWidth: 50, eventHeight: 40, selected: true },
            { type: "timelineWeek", majorTick: 60, columnWidth: 50, eventHeight: 40 }
        ],
        timezone: "America/Phoenix",
        group: {
            resources: ["Assigned"],
            orientation: "vertical"
        },
        resources: [
            {
                field: "AssignedTo",
                name: "Assigned",
                dataSource: {
                    transport: {
                        read: function(options) {
                            var resources = GetResources();
                            options.success(resources);
                        }
                    }
                },
                title: "Assigned To"
            }
        ],
        dataSource: {
            batch: true,
            transport: {
                read: function (options) {
                    var meetings = GetMeetings();
                    options.success(meetings);
                },
                update: function (options) {
                    UpdateMeeting(options.data.models);
                },
                create: function (options) {
                    CreateMeeting(options.data.models);
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models) };
                    }
                }
            },
            schema: {
                model: {
                    id: "meetingId",
                    fields: {
                        meetingId: { from: "MeetingId", type: "number" },
                        title: { from: "Title", defaultValue: "No title", validation: { required: true } },
                        start: { type: "date", from: "Start" },
                        end: { type: "date", from: "End" },
                        startTimezone: { from: "StartTimezone" },
                        endTimezone: { from: "EndTimezone" },
                        description: { from: "Description" },
                        isAllDay: { type: "boolean", from: "IsAllDay" }
                    }
                }
            }
        }
    }).data("kendoScheduler");

  2. Tim Fargo
    Tim Fargo avatar
    12 posts
    Member since:
    Sep 2008

    Posted 09 Nov 2015 in reply to Tim Fargo Link to this post

    I've been able to temporarily "fix" my issue by adjusting the "left" and "width" style properties of $(".k-event-drag-hint") on the move event of the Scheduler, although I don't feel like I should need to do this. Is it maybe an issue with timezones, or how my dates are formatted?
  3. Kendo UI is VS 2017 Ready
  4. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 11 Nov 2015 Link to this post

    Hi Tim,

    Indeed, the described resize behavior is not expected and something wrong happens with the widget in this case. I tried to replicate the issue on our end, but to no avail. Could you tried the demo and let me know whether I am missing something? The could be related to the used timezone and local DST change, but this is just guessing. In order to find the real cause of the issue, we will need to replicate it locally. Any assistance on this matter will be greatly appreciated.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Tim Fargo
    Tim Fargo avatar
    12 posts
    Member since:
    Sep 2008

    Posted 08 Jan Link to this post

    I was able to fix the issue last time I was looking at this (can't remember how though!) and now I am creating another scheduler that is much more straight forward, but it is happening again. This time I created a very small simple sample so that you can see the behavior, not sure what the issue is. In this particular example I'm not even using timezones, as I want the dates to be displayed in the user's current timezone. When you drag the event, you'll see that the hover image spans the space of 1.5 hours instead of 1 (the length of the event.

    For some reason the styling is weird on the "today" view of the sample, but if you switch to yesterday (Jan 7th @ 9am Phoenix time to be exact) you'll see the event that I have created. Not worried about the styling issue since it is working fine in my actual project, but please note the size difference when dragging. Thanks!

  6. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 12 Jan Link to this post

    Hello Tim,

    The styling is due to the "today styling", which is applied when rendered is today.

    The incorrectly sized hint comes from the startTime/endTime option values. The include milliseconds, which confuses the slots creation and hence the drag is broken. You will need to define dates that has milliseconds equal to 0. Check the modified file.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Tim Fargo
    Tim Fargo avatar
    12 posts
    Member since:
    Sep 2008

    Posted 12 Jan in reply to Georgi Krustev Link to this post

    That was it, thank you! Glad I finally know what the cause of this is so I can avoid it from here on out.
Back to Top
Kendo UI is VS 2017 Ready