New to Kendo UI for jQuery? Download free 30-day trial

Keep Popup Editor Centered on Browser Resize in Grid


Product Progress Kendo UI Grid for ASP.NET MVC


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?


  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");;
    <div id="grid"></div>
        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")
In this article
Not finding the help you need? Improve this article