Hi all,
I use the Kendo UI Scheduler for simple agenda management. What I need to achieve is that a user can click in the scheduler and select a slot (basic behaviour). I don't want a popup to showup but I just need to respond to the selecting of a timeslot in the scheduler. I can use the change event but that one is fired multiple times when I select a few hours for example.
Is there a way to attach events like mouseup or dragend to respond to this user behaviour?
I would be thrilled to solve this.
Riccardo Becker
I use the Kendo UI Scheduler for simple agenda management. What I need to achieve is that a user can click in the scheduler and select a slot (basic behaviour). I don't want a popup to showup but I just need to respond to the selecting of a timeslot in the scheduler. I can use the change event but that one is fired multiple times when I select a few hours for example.
Is there a way to attach events like mouseup or dragend to respond to this user behaviour?
I would be thrilled to solve this.
Riccardo Becker
8 Answers, 1 is accepted
0
Hi Riccardo,
You could still use the change event and check if there are any events selected:
function scheduler_change(e) {
if (e.events.length) {
console.log(e.events[0].title)
}
}
Here is a live demo: http://trykendoui.telerik.com/@korchev/abUZ
You can use only jQuery and add a handler for the ".k-event" class:
$("#scheduler").on("click", ".k-event", function(e) {
var scheduler = $("#scheduler").data("kendoScheduler");
var event = scheduler.dataSource.getByUid($(e.currentTarget).attr("data-uid"));
alert(event.title);
});
Here is another demo: http://trykendoui.telerik.com/@korchev/Idug
Regards,
Atanas Korchev
Telerik
You could still use the change event and check if there are any events selected:
function scheduler_change(e) {
if (e.events.length) {
console.log(e.events[0].title)
}
}
Here is a live demo: http://trykendoui.telerik.com/@korchev/abUZ
You can use only jQuery and add a handler for the ".k-event" class:
$("#scheduler").on("click", ".k-event", function(e) {
var scheduler = $("#scheduler").data("kendoScheduler");
var event = scheduler.dataSource.getByUid($(e.currentTarget).attr("data-uid"));
alert(event.title);
});
Here is another demo: http://trykendoui.telerik.com/@korchev/Idug
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Riccardo
Top achievements
Rank 1
answered on 02 Jul 2014, 08:57 AM
Thanks for your reply and sample!
The sample only calls on change when I select an already existing event. My requirement is that a user can simple select some slots in the scheduler and I save this selection.
regards,
Riccardo
The sample only calls on change when I select an already existing event. My requirement is that a user can simple select some slots in the scheduler and I save this selection.
regards,
Riccardo
0
Hi Riccardo,
The change event is fired when the user selects slots too. They are available in e.slots.
Regards,
Atanas Korchev
Telerik
The change event is fired when the user selects slots too. They are available in e.slots.
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Riccardo
Top achievements
Rank 1
answered on 02 Jul 2014, 10:39 AM
Oh yes I see now. Selected 5 slots raise 5 events :-) Is there a way to detect when the user releases the mousebutton (dragend e.g.?). Because using the change event would cause multiple updates in the database and I only need to do that after the mouse was released.
regards
regards
0
Hi,
There is no such event right now. Perhaps you can use the mouseup event in a way similar to using the click event in my second example.
Regards,
Atanas Korchev
Telerik
There is no such event right now. Perhaps you can use the mouseup event in a way similar to using the click event in my second example.
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Riccardo
Top achievements
Rank 1
answered on 02 Jul 2014, 11:53 AM
$("#scheduler").on("mouseup", ".k-event", function(e) {
alert('here mouseup!')
});
this doesn't seem to work. Am I missing something?
thanks
alert('here mouseup!')
});
this doesn't seem to work. Am I missing something?
thanks
0
Hi,
For the free slots you will need the following code:
$("#scheduler").on("mouseup", ".k-scheduler-content td", function(e) {
alert("up");
});
Regards,
Atanas Korchev
Telerik
For the free slots you will need the following code:
$("#scheduler").on("mouseup", ".k-scheduler-content td", function(e) {
alert("up");
});
Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Riccardo
Top achievements
Rank 1
answered on 03 Jul 2014, 07:30 AM
Thanks, works like a charm now!
regards,
Riccardo
regards,
Riccardo