Question

在我的detailInit网格中向我的网格添加一个下拉列表时，我遇到了一个问题。当我选择一行时，下拉列表位于其中，但是当我选择另一行时，则不会出现下拉列表。

但是，如果我选择第三行，则会出现下拉列表，它们将出现在第二行和第一行中，而不是第四行。

为什么会发生这种情况，以及如何解决它，以便无论我选择哪一行，所有行都将具有下拉列表？

var dropdownData = [{
    "CatalogID": 1,
    "NameVersion": "Catalog1"
  },
  {
    "CatalogID": 2,
    "NameVersion": "Catalog2"
  },
  {
    "CatalogID": 3,
    "NameVersion": "Catalog3"
  },
  {
    "CatalogID": 4,
    "NameVersion": "Catalog4"
  },
];

$(document).ready(function() {

  //#region Data

  var data2 = [{
      "RoomID": 1,
      "RoomName": "Room 1",
      "Areas": [{
        "id": 1,
        "AreaName": "Area 1"
      }, {
        "id": 10,
        "AreaName": "Area 10"
      }]
    },
    {
      "RoomID": 2,
      "RoomName": "Room 2",
      "Areas": [{
        "id": 2,
        "AreaName": "Area 2"
      }, {
        "id": 20,
        "AreaName": "Area 20"
      }]
    },
    {
      "RoomID": 3,
      "RoomName": "Room 3",
      "Areas": [{
        "id": 3,
        "AreaName": "Area 3"
      }, {
        "id": 30,
        "AreaName": "Area 30"
      }, {
        "id": 35,
        "AreaName": "Area 35"
      }]
    },
    {
      "RoomID": 4,
      "RoomName": "Room 4",
      "Areas": [{
        "id": 4,
        "AreaName": "Area 4"
      }, {
        "id": 40,
        "AreaName": "Area 40"
      }]
    }
  ];

  //#endregion

  ShowTabEditor(data2);
});

function ShowTabEditor(data) {
  $('#TabEditor').kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: "RoomID",
      fields: {
        RoomID: {
          editable: false,
          hidden: true
        },
        RoomName: {
          editable: false,
          type: "string",
          hidden: false
        },
        AreaCount: {
          editable: false,
          type: "number",
          hidden: false
        }
      }
    },
    columns: [{
        field: "RoomID",
        title: "RoomID",
        hidden: true
      },
      {
        field: "RoomName",
        title: "RoomName",
        hidden: false
      },
      {
        field: "AreaCount",
        title: "AreaCount",
        hidden: false
      }
    ],
    selectable: "row",
    //change: onTabEditorRowSelect,
    //detailTemplate: kendo.template($("#TabAreaTemplate").html()),
    detailInit: TabEditorDetailInit,
    detailExpand: function(e) {
      this.select(e.detailRow.prev());
      this.collapseRow(this.tbody.find('> tr.k-master-row').not(e.masterRow));
    }
  }).data("kendoGrid");
}

function TabEditorDetailInit(e) {
  //var masterRow = e.masterRow;
  //var roomID = e.data.RoomID;


  $("<div id='EditAreaGrid' />").appendTo(e.detailCell).kendoGrid({
    scrollable: true,
    sortable: true,
    selectable: "row",
    filterable: false,
    toolbar: kendo.template($("#EditAreaGridToolbarTemplate").html()),
    columns: [{
      title: "id",
      field: "id",
      hidden: true
    }, {
      field: "AreaName",
      title: "Area Name",
      width: "20px",
      template: "<div >#=AreaName #</div>"
    }, {
      title: "Catalog",
      field: "Catalog",
      template: "<input class='edit-area-catalog-dropdown' type='text' />",
      width: "40px",
      editable: false
    }],
    editable: {
      mode: "incell",
      confirmation: false
    },
    dataSource: {
      data: e.data.Areas,
      schema: {
        model: {
          fields: {
            id: {
              nullable: true
            },
            AreaName: {
              nullable: true,
              editable: true
            },
            Catalog: {
              editable: false
            }
          }
        }
      }
    },
    dataBound: function(e) {
      abindCatalogDropDownInCellProcess();
    }
  });
}

function abindCatalogDropDownInCellProcess() {
  $("#EditAreaGrid").data("kendoGrid").tbody.find("td input.edit-area-catalog-dropdown").each(function() {
    $(this).kendoDropDownList({
      dataTextField: "NameVersion",
      dataValueField: "CatalogID",
      optionLabel: "Select Catalog...",
      dataSource: {
        transport: {
          read: function(options) {
            if (dropdownData.length > 0) {
              options.success(dropdownData);
              return;
            }

            options.success(dropdownData);
          }
        }
      },
      select: function(e) {
        var grid = $("#EditAreaGrid").data("kendoGrid");
        var dataItem = grid.dataItem(grid.select());
        var drpDataItem = this.dataItem(e.item);
      }
    });
  });
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>

<script type="text/x-kendo-template" id="EditAreaGridToolbarTemplate">
  <button class="btn btn-sm btn-primary" id="btnAddNewArea"><i class="fa fa-plus"></i></button>
  <button id="btnDeleteArea" class="btn btn-sm btn-danger"><i class="fa fa-remove"></i></button>
</script>
<div id="TabEditor"></div>

Answer 1

您有几个具有相同ID的DOM元素，对于每个细节单元，您创建的具有相同ID的网格，因此在dataBound事件中，您无法控制选择的网格。

我认为，您应将detailCell作为参数传递给'abindCatalogDropDownInCellProcess'函数，以查找相应的输入，诸如此类：

dataBound: function(w) {
      abindCatalogDropDownInCellProcess(e.detailCell);
    }
...

function abindCatalogDropDownInCellProcess(cell) {
  cell.find("td input.edit-area-catalog-dropdown").each(function(){})
}

工作example。

在Kendo网格详细信息的所有行中未显示下拉列表

1 个答案: