How to refresh and reload kendo UI scheduler

[Lilan]

Hello, 

 I want to refresh and reload kendo UI scheduler with new data after it was initialized.  Please find configuration as below. 

 <div id="schedulerTimeLine" kendo-scheduler k-options="schedulerTimeLineOptions"></div>

$scope.schedulerTimeLineOptions was set when the page is loaded and then I want to change the configurations of $scope.schedulerTimeLineOptions later and I will update the scope. So even after I updated $scope.schedulerTimeLineOptions scheduler doesn't load new data.

So I want to refresh and reload the kendo UI scheduler which I could not find a solution. 

 

Please Help

Thanks, 

Lilan

[Vladimir Iliev]

Hi Lilan,

According to this help article if you need to update the widget dataSource data through the scope than you should wrap it in Observable array before binding it to the widget. For your convenience I created small example which shows how the desired behavior can be achieved:

• Scheduler: updating the dataSource using angular scope

Regards,
Vladimir Iliev
Telerik

 

 

[Lilan]

Dear Vladimir , 

Thanks a lot for your update and actually what I needed is lets say, I have a button call "Reset Resources", when the loading time there will be 11 resources("Priest" -please see the code in dojo) in scheduler and when you click, It will change the scheduler starting date and reload the resources ("Priests" and "color")  with newly added color and priest in the resources list. 

Please find sample application in Dojo. If you could modify this and give me a direction will be a great help.

 

Thanks, 

Lilan

 

 

 

[Vladimir Iliev]

Hi Lilan,

As starting point you can use the following "reset resources" function for the "Priests" resource:

resource data:

$scope.priestsData = new kendo.data.ObservableArray([{"text":"Demo  Prest"......

resource definition:

resources: [{
    field: "priest",
    name: "Priests",
    dataSource: $scope.priestsData,
    multiple: true,
    title: "Priests"

reset resources:

$scope.resetResources = function () {
    $scope.priestsData.push({text: "NEW PRIEST", value: "11111", OrderIndex: 222222});
    var scheduler = $("[data-role=scheduler]").getKendoScheduler();
    //reload current view
    scheduler.view(scheduler.view().name);
};

Also here can be found the updated example.

Regards,
Vladimir Iliev
Telerik