点击取消后Kendo Grid弹窗编辑器无法再次打开的问题求助

Let's tackle your two main issues step by step, keeping everything aligned with MVVM best practices without building a custom popup from scratch.

1. Popup Won't Reopen After Canceling an Edit #

The root cause here is that MVVM bindings from the first edit session aren't properly cleaned up when you cancel, which conflicts with the next edit attempt for the same row. We can fix this by leveraging the Grid's edit and cancel events to manage the binding lifecycle:

• In the edit event, explicitly bind the current data item to the popup container.
• In the cancel event, unbind the container to remove leftover MVVM bindings before the popup closes.

Here's how to update your Grid initialization:

$("#Measures").kendoGrid({
  dataSource: {
    data: PNCC.viewModel.measures,
    schema: {
      model: {
        id: "measureId",
        fields: {
          measureId: { type: "number", editable: false },
          target: { type: "string", editable: false },
          completed: { type: "boolean" },
          measureStatusId: { type: "string", defaultValue: null }, // Add defaultValue for null handling
          measureStatus: { type: "string" },
          progress: { type: "string" }
        }
      }
    },
    sort: { field: "target", dir: "asc" }
  },
  columns: [
    { title: "Performance Measures & Targets", field: "target" },
    { title: "Year to date progress and next steps", field: "progress" },
    { title: "Status", field: "measureStatus" },
    { title: "Complete?", field: "completed" },
    { command: ["edit"], title: " " }
  ],
  filterable: false,
  scrollable: true,
  edit: function(e) {
    // Bind the current edit item to the popup container
    kendo.bind(e.container, e.model);
  },
  cancel: function(e) {
    // Unbind to clean up MVVM bindings when canceling
    kendo.unbind(e.container);
  },
  editable: {
    mode: "popup",
    template: kendo.template($("#popup_editor").html())
  }
});

2. Dropdown measureStatusId Changes Don't Stick When Initial Value is Null #

This happens because Kendo's DropDownList needs explicit handling for null initial values, plus we need to ensure the binding correctly syncs with the MVVM model. Here's what to adjust:

Update the Popup Editor Template #

Make sure your dropdown uses proper MVVM bindings, including an optionLabel to handle the null state:

<script id="popup_editor" type="text/x-kendo-template">
  <div class="k-edit-form-container">
    <div class="k-edit-label">
      <label for="progress">Progress</label>
    </div>
    <div class="k-edit-field">
      <input type="text" data-bind="value: progress" name="progress" />
    </div>
    <div class="k-edit-label">
      <label for="measureStatusId">Status</label>
    </div>
    <div class="k-edit-field">
      <select data-role="dropdownlist" 
              data-bind="value: measureStatusId, source: PNCC.viewModel.measureStatuses" 
              data-text-field="text" 
              data-value-field="value" 
              data-option-label="Select a status"></select>
    </div>
    <div class="k-edit-label">
      <label for="completed">Complete?</label>
    </div>
    <div class="k-edit-field">
      <input type="checkbox" data-bind="checked: completed" name="completed" />
    </div>
  </div>
</script>

Sync measureStatus Display Field (Optional) #

If you want the Grid's measureStatus column to update automatically when selecting a status, add a computed property to your MVVM model to map the ID to the display text:

var model = {
  "title": "Active Community",
  "measures": [ /* your existing measures */ ],
  "measureStatuses": [ /* your existing statuses */ ],
  getStatusText: function(statusId) {
    if (!statusId) return "";
    const status = this.measureStatuses.find(s => s.value === statusId);
    return status ? status.text : "";
  }
};

Then update the Grid's status column to use this computed value, or add a change handler to the dropdown to update the measureStatus property directly.

Why This Works #

• Managing the MVVM binding lifecycle with edit and cancel events ensures each edit session starts fresh, no leftover bindings causing conflicts.
• The optionLabel and defaultValue handle the null initial state for the dropdown, allowing proper selection and value syncing with the MVVM model.

内容的提问来源于stack exchange，提问作者meataxe