层级网格（带弹出编辑器）配置求助：主/明细数据共用编辑弹窗

Hey Peter, let's work through this step by step to get your hierarchy grid and popup editor working properly! I'll break down solutions for both of your issues below.

1. Fixing Detail Row Rendering (Accessing Contacts Data) #

The key here is ensuring your detail template correctly references the nested contact array, and handling cases where a record might not have any contacts (to avoid errors). Let's assume you're using a common grid library like Kendo UI (the logic translates similarly for other frameworks):

Step 1: Define the Detail Template #

Create a template that checks for existing contacts before rendering the detail grid:

<script id="detail-template" type="text/x-kendo-template">
  # if (data.contact && data.contact.length > 0) { #
    <h4>Contact Details</h4>
    <div class="contact-detail-grid"></div>
  # } else { #
    <p>This person has no saved contacts.</p>
  # } #
</script>

Step 2: Initialize the Detail Grid in detailInit #

In your main grid configuration, use the detailInit event to pass the nested contact data to the detail grid:

function onDetailInit(e) {
  // Fallback to empty array if contact is undefined
  const contactData = e.data.contact || [];
  
  $(e.detailCell).find(".contact-detail-grid").kendoGrid({
    dataSource: contactData,
    columns: [
      { field: "type", title: "Contact Type" },
      { field: "value", title: "Contact Value" }
    ],
    scrollable: false,
    sortable: true
  });
}

Make sure your main grid's data source schema explicitly defines the contact field as an array (with a default empty array to prevent undefined errors):

dataSource: {
  data: persons,
  schema: {
    model: {
      fields: {
        name: { type: "string" },
        surname: { type: "string" },
        contact: { type: "array", defaultValue: [] } // Critical for empty records
      }
    }
  }
}

2. Popup Editor for Master + Detail Data #

To edit both master fields (name/surname) and detail contacts in the same popup, you'll need to embed a sub-grid for contacts within the editor template, and bind it directly to the master record's contact array.

Step 1: Create the Popup Editor Template #

Include form fields for master data and a container for the contacts sub-grid:

<script id="popup-editor-template" type="text/x-kendo-template">
  <div class="editor-wrapper">
    <!-- Master Data Fields -->
    <div class="master-fields">
      <div class="form-group">
        <label>Name:</label>
        <input type="text" name="name" data-bind="value: name" class="k-input" />
      </div>
      <div class="form-group">
        <label>Surname:</label>
        <input type="text" name="surname" data-bind="value: surname" class="k-input" />
      </div>
    </div>

    <!-- Contacts Sub-Grid -->
    <div class="contacts-section">
      <h4>Manage Contacts</h4>
      <div id="contact-editor-grid"></div>
      <button class="k-button add-contact-btn">Add New Contact</button>
    </div>
  </div>
</script>

Step 2: Initialize the Sub-Grid in the edit Event #

When the popup editor opens, initialize the contacts grid and wire up the "Add Contact" button:

function onEdit(e) {
  const masterData = e.model;
  
  // Ensure contact array exists (prevents undefined errors)
  if (!masterData.contact) {
    masterData.set("contact", []);
  }

  // Initialize contacts sub-grid
  $("#contact-editor-grid").kendoGrid({
    dataSource: {
      data: masterData.contact,
      schema: {
        model: {
          fields: {
            type: { type: "string", required: true },
            value: { type: "string", required: true }
          }
        }
      }
    },
    editable: "inline", // Use "popup" if you prefer modal editing for contacts
    columns: [
      { field: "type", title: "Type", width: "120px" },
      { field: "value", title: "Value" },
      { command: ["edit", "destroy"], title: " ", width: "180px" }
    ],
    scrollable: false
  });

  // Handle "Add Contact" button click
  $(".add-contact-btn").click(function() {
    const contactGrid = $("#contact-editor-grid").data("kendoGrid");
    contactGrid.addRow();
  });
}

Key Notes for Data Binding #

• The sub-grid uses the master record's contact array directly, so any edits/adds/deletes will automatically sync to the master data source when you save the popup.
• Always set a default empty array for the contact field in your data source schema—this avoids issues with records that have no initial contacts.

Content of this question originates from Stack Exchange, question author: hpet