Edit this page

Keep Popup Editor Centered on Browser Resize in Grid

Environment

Product Progress Kendo UI Grid for ASP.NET MVC

Description

The window of the popup editor in the Grid does not re-center itself when the browser is resized and might also overflow the page and move out of sight.

How can I keep the popup editor centered (like a modal window) when the browser is resized?

Solution

  1. Add a handler on the browser window onresize event.
  2. Find the Kendo UI Window instance.
  3. Center it programmatically by using the center() method.
window.onresize = function () {  
    var kendoWindow = $("[data-role='window']");
    if (kendoWindow.length) {    
        var win = $(kendoWindow).data("kendoWindow");
        win.center();
    }
}
    <div id="grid"></div>
    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age" },
          { command: "edit" }
        ],
        dataSource: [
          { name: "Jane Doe", age: 30 },
          { name: "John Doe", age: 33 }
        ],
        editable: "popup"
      });
      window.onresize = function () {
        var kendoWindow = $("[data-role='window']");
        if (kendoWindow.length) {
          var win = $(kendoWindow).data("kendoWindow")
          win.center();
        }
      }
    </script>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy