Scheduler Zoom in/out effect

2 posts, 0 answers
  1. Srinath
    Srinath avatar
    1 posts
    Member since:
    Nov 2020

    Posted 20 Nov 2020 Link to this post

    I have a slider where one can increase the zoom in/out with the help of the slider. whenever the user increases the zoom as of now now I am changing the width of this table("k-scheduler-table") dynamically in the scheduler view. In total there are 4 tables with such class but I am changing only the two tables width dynamically. When I do this I am refreshing my timeline through code and it works without any problem. but the data which is there inside the timeline with a specific time. for instance consider a task from 6am to 6:30am. Now after increasing the zoom task remains at some other timeline rather than at 6am-6:30am. and if I use scheduler.refresh() then my width which I have setted dynamically for the table classes is no longer and zoom effect is gone. I need an idea what can i do.

    1-)Help me by refreshing the task to the current time-zone(only task-time-zone not the entire scheduler so that the zoom remains same)
    2-)Or else refresh the scheduler and somehow I should pass the two table classes width dynamically

    You can find the problem in the attached image


  2. Aleksandar
    Admin
    Aleksandar avatar
    285 posts

    Posted 25 Nov 2020 Link to this post

    Hello Srinath,

    As the Scheduler does not provide zooming functionality and without any code shared I cannot be sure I can be of much help. Note that the Scheduler uses complex logic to render the grid table and to calculate the positioning of the events so indeed changing the scale of some of the tables might indeed lead to the observed behavior. 

    What I can suggest is reviewing this thread, where a similar issue is discussed, where Dorian has shared a possible approach to handling the scenario: https://www.telerik.com/forums/scheduler-view-in-single-page-with-zoom-in-and-zoom-out-feature

    I can also suggest considering the use of the zoom effect, if this matches your scenario:

    $(".k-event").hover(function() {
              kendo.fx(this).zoom("in").startValue(1).endValue(1.5).play();
            }, function() {
              kendo.fx(this).zoom("out").endValue(1).startValue(1.5).play();
            });

    Here is a sample demonstrating the above. Hover over an event so it zooms.

    Regards,
    Aleksandar
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top