Create KO Binding Handlers for kendo Scheduler Update / Re-Assign

Question

I'm using Knockout-kendo.js binding for Kendo Scheduler in my project.

In Scheduler i'm using Horizontal Grouping as well. So, here i have used DataSource and well as Resources with group.

I have declared my Variable like below:

monitorData = ko.observableArray(),

schedulerData = ko.observableArray(),

My Activate method:

activate = function (args) {
            getMonitorData ();
            getschedulerData (08, 09, 2014);
 },

Before completion of my Service call the activate method is getting returned. Here Observable array should work. But actually its not getting assign the data to my scheduler. Even though there is data in observable array.

My Scheduler Code:

        <div class="scheduler">
            <div id="scheduler" data-bind="kendoScheduler:
            {                    
                date: new Date(),
                startTime: new Date('2014/6/13 12:15 AM'),
                endTime: new Date('2014/6/13 11:54 PM'),
                height: containerHeight,
                views: [{ type: 'day', selected: true, majorTick: 15 }], //'week', //'month', //'Agenda'
                editable: false,
                useKOTemplates: true,
                eventTemplate: $('#event-template').html(), 
                allDaySlot: false,
                timezone: 'Etc/UTC',
                footer: { command: false },
                dataSource: schedulerData(),
                group: { resources: ['Monitors'] },
                resources: [{ field: 'scheduleId', name: 'Monitors', dataSource: monitorData (), title: 'Monitors' }],
                dataBound: function () { $('.k-floatwrap ul li.k-nav-current').hide(); }
            }">
            </div>
        </div>

If i Hard code the Data to the variable when its getting initialized, its getting worked. So there is no time interval also so the data is getting assigned to the scheduler.

Like below:

processMonitors = processMonitorMapper(monitors), // Functio without service call - returns hard code data

schedulerData = schedulerDataMapper(rawData), // // Functio without service call - returns hard code data

I came to know the observable array data will not be understand by the Kendo scheduler if its assigned after initialization of initial data. So i tried the ko.toJS. This is also not helped to me.

To avoid this kind of problem. i have tried the ko.bindhandlers for scheduler.

Code:

ko.bindingHandlers.kendoScheduler = {
            init: function (element) {
                var sch = $(element).data("kendoScheduler");
                console.log("Scheduler Initiated");
            },
            update: function (element, valueAccessor) {
                var value = ko.utils.unwrapObservable(valueAccessor());
                //var scheduler = $(element).data("kendoScheduler");
                //if (scheduler != null) {
                //if (value.dataSource != null && value.dataSource.length > 0 && value.resources[0] != null && value.resources[0].dataSource.length > 0) {
                //    $(element).kendoScheduler({ dataSource: value.dataSource, resources: value.resources });
                //}

                var dataSource = new kendo.data.SchedulerDataSource({
                    data: value
                });
                $(element).data("kendoScheduler").setDataSource(dataSource)
                //}
                console.log("Scheduler Updated");
            }
        };

But the problem is the above code also not working. Kindly help me to address this above problem.

Additional Info : Also i need to change the data source & resource of scheduler, each day wise. Date will be selected via the kendo calendar. I need to call the service each day selection wise. So that new datasource need to be assigned to Kendo Scheduler.

How do i assign the kendo scheduler data source & resource dynamically. If i assign to the observable array its not working / not getting assigned as i said above.

How do i write the ko.bindingHandlers for kendoScheduler Update / Init ?

RajeshKdev RajeshKdev · Accepted Answer · 2014-09-15T13:48:41

No Need to write Ko BindHandlers.

I just assigned my dataSource from getschedulerData() method. Also when i was loading first time the Call was async: false. Now i made the call sync. So, that the activate method will not be returned until otherwise the call get finished.

The below are the code i have used to replace the DataSource:

                var scheduler = $('#scheduler').data('kendoScheduler');
                if (scheduler != null) {
                    var dataSource = new kendo.data.SchedulerDataSource({
                        data: schedulerData()
                    });
                    scheduler.setDataSource(dataSource);
                }

But i don't know why and not sure why observable array didn't that work :(

Reference : Kendo Scheduler - Click Drop Down Menus Check it out - Configuration, Fields, Methods, Events :)

Create KO Binding Handlers for kendo Scheduler Update / Re-Assign

1 Answers