Programmatically setting Scheduler 'view type' using MVVM

4 posts, 1 answers
  1. Jake
    Jake avatar
    5 posts
    Member since:
    Apr 2017

    Posted 17 May 2017 Link to this post

    I'm building a Kendo Scheduler using the MVVM methodology. I find that a lot of the configuration options, listed here: http://docs.telerik.com/kendo-ui/api/javascript/ui/scheduler#methods-view, are difficult to achieve via the MVVM way. One of the things I'm attempting to achieve is change the scheduler view from week to month when a button is clicked. Yes, I know this support comes out of the box when a Kendo scheduler is initialized, but due to design and requirements, customization is needed. This is what I have:

     

    HTML:

    <div id="scheduler-container">
        <div class="scheduler-toolbar">
            <div class="button-container" data-bind="events: { click: onClick }">
                <button class="btn btn-default view-btn" value="month">Month</button>
                <button class="btn btn-default view-btn" value="week">Week</button>
            </div>
        </div>
        <div class="scheduler"
             data-role="scheduler"
             data-views="['month', 'week']"
        ></div>
    </div>

     

     

    JS:

    var schedulerModel = kendo.observable({
        onClick: function(e) {
            /*  change view here. is it possible?  */
        }
    });
     
    $(document).ready(function() {
        kendo.bind($("#scheduler-container"), schedulerModel);
    });

     

    Any help would be greatly appreciated! Thanks!

  2. Answer
    Sayer
    Sayer avatar
    16 posts
    Member since:
    May 2016

    Posted 17 May 2017 in reply to Jake Link to this post

    Have you tried scheduler.view(valueOfButton)

    the scheduler.view() function will change the view to what you pass into it, depending on if you specified it as a view for the scheduler. If 'scheduler' is not a global value of your scheduler, then you should be able to access the scheduler instance from e. Or do $('.scheduler').data('kendoScheduler).view(value);

  3. Jake
    Jake avatar
    5 posts
    Member since:
    Apr 2017

    Posted 17 May 2017 in reply to Sayer Link to this post

    I'm doing something like this now and its working:

     

    var scheduler = null;
     
    var schedulerModel = kendo.observable({
        init: function() {
            kendo.bind($(".scheduler-container"), this);
     
            $("#scheduler").kendoScheduler({
                views: ["month", "week"]
            });
     
            scheduler = $("#scheduler").data('kendoScheduler');
        },
        changeView: function(e) {
            scheduler.view(e.target.value);
        }
    });
     
    $(document).ready(function() {
        schedulerModel.init();
    });
  4. Sayer
    Sayer avatar
    16 posts
    Member since:
    May 2016

    Posted 17 May 2017 in reply to Jake Link to this post

    Glad you got it working. I forgot that the 'e' in this case would lead back to the button, not the scheduler haha, so you wouldn't be able to access the scheduler through e :P. But can easily access the value of the button!
Back to Top