Kendo UI Grid：层级数据跨表格拖拽无法放入详情项问题求助

Hey there! Let's break down why you can't drop rows into the detail items of your target Kendo UI Grid, and walk through fixes for the common issues here:

1. Ensure Drag-and-Drop Targets Include Detail Grids #

Kendo UI Grid's detail rows are dynamically rendered, so the default drag configuration might only recognize main grid rows—not the nested detail grids. You need to explicitly include detail grid selectors in your connectWith setting or drop event logic.

Example Configuration: #

// Source Grid
$("#sourceGrid").kendoGrid({
  sortable: {
    mode: "single",
    allowCopy: true,
    connectWith: "#targetGrid, .k-detail-grid" // Include detail grids here
  },
  // Other grid config...
});

// Target Grid (with detail templates)
$("#targetGrid").kendoGrid({
  detailInit: function(e) {
    // Initialize nested detail grid
    $("#childGrid-" + e.data.DemographicID).kendoGrid({
      dataSource: e.data.items,
      sortable: {
        connectWith: "#sourceGrid, #targetGrid" // Link back to source/main grid
      },
      // Other detail grid config...
    });
  },
  // Other target grid config...
});

2. Verify Your Hierarchical Data Conversion Function #

Your convert function is critical for building the nested items structure that powers detail grids. Make sure it fully maps parent-child relationships correctly (your snippet looks incomplete, so here's a complete version as a reference):

function convert(array) {
  var map = {};
  var rootItems = [];

  for (var i = 0; i < array.length; i++) {
    var obj = array[i];
    obj.items = []; // Initialize empty child array
    map[obj.DemographicID] = obj; // Map item by its unique ID

    // Link to parent if parent ID exists
    if (obj.ParentDemographicID && map[obj.ParentDemographicID]) {
      map[obj.ParentDemographicID].items.push(obj);
    } else {
      rootItems.push(obj); // Add to root if no parent
    }
  }
  return rootItems;
}

If this function fails to populate items for parent nodes, your detail grids will have no data to drop into.

3. Handle Drop Logic for Nested Detail Grids #

When dropping into a detail grid, you need to update the parent row's items array (not the main grid's data source). Add custom logic to the drop event to distinguish between main grid and detail grid targets:

$("#targetGrid").kendoGrid({
  drop: function(e) {
    var draggedItem = e.source.dataItem(e.draggable.currentTarget);
    var targetRow = $(e.dropTarget).closest("tr");
    var targetGrid = targetRow.closest(".k-grid").data("kendoGrid");

    // Check if we're dropping into a detail grid
    if (targetGrid.element.hasClass("k-detail-grid")) {
      // Get the parent row and its data item
      var parentMasterRow = targetGrid.element.closest(".k-detail-row").prev(".k-master-row");
      var parentGrid = $("#targetGrid").data("kendoGrid");
      var parentDataItem = parentGrid.dataItem(parentMasterRow);

      // Add dragged item to parent's child array
      parentDataItem.items.push(draggedItem.toJSON());
      parentGrid.dataSource.sync();
      targetGrid.dataSource.read(); // Refresh the detail grid
    } else {
      // Handle drop into main target grid
      targetGrid.dataSource.add(draggedItem.toJSON());
      targetGrid.dataSource.sync();
    }
  },
  // Other config...
});

4. Confirm Detail Template Selectors Are Correct #

Double-check that your detail template uses the right Kendo UI class names (like k-detail-grid) to ensure the drag-and-drop logic can identify nested grids. For example:

<script id="detailTemplate" type="text/x-kendo-template">
  <div class="k-detail-grid" id="childGrid-#=DemographicID#"></div>
</script>

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