How to add fields to the default KendoGrid Popup Menu?

Question

Is there any way to add fields to KendoGrid's default popup editor? I know you can make one from a template or make your own KendoWindow, but you lose significant functionality when moving away from the default editable: "popup" menu. The data in my DataSource schema has 20+ fields, but obviously we don't want to show more than ~6 on the actual grid. Since the popup window refers to the grid's columns: [], it seems impossible to add any fields. The internet/Telerik have yielded no answers as of yet. My hypotheses for how this might work are:

• Adding columns to grid that don't actually appear in the grid, only the popup
• Manually appending <input> fields to the menu
• Making the grid refer to something else besides the columns for what fields to use

Alternatively, I could continue using a custom window, but I am stuck on getting the Grid to properly update in tandem with the popup window's edited or added data.

EDIT: My code

My grid's columns:

columns: [
  {
    field: 'Name',
    title: 'Name',
    filterable: true,
  },
  {
    field: 'MCN',
    title: 'P/N',
    filterable: true,
  },
  // {
  //   field: 'ID',
  //   title: 'ID',
  //   filterable: true,
  // },
  {
    field: 'Type',
    title: 'Type',
    filterable: true,
  },
  {
    field: 'Subtype',
    title: 'Subtype',
    filterable: true,
  },
  {
    field: 'Value',
    title: 'Value',
    filterable: false,
  },
  {
    field: 'Tolerance',
    title: 'Tolerance',
    filterable: true, //Number/letter combination causes problem?
  },

HTML (through Pug)

script#popupTemplate(type="text/x-kendo-template")
    p#fields

Editable settings:

editable: {
        mode: "popup",
        template: kendo.template($("#popupTemplate").html()),
        window: {
              position: {
                    left: "25%",
                    top: "5%"
              },
              width: "50%",
        }
  }

Adding the fields to the template:

edit: function(e){

        for(let i = 0; i < fields.length; i++){
              $("<div class='k-edit-label'><label>" + fields[i].name + "</label></div><div class='k-edit-field'><input id='" + fields[i].local + "' class='k-textbox'></div>").appendTo("#fields");
        }  
}

The fields array is, of course, an array of the fields to be added. All the local names are equivalent to the column field names. However, there are more fields than columns, but this does not seem to matter in relation to the proposed problem.

Answer 1

I figured it out: I had to add data-bind='value: [fieldName]' to the HTML tag. For some reason, the loop I was using wasn't working with this and I had to revert to manual entries.

For example:

.k-edit-label
      label P/N
.k-edit-field
      input.k-textbox#MCN(data-bind='value: MCN')