Append Close button to Window

3 posts, 0 answers
  1. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 01 Apr 2014 Link to this post

    Using javasript I programatically create my dialogs as show below. In the JavaScript I  want to append a Close button to the bottom of the content of each dialog. Is this possible?


    function kendoDialogCreate(dialogName) {
    var dialog =
        $("#" + dialogName).kendoWindow({
          width: "800px",
          title: "",
          modal: true,
          actions: ["Custom", "Close", "Minimize", "Maximize"],
          visible: false,
          close: kendoDialogDeactivate,
          refresh: kendoDialogRefresh,
          error: kendoDialogError
        });
     
    //Add close button here???
     
    }
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Apr 2014 Link to this post

    Hello Tyler,

    It is possible to append a custom button to the bottom of the window in the following way:
    $("#wnd").kendoWindow({
        width: "800px",
        title: "",
        modal: true,
        actions: ["Custom", "Close", "Minimize", "Maximize"],
        visible: false
    }).data("kendoWindow")
    .element
    .append($('<a class="k-button">button</a>')); //append button

    In order to close the window you should hook up to the click event of that button and use the close method to close the widget.

    Regards,
    Alexander Valchev
    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. Tyler
    Tyler avatar
    46 posts
    Member since:
    Nov 2013

    Posted 01 Apr 2014 in reply to Alexander Valchev Link to this post

    Thanks for reply. However I found the real problem. After creating the dialog I call javascript methods to refresh its content with a specific URL as below

    dialog.refresh({
          url: url,
          data: urlData
        });

    This was refreshing the dialog content thus removing the Close button I added. To get around this in the refresh event I added the button to close the dialog using the following:

    //Add the Close button after refresh
        $("#" + dialogName).append("<button id='" + closeBtnName + "' class='k-button saveButtonRight'>Close</button>");
        $("#" + closeBtnName).click(function () {
          dialog.close();
        });

    Happy Days it works!

Back to Top