How to edit fields in grid popup that are not part of grid columns?

Question

I need to prepare grid with limited number of columns and only when grid row is edited (in popup) it should contain additional fields to edit.

How to edit fields in grid popup that are not part of grid columns?

Answer 1

You have to set a template for the popup, check this:

<script id="popup-editor" type="text/x-kendo-template">
  <h3>Edit Person</h3>
  <p>
    <label>Name:<input name="name" /></label>
  </p>
  <p>
    <label>Age: <input data-role="numerictextbox" name="age" /></label>
  </p>
  <p>
    <label>Active: <input type="checkbox" # if (data.active) { #checked="checked"# } #>
  </p>
</script>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
    { command: "edit" }
  ],
  dataSource: {
   data: [
    { id: 1, name: "Jane Doe", age: 30, active: false },
    { id: 2, name: "John Doe", age: 33, active: true }
   ],
   schema:{
    model: {
     id: "id",
     fields: {
       age: { type: "number"}
     }
    }
   }
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }
});
</script>

Demo