Display Non-Editable Fields in Popup Editor

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

I upgraded the Kendo UI for jQuery library to version 2022.2.802 and I no longer see the fields that are marked as editable: false in the popup editor. How do I display these fields in the popup?

Solution

The R2 2022 SP2 release of Kendo UI integrated the Kendo UI for jQuery Form inside the Grid's popup editor. By default, the non-editable fields from the dataSource are not visible in the Form editor. To add them back to the Grid popup, utilize the edit event of the Grid and manually append them to the container.

The following example demonstrates how to append the non-editable age and salary fields to the popup template.

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

    <script>
      $("#grid").kendoGrid({
        columns: [
          { field: "name" },
          { field: "age" },
          { field: "salary"},
          { command: "edit" }
        ],
        edit: function(e) {
          let fieldsAsArray = Object.entries(this.dataSource.options.schema.model.fields);

          fieldsAsArray.forEach((field) => {
            let editable = field[1].editable,
                name = field[0],
                formContainer = e.container.find(".k-edit-form-container"),
                value = e.model[name];

            if(editable === false) {
              // This is the HTML for the label and value that will appear in the popup.
              let formFieldHtml = `<div class="k-form-field"><label class="k-label k-form-label" for="${name}">${name}</label><div class="k-form-field-wrap" data-container-for="${name}">${value}</div></div>`;

              // You can choose where to append the non-editable fields. In this example, they are rendered before all other editors.
              formContainer.prepend(formFieldHtml);
            }
          });
        },
        dataSource: {
          data: [
            { id: 1, name: "Jane Doe", age: 30, salary: 25000 },
            { id: 2, name: "John Doe", age: 33, salary: 15000 }
          ],
          schema:{
            model: {
              id: "id",
              fields: {
                name: {type: "string"},
                age: { type: "number", editable: false},
                salary: { type: "number", editable: false}
              }
            }
          }
        },
        editable: {
          mode: "popup",
        }
      });
    </script>