0
votes

I'm using Kendo UI, and I want to make modal dialog popup on a button click. However it works fine 1st time, but when I close dialog and click open button again screen fades, but windows is very small, few pixels in width and height.

This is my code:

  <div id="progressDialog">
      <p>
         blah blah
      </p>
  </div>

  <script>
    $(document).ready(function() {
       var dlg = $("#progressDialog").kendoWindow({
        actions: ["Custom", "Pin", "Refresh", "Maximize", "Minimize", "Close"],
        draggable: false,
        height: "300px",
        modal: true,
        pinned: false,
        position: {
            top: 100,
            left: 100
        },
        resizable: false,
        title: "Modal Window",
        width: "500px"
      });

      $("#someGrid").kendoGrid({
        ...
        dataBound: function(e){     
          $("#showButton").unbind('click').click(function(){          
            dlg.data("kendoWindow").open();
          }
        }
        ...
      });
    });
  </script>

This $("#showButton") part is inside of kendoGrid initialized in dataBound event if that is important. There are also other windows on the page so maybe there is some collision, idk... But it works fine 1st time showButton is clicked, but when I close modal and try for 2nd time it shows very very small square.

EDIT: just noticed there is this property in inline css style added: transform: scale(0.01). I could remove it with JavaScript, but why is added?

1
According to telerik this is known bug with jQuery 1.7, 1.8 would solve the problem. Which is true, but 1.8 will breaks rest of the legacy code. - Dexa
Which version of Kendo UI are you using? Latest version use much newer versions of jQuery so not sure if by the rest of the legacy code you mean your code or KendoUI code. If you mean KendoUI I would recommend moving to a newer (newest) version that should not have any problem running a newer jQuery. - OnaBai
I'm using v2012.3.1114. I do realize this is very outdated version, just refactoring everything is not a option at the moment. Thank you for your help I fixed this by setting transform: scale(1) to do modal window using jQuery. - Dexa

1 Answers

0
votes

You may have to refresh the modal. Try this:

$("#yourmodalWindow").data("kendoWindow").refresh(parameters);

more information here

Good luck