Раскрывающийся список не отображается во всех строках сетки кендо detailInit grid - PullRequest
Новая
       6

Раскрывающийся список не отображается во всех строках сетки кендо detailInit grid

0 голосов
/ 28 июня 2018

У меня проблема с добавлением выпадающего списка в мою сетку detailInit. Когда я выбираю строку, выпадающие списки находятся там, но когда я выбираю другую строку, выпадающий список не появляется.

Однако, если я выберу 3-ю строку, у меня появятся выпадающие списки, и они появятся во 2-й и 1-й строке, но не в четвертой.

Почему это происходит и как я могу это исправить, чтобы независимо от выбранной строки, все строки имели выпадающие списки? 

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>

1 Ответ

0 голосов
/ 28 июня 2018

У вас есть несколько элементов DOM с одинаковым идентификатором, для каждой ячейки детали вы создаете сетку с одинаковым идентификатором, поэтому в случае события dataBound вы не можете контролировать, какую сетку вы выбираете.

Я думаю, вы должны передать detailCell в качестве параметра функции 'abindCatalogDropDownInCellProcess', чтобы найти соответствующие входные данные, что-то вроде этого: 

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

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

Рабочая пример .

...