Scheduler, footer, custom button

14 posts, 0 answers
  1. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 26 May Link to this post

    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?

  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 May Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 30 May in reply to Vladimir Iliev Link to this post

    Thanks Vladimir, I'll take a look. 

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

    Thanks,

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 30 May Link to this post

    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!
     
  6. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 30 May in reply to Vladimir Iliev Link to this post

    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.

  7. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 30 May in reply to COMM Link to this post

    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.

  8. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 01 Jun Link to this post

    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!
     
  9. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 01 Jun in reply to Vladimir Iliev Link to this post

    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?

  10. Jon
    Jon avatar
    53 posts
    Member since:
    Oct 2013

    Posted 01 Jun in reply to Vladimir Iliev Link to this post

    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.

  11. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 02 Jun Link to this post

    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!
     
  12. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 02 Jun in reply to Vladimir Iliev Link to this post

    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? 

  13. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 02 Jun in reply to COMM Link to this post

    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.

  14. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 02 Jun in reply to COMM Link to this post

    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?

  15. COMM
    COMM avatar
    21 posts
    Member since:
    Oct 2014

    Posted 02 Jun in reply to COMM Link to this post

    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.

Back to Top
Kendo UI is VS 2017 Ready