Hi
In my Kendo Scheduler I am adding an item to the data array (simulated by button click function).
I am trying to update the view, but the event does not show up, how can I properly update the view / refresh the Scheduler so that the data is re-read?
Here is my example: http://dojo.telerik.com/uKUzI/2
Many thanks
9 Answers, 1 is accepted
Basically when you pass the data to the scheduler dataSource it parses the object inside it based on the current schema - that why if you need to insert items into the array after the widget initialization you should use the "add" method of the dataSource and pass parsed model.
Another option is to define dataSource "transport.read" option and pass a copy of the array to the success handler:
Regards,
Vladimir Iliev
Telerik
Rank 1
Hi Vladimir
Thank you for your update. I have updated my example to use the "add" method as specified in the documentation.
Do I need to run any "update" view method because my example does not show the added event yet?
http://dojo.telerik.com/AkIGO/13
I also tried defining the dataSource array beforehand and then using "add" like so http://dojo.telerik.com/iKEke
Thanks
As I mention early the events that you pass to the "add" method should be parsed. Also you should access the scheduler dataSource instead of creating new instance. Please check the updated example below:
Regards,
Vladimir Iliev
Telerik
Rank 1
Hi Vladimir,
I am using Kendo Scheduler with AngularJS. I have the same problem that I can't update the view/refresh the Scheduler when I add an data item in dataSource.
Here are two initial events, I bind them to the dataSource of $scope.schedulerOptions
$scope.tempEvents = [
{
id: 1,
title: 'Event1',
description: 'event1 Description',
start: new Date('2014/9/23'),
end: new Date('2014/9/23'),
isAllDay: true
},
{
id: 2,
title: 'Event3',
description: 'event2 Description',
start: new Date('2014/9/24'),
end: new Date('2014/9/24'),
isAllDay: true
}
];
$scope.schedulerOptions = {
date: new Date("2014/9/23"),
startTime: new Date("2014/9/23 07:00 AM"),
height: 600,
views: [
"day",
{ type: "workWeek", selected: true },
"week",
"month",
],
timezone: "Etc/UTC",
dataSource: {
data: $scope.tempEvents,
}
};
The two events show on the Scheduler.
Then, I click the Search button, in turn, it calls SearchCalendarInfo. In the SearchCalendarInfo method, I simply push a data item to the dataSource of $scope.schedulerOptions
$scope.SearchCalendarInfo = function () {
$scope.schedulerOptions.dataSource.data.push({
id: 4,
title: 'Ann Leave',
description: 'Leave Description',
start: new Date('2014/9/27'),
end: new Date('2014/9/27'),
isAllDay: true
});
}
But the new event is not showing on the Scheduler.
In HTML, the scheduler is defined as
<div kendo-scheduler k-options="schedulerOptions">
Could you help?
Thanks
Jin
To achieve the desired behavior in your scenario I would suggest to keep actual instance of the "SchedulerDataSource" attached to the scope - this way you can manipulate the data using it's API:
Regards,
Vladimir Iliev
Telerik
Rank 1
Thanks Vladimir, the data could bind to the scheduler.
But I get another problem. In $scope.SearchCalendarInfo function, do $scope.dataSource.add to add each data item the datasource seems very slow. Is there a way to build an array of data and assign to the $scope.dataSource at once to improve the performance?
Your help is appreciated!
Thanks
Jin
You can use the dataSource "data" method to do that - please check the example below:
Regards,
Vladimir Iliev
Telerik
Rank 1
Excuse my English...
Hello,
I tried your method:
Read: function (request) {
Var newData = JSON.parse (JSON.stringify (data));
Request.success (newData);
}
This works, the addition of item is displayed in the scheduler.
But there are still some errors when adding manual:
ERRORS:
An invalid form control with name = 'Title' is not focusable.
2DataScheduler: 1 An invalid form control with name = 'start' is not focusable.
2DataScheduler: 1 An invalid form control with name = 'end' is not focusable.
DataScheduler: 1 An invalid form control with name = 'IdVisite' is not focusable.
Then another point that also poses a problem,
Moving an item to a different date / time, create an error?
ERRORS:
Uncaught TypeError: Can not read property 'call' of undefined
At an Object. <Http://localhost.org/> (S (yp2vk4huyv4envhn2grqdtaf)) /Scripts/kendo/kendo.all.min.js:27:29766)
At Function.Deferred
...
For information, there is no property 'Call'
As a result of this error, the element disappears completely?
Another point, the last,
For eventTemplate: $ ("# EventTemplate") html (),
I display custom data, present in the source JSON and defined in the diagram,
The data is displayed correctly, but when moving, there is an error, which means that it does not know the property of a data item, then disappears.
Example of display data:
E.event.uid + e.slot.start + e.slot.end + e.event.title + e.event.visiteID + e.event.affaireID + e.event.description
Would you have the correction to the above problems?
Currently we use the trial version, but as soon as it will work as it suits us, the purchase will surely be effective.
Best regards.
Thomas
From the provided information it's not clear for us what might be the reason for the described behavior in question 1 and 2. That why could you please open a new support ticket and provide runable example (how to isolate issue in example) where the issue is reproduced? This would help us pinpoint the exact reason for the described behavior.
Regards,
Vladimir Iliev
Telerik by Progress