This is a migrated thread and some comments may be shown as answers.

Scheduler, footer, custom button

13 Answers 750 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
COMM
Top achievements
Rank 1
COMM asked on 26 May 2016, 03:00 PM

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

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 May 2016, 07:58 AM
Hello,

You can add custom buttons to the footer using for example the "dataBound" event of the Scheduler as demonstrated below:
Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
COMM
Top achievements
Rank 1
answered on 30 May 2016, 08:18 AM

Thanks Vladimir, I'll take a look. 

Could you check the link though, it doesn't appear to be correct.

Thanks,

0
Vladimir Iliev
Telerik team
answered on 30 May 2016, 08:49 AM
Hi,

I updated the link and now it points the the correct resource. 

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
COMM
Top achievements
Rank 1
answered on 30 May 2016, 09:15 AM

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.

0
COMM
Top achievements
Rank 1
answered on 30 May 2016, 09:26 AM

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.

0
Vladimir Iliev
Telerik team
answered on 01 Jun 2016, 07:29 AM
Hi,

To achieve the desired behavior you can simply call the "addEvent" method of the Scheduler:

Regards,
Vladimir Iliev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
COMM
Top achievements
Rank 1
answered on 01 Jun 2016, 08:43 AM

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?

0
Jon
Top achievements
Rank 1
answered on 01 Jun 2016, 09:43 AM

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.

0
Vladimir Iliev
Telerik team
answered on 02 Jun 2016, 06:50 AM
Hi,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
COMM
Top achievements
Rank 1
answered on 02 Jun 2016, 08:15 AM

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? 

0
COMM
Top achievements
Rank 1
answered on 02 Jun 2016, 11:30 AM

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.

0
COMM
Top achievements
Rank 1
answered on 02 Jun 2016, 11:45 AM

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?

0
COMM
Top achievements
Rank 1
answered on 02 Jun 2016, 01:20 PM

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.

Tags
Scheduler
Asked by
COMM
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
COMM
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Share this question
or