Programmatically setting Scheduler 'view type' using MVVM

[Jake]

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!

[Sayer]

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);

[Jake]

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();
});

[Sayer]

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!