How can I add my own custom button to the Scheduler?
I'd like a simple 'Add new event' button, and ideally I'd like to place it in the footer instead of the 'Show business hours' button which I don't need. If not possible then in the header bar next to the views selector would be fine.
The button would then launch my already-existing custom editor template for the add/edit form.
Is this possible?
13 Answers, 1 is accepted
You can add custom buttons to the footer using for example the "dataBound" event of the Scheduler as demonstrated below:
Regards,
Vladimir Iliev
Telerik
Thanks Vladimir, I'll take a look.
Could you check the link though, it doesn't appear to be correct.
Thanks,
I updated the link and now it points the the correct resource.
Regards,
Vladimir Iliev
Telerik
Hi Vladimir
Great! That example gets me the button. However, rather than the alert() function, how do I get the button to launch the custom editor template? This is what my 'editable' node looks like:
, editable: {
template: $("##addEditPopup").html()
}
So when the new button is pressed I want it to mimic the action as if the user had double-clicked on the scheduler itself and launch #addEditPopup.
Actually, in a little more detail...
The 'editable' node looks like this:
, editable: {
template: $("##addEditPopup").html()
, destroy: false
, window: {
open: loadJSOnWindowLaunch
, title: "Reservation request"
}
}
So, in fact I need the new button to mimic the entire action that happens when the user double-clicks the scheduler and the 'editable' node is actioned.
To achieve the desired behavior you can simply call the "addEvent" method of the Scheduler:
Regards,
Vladimir Iliev
Telerik
Hi Vladimir
Thanks, that seems to work pretty well.
The next issue is that whenever the button is clicked, and the custom editor template is launched, the button itself doubles-up, ie. you can now see it rendered twice in the footer bar. And when you close the window there are then three of them(!) And this behaviour also occurs when launching the pop-up in the traditional way by double-clicking the scheduler.
How do I prevent this?
Vladimir,
This is something I want to implement but there is an issue. Try to resize the page and watch what happens... the button is recreated each time... basically adding a new button to the footer every time the page is resized.
The previously provided demo is a custom one and it's provided as-is. That why feel free to modify the code to remove the current button before adding the new one.
Regards,
Vladimir Iliev
Telerik
Hi Vladimir
I'm not entirely sure what you're saying? Did you see the behaviour reported by Jon? That behaviour occurs for me too. How would, 'removing the current button before adding the new one', be a solution to the window re-size problem?
Hi Vladimir, Jon
I have a solution. Wrap the code in this conditional:
if (event.type == "readystatechange") {......}
This means that the code only runs when the page is first loaded, otherwise the button keeps re-appearing for every single event on the page.
For reference, my complete code looks like this:
if (event.type == "readystatechange") {
$("<
button
class
=
'k-button k-primary'
>Button text</
button
>")
.appendTo(this.wrapper.find(".k-scheduler-footer"))
.bind("click", function() {
alert("Do something here");
});
}
Jon - I hope that's of some help to you.
Actually, that still doesn't give us a complete solution. Although it deals with when the window is re-sized and when the pop-up is launched (using addEvent(), see earlier in the thead), it fails when the popup is closed because the readystatechange event gets fired then too, and therefore I get double buttons.
Am still working on it, but can anyone contribute?
Okay, I have a better solution. Replace:
if (event.type == "readystatechange")
with:
if (this.wrapper.find(".k-scheduler-footer").children("button").length == 0)
The new approach simply says, for all events, if there is not yet a button, add one, else if there is, don't.
I think this covers all possibilities.