Adjust Popup Edit Form and Input Widths

Updated on Jan 26, 2026

Environment

Description

How can I adjust the width and height of the popup edit form in the Kendo UI Grid?

Solution

To adjust the dimensions of the popup edit form:

1. Configure the popup window dimensions using the editable.window configuration.
2. Use the edit event to customize the form container width if needed.

The following example demonstrates how to set custom dimensions for the popup edit window in the Grid.

<div id="grid"></div>

<script>
  $(document).ready(function () {
    var crudServiceBaseUrl = "https://demos.telerik.com/service/v2/core";
        dataSource = new kendo.data.DataSource({
          transport: {
            read:  {
              url: crudServiceBaseUrl + "/Products"
            },
            update: {
              url: crudServiceBaseUrl + "/Products/Update",
              type: "POST",
              contentType: "application/json"
            },
            destroy: {
              url: crudServiceBaseUrl + "/Products/Destroy",
              type: "POST",
              contentType: "application/json"
            },
            create: {
              url: crudServiceBaseUrl + "/Products/Create",
              type: "POST",
              contentType: "application/json"
            },
            parameterMap: function(options, operation) {
              if (operation !== "read" && options.models) {
                return kendo.stringify(options.models);
              }
            }
          },
          batch: true,
          pageSize: 10,
          schema: {
            model: {
              id: "ProductID",
              fields: {
                ProductID: { editable: false, nullable: true },
                ProductName: { validation: { required: true } },
                UnitPrice: { type: "number", validation: { required: true, min: 1} },
                Discontinued: { type: "boolean" },
                UnitsInStock: { type: "number", validation: { min: 0, required: true } }
              }
            }
          }
        });

    $("#grid").kendoGrid({
      dataSource: dataSource,
      pageable: true,
      height: 300,
      toolbar: ["create"],
      columns: [
        { field:"ProductName", title: "Product Name" },
        { field: "UnitPrice", title:"Unit Price", format: "{0:c}", width: "120px" },
        { field: "UnitsInStock", title:"Units In Stock", width: "120px" },
        { field: "Discontinued", width: "120px" },
        { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }],
      editable: {
  		mode: "popup",
  		window: {
  		    width: "600px",
  		    height: "300px",
  		}
	  },
      edit: function (e) {
      	$(e.container).find(".k-edit-form-container").css("width", "auto");
      }
    });
  });
</script>

See Also

• JavaScript API Reference of the Data Grid

Product	Kendo UI for jQuery Grid
Version	2025.4.1217