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

Modal Window Not showing up when inside <form> tags

2 Answers 282 Views
Window
This is a migrated thread and some comments may be shown as answers.
Matt
Top achievements
Rank 1
Matt asked on 21 Jul 2015, 04:12 PM

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 Answers, 1 is accepted

Sort by
0
Matt
Top achievements
Rank 1
answered on 21 Jul 2015, 07:25 PM

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();"

0
Dimo
Telerik team
answered on 22 Jul 2015, 11:15 AM
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!
Tags
Window
Asked by
Matt
Top achievements
Rank 1
Answers by
Matt
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or