Keep Popup Editor Centered on Browser Resize in Grid

Environment

Product

Progress® Telerik® 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>