Rank 1
I am not sure why id field is not getting populated. Please refer to code below.
It does add event which shows up on Scheduer and if I double-click the event it opens-up the edit window with fields correctly populated. If I select "Save" or "Delete", everything works fine but selecting "Cancel" will remove event. Seems like id field is not getting populated but I can't figure out what am I doing wrong..
<!DOCTYPE html>
<html lang="en">
<head>
<link href='../css/kendo.common-bootstrap.css' rel='stylesheet'>
<link href='../css/kendo.flat.css' rel='stylesheet'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
</head>
<body>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2014/01/06"),
dataSource: {
schema: {
model: {
id: "id",
fields: {
id: {type: "number"},
start: {type: "date"},
end: {type: "date"},
title: {field: "Title"},
description: {field: "Description"}
}
}
}
}
});
scheduler = $("#scheduler").data("kendoScheduler");
scheduler.dataSource.add({
id: 1,
start: new Date("2014/01/06 10:30"),
end: new Date("2014/01/06 11:30"),
title: "test",
description: "test"
});
scheduler.view(scheduler.view().name);
</script>
</body>
</html>
12 Answers, 1 is accepted
This behavior is expected, because clicking the cancel button reverts all changes. In this case however, the array containing the pristine data is empty, so the event disappears. I would recommend configuring the dataSource.transport correctly and calling the dataSource.sync method after the new event was added through dataSource.add. Additionally, if a dataSource item has an ID the Update method will be called, and if the ID is empty - the Create method will be called when the sync occurs.
Regards,
Alexander Popov
Telerik
Rank 1
dataSource initialized with ARRAY
Array contains items with ID
I open existing event and press Cancel
Oooops... event disappeared... so expected
Would you please share some code snippets or a Dojo example that we can examine?
Regards,
Alexander Popov
Telerik
Rank 1
Hello Alexander,
This doesn't sound like something expected, take a look at your demo:
http://demos.telerik.com/kendo-ui/scheduler/restriction
Add an event and save it, after, re-edit and click on cancel.
Why the event disappear?
The demo illustrates how to restrict certain actions and uses mock-up data for that purpose. The Scheduler is not configured to perform actual CRUD operations, hence the disappearing events. This is related to the lack of DataSource transport. I would recommend checking basic usage demo instead and the Scheduler documentation.
Regards,
Alexander Popov
Telerik
Rank 1
Hi Alexander,
Yes, I know what the demo illustrates, but I mentioned that to illustrate my point of view.
I tested many of your demos and for local data array this problem remains.
This is related to the lack of DataSource transport, ok but when this is bind to remote service, as specified in the doc, no?
And what about local array with local DataSource? There's no transport configured.
In your demos and documentations, the focus is on DataSource transport with remote services or I missed something.
Regards,
joseph
I am afraid that your last post is unclear. Do you need any further assistance with a case of yours? If this is so, then please open a support ticket that includes an example of the problem you are facing. Thank you in advance.
Regards,
Petyo
Telerik
Rank 1
My case doesn't matter, I try to understand how to manage local javascript data array in your demos.
And what I see it's:
When a new event is added in the scheduler, we can't re-edit it, otherwise, on cancellation of edit window, it's removed.
After investigation, events are added to the _data property of the scheduler.
In use with a datasource transport when saved, it's added to _pristinedata property of the scheduler, and all work fine.
But with local data array and without datasource transport the event isn't never added to the _pristinedata.
That's all I have to say about that. natively the scheduler doesn't add event correctly in local data.
joseph
Your observation is correct. The widget (the DataSource in particular) is designed to keep the newly created models/events when they are synced. The models are considered synced when they have a unique valid ID values. In other cases, the events are consided temporary and will be removed when cancelChanges is called. This is exactly what happens when "Cancel" button is clicked.
I would suggest you examine the Editing fundamentals help topic, which explains how the editing functionality is accomplished in Kendo UI widgets:
Basically, in this case you will need to update the Ids on create. Here is a simple Dojo demo that demonstrates one possible approach:
Regards,
Georgi Krustev
Telerik
Rank 2
Iron
Iron
Iron
Hey Georgi,
I am having this same issue but in my case I cannot use a data source. My scheduler is bound to a list in my page model using the following:
.BindTo(Model.Events)
I am using a template and the edit event as follows:
<script type="text/x-kendo-template" id="SchedulerEditTemplate">
<div class="k-edit-form-container">
<div class="k-edit-label"><label for="title">Title</label></div>
<div data-container-for="title" class="k-edit-field">
<label>#: title #</label>
</div>
<div class="k-edit-label"><label for="start">Start</label></div>
<div data-container-for="start" class="k-edit-field">
<label>#: kendo.toString(start, "ddd, MMM dd, yyyy h:mm tt") #</label>
</div>
<div class="k-edit-label">
<label for="end">End</label>
</div>
<div data-container-for="end" class="k-edit-field">
<label>#: kendo.toString(end, "ddd, MMM dd, yyyy h:mm tt") #</label>
</div>
<div class="k-edit-label"><label for="description">Description</label></div>
<div data-container-for="description" class="k-edit-field">
<label>#: description #</label>
</div>
</div>
</script>
function HideButtons() {
$(".k-edit-buttons.k-state-default").hide();
}
...
.Events(events => events.Edit("HideButtons"))
...To be honest, I don't even want to edit the event. I just want to display the event details. Is there an alternative so that my event doesn't disappear from the scheduler when the edit window is closed?
Hi Luke,
If you need to only display the content of the EditorTemplate but not allow the user to update the data I would suggest you in the edit event handler of the Scheduler find the needed elements and components and disable them. For example, in the snipet below it is demonstrated how the title and the DateTimePickers can be disabled.
function editHandler(e){
e.container.find('input').attr('disabled', 'disabled')
var dtp = [...e.container.find('[data-role="datetimepicker"]')]
dtp.forEach(e => $(e).data('kendoDateTimePicker').enable(false))
$(".k-edit-buttons").hide();
},This is demonstrated in the Dojo linked here where all the fields in the template are disabled and the edit buttons are hidden.
I hope you will find the suggestion helpful.
Regards,
Neli
Rank 2
Iron
Iron
Iron
Hello Neli,
Thank you for the comment. Unfortunately, your suggestion doesn't solve the problem. The event still disappears from the scheduler when I close the popup.
My next approach is to disable editing and to bind my own click event to the "events" in the scheduler. I will open my own modal on click to display the details. Do you have an example for this?
I look forward to hearing from you,
Luke
Hi Luke,
could you please take a look at the form thread linekd below where the disappearing of the events is discussed and check if the provided infromation will be helpful in your scenairo as well:
Regards,
Neli
Rank 2
Iron
Iron
Iron
Hello Neli,
I looked over the forum post you sent but I'm not sure how I would set the model if I'm binding to local data and not using a data source.
I decided to go a different route since there doesn't appear to be any logical way to prevent the disappearing events in this scenario. I chose to bind an on-click event to the events in the scheduler using the data bound handler. Then I use a kendo window to show the event details instead of using the built in scheduler popup for editing. Here is what it looks like in case someone else needs it.
<!-- Modal/Kendo-Window -->
@(Html.Kendo().Window()
.Name("Modal")
.Visible(false)
.Draggable()
.Title("Event")
.Actions(actions => actions.Pin().Close())
.Modal(true)
.Content(@<text>
// This was originally the structure I was using in the scheduler edit template but it's altered for the k-window
<div class="k-edit-form-container">
<div class="k-edit-label"><label for="title">Title</label></div>
<div data-container-for="title" class="k-edit-field">
<label id="title"></label>
</div>
<div class="k-edit-label"><label for="start">Start</label></div>
<div data-container-for="start" class="k-edit-field">
<label id="start"></label>
</div>
<div class="k-edit-label">
<label for="end">End</label>
</div>
<div data-container-for="end" class="k-edit-field">
<label id="end"></label>
</div>
<div class="k-edit-label"><label for="description">Description</label></div>
<div data-container-for="description" class="k-edit-field">
<label id="description"></label>
</div>
</div>
</text>)
)
// In the scheduler
...
.Events(events => events.DataBound("DataBound"))
...
// Data bound handler JS
function DataBound(e) {
$(".k-event-actions,.k-resize-handle").hide();
$(".k-event").on("click", function(e) {
e.preventDefault();
var uid = $(e.currentTarget).closest(".k-event").data("uid");
var scheduler = $("#reservationEventsScheduler").data("kendoScheduler");
var event = scheduler.occurrenceByUid(uid);
$("#title").text(event.FacilityDesc);
$("#start").text(event.start.toShortDateString());
$("#end").text(event.end.toShortDateString());
$("#description").text(event.description);
$("#Modal").data("kendoWindow").center().open();
});
}
I see you are eligible for Priority Support and therefore have opened a Support thread to continue the discussion of the issue there.
Please let me know to post the results of our discussion here as well, if you think it is of interest of the larger community.
Rank 1
Hello Georgi,
Thank you for your demo, it helped me understand things better.
Now it is clear to use local data array, we need to use also a datasource transport.
Many thanks for your support.
joseph
Rank 1
Hello,
I have the same problem on my side.
When I want to edit an event and decide to cancel or close the pop-up, it removes the event.
I noticed that if I decide to save at the time of editing, or if I create a new event, the cancel or close button (for the event read when the page loads) is no longer deleted, and the "delete" button appears while it was missing in the pop-up. On the other hand, my new event always suffers this deletion.
I read posts including this one hoping to find help. Here we are talking about "transport and dataSource" but it seems to me that everything is ok in my file.
Unless I'm mistaken, here is my current file:
Thank you for you precious help.
Rank 1
My problem is solved!
This method worked for me:
http://dojo.telerik.com/@ggkrustev/oliX
Thank you Georgi ;)