Cutomize k-event-drag-hint when moving

4 posts, 0 answers
  1. Jason
    Jason avatar
    5 posts
    Member since:
    Dec 2011

    Posted 10 May 2017 Link to this post

    Hi,

    I'm trying to change the background of the "k-event-drag-hint" div when the user is moving an event on top of another.

     

    function onEventMoved(e) {
        if (roomIsOccupied(e.start, e.end, e.event, e.resources)) {
            $(".k-event-drag-hint").find('div').css('background', 'blue');
            e.preventDefault();
            return;
        }
        $(".k-event-drag-hint").find('div').css('background', 'red');
    }

     

    When I randomly move an event I can see the green background BUT when roomIsOccupied returns true, my code seems to have no effect (background is not red).

    >> If i remove the e.preventDefault() then the background turns to blue. 

     

    Any idea on how i can fix this issue? 

     

    Thx

    Seb

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 11 May 2017 Link to this post

    Hello Seb,

    I have already answered to your question in the Support ticket thread, that you have opened on the same topic. In case you have any further questions, I would suggest you to continue the discussion there.

    Regards,
    Veselin Tsvetanov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Dov
    Dov avatar
    2 posts
    Member since:
    Nov 2016

    Posted 04 Sep 2018 in reply to Veselin Tsvetanov Link to this post

    Hi,

    Is it possible to see the answer ?

    thanks

  4. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1201 posts

    Posted 04 Sep 2018 Link to this post

    Hello Dov,

    Here is the answer to the Jason's question:

    In order to achieve the desired I have modified the move event handler in the following way:
    move: function(e) {
        if (roomIsOccupied(e.start, e.end, e.event, e.resources)) {
            $(".k-event-drag-hint").find('div').css('background', 'blue');
            //e.preventDefault();
            return;
        }
     
     $(".k-event-drag-hint").find('div').css('background', 'red');
    },

    As you will notice, I have commented out the e.preventDefault() , which is not needed. The reason is that the move event will not perform any action on the event data itself, so there is actually nothing to be prevented.

    Here you will find a Dojo sample implementing the above.

    Regards,
    Veselin Tsvetanov
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top