Modal Window Not showing up when inside <form> tags

3 posts, 0 answers
  1. Matt
    Matt avatar
    25 posts
    Member since:
    Jul 2015

    Posted 21 Jul 2015 Link to this post

    I am trying to use the kendo ui window control as a modal when I press a button to display a kendo ui grid; however, when I put the control in form tags, the window doesn't display.  Below is a simplified version of what I am trying to do.

    We are using the latest version of Kendo UI and jQuery 2.1.14.

     

    <!DOCTYPE html>
    <head>
        <title></title>
     
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
     
        <script src="scripts/jquery-2.1.4.min.js"></script>
        <script src="Scripts/jszip.min.js"></script>
        <script src="scripts/kendo.all.min.js"></script>
     
        <script>
          $(document).ready(function () {
              var window = $('#window');
     
              if (!window.data('kendoWindow')) {
     
                  window.kendoWindow({
                      width: "200px",
                      title: "Column Picker",
                      modal: true,
                      //visible: false,
                      position: { top: 100, left: 400 },
                  }).data("kendoWindow").center();
              }
          });
     
            function openWindow() {
                var window = $('#window');
                window.data('kendoWindow').open();
     
              };
            
        </script>
    </head>
    <body>
        <form id="myForm">    
            <button class="k-button" onclick="openWindow()">Open Window</button>
            <div id="window" style="display:none;">
                Test window
            </div>
        </form>
          
    </body>
    </html>

  2. Matt
    Matt avatar
    25 posts
    Member since:
    Jul 2015

    Posted 21 Jul 2015 in reply to Matt Link to this post

    I figured out my issue.  Apparently, the button was set to autopostback by default.  So I had to set a return value in my onclick event.

    eg

    <button class="k-button" onclick="openWindow(); return false;">Open Window</button>

    or if you wish to conditionally return a value from your function you can do onclick="return openWindow();"

  3. Kendo UI is VS 2017 Ready
  4. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 22 Jul 2015 Link to this post

    Hi Matt,

    You won't need a return value if you use the correct button type.

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

    Regards,
    Dimo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top