Как получить идентификатор родительского элемента для отмеченных флажков в Kendo Grid

Question

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

IE: Если я открою Перейдите в комнату A и отметьте 2 из трех флажков, а затем продолжите и отметьте другие флажки в других комнатах, как я могу go также получить идентификатор родителей? Я знаю, что это должно быть сделано с использованием массива объектов, но на данный момент просто используя массив для заполнения идентификаторов отмеченных флажков.

Я мог бы сделать это долгим путем и запросить список областей и получить идентификатор родительской комнаты, но это выглядит как беспорядок.

Есть идеи?

$(document).ready(function() {
  LoadSubmitToFactoryRooms(RoomsList());

  $('#btnSelectAllRooms').on('click', () => {

    let grid = $('#SubmitToFactoryRoomsListGrid').getKendoGrid(),
      gridDS = grid.dataSource.data(),
      findstr = "",
      row = "",
      checkbox = "";

    for (let i = 0; i < gridDS.length; i++) {
      findstr = "tr[data-uid='" + gridDS[i].uid + "']";
      row = grid.tbody.find(findstr);
      checkbox = $(row).find(".checkbox");
      checkbox.prop("checked", true);
      //if (checkbox.is(":checked")) {

      //}
    }
  });

  $('#btnSelectNoRooms').on('click', () => {
    let grid = $('#SubmitToFactoryRoomsListGrid').getKendoGrid(),
      gridDS = grid.dataSource.data(),
      findstr = "",
      row = "",
      checkbox = "";

    grid.refresh();
  });

  $('#btnGetAllSelected').on('click', () => {
    let boxes = $('#SubmitToFactoryRoomsListGrid').find('.checkbox');
    console.log(boxes.length);
    for (let i = 0; i < boxes.length; i++) {
      if (boxes[i].checked) {
        console.log(`${boxes[i].id.split('_')[1]}`);
        //allSelectedIDs.push(boxes[i].id.split('_')[1]);
      }
    }
    console.log(allSelectedIDs);
    allSelectedIDs = [];
  });

  AddKeyValuePairToRoomAndAreasObject();
});

var allSelectedIDs = [];

function RoomsList() {
  let rooms = [{
      RoomID: 1,
      RoomName: "Room A",
      Areas: [{
        AreaID: 11,
        AreaName: "Area 1"
      }, {
        AreaID: 15,
        AreaName: "Area 5"
      }, {
        AreaID: 19,
        AreaName: "Area 19"
      }]
    },
    {
      RoomID: 2,
      RoomName: "Room B",
      Areas: [{
        AreaID: 12,
        AreaName: "Area 2"
      }, {
        AreaID: 16,
        AreaName: "Area 6"
      }]
    },
    {
      RoomID: 3,
      RoomName: "Room C",
      Areas: [{
        AreaID: 13,
        AreaName: "Area 3"
      }, {
        AreaID: 17,
        AreaName: "Area 7"
      }]
    },
    {
      RoomID: 4,
      RoomName: "Room D",
      Areas: [{
        AreaID: 14,
        AreaName: "Area 4"
      }, {
        AreaID: 18,
        AreaName: "Area 8"
      }]
    }
  ];
  return rooms;
}

var roomAndAreasObject = RoomsList();

function LoadSubmitToFactoryRooms(roomList) {
  $("#SubmitToFactoryRoomsListGrid").empty();
  $("#SubmitToFactoryRoomsListGrid").kendoGrid({
    dataSource: {
      data: roomList,
      schema: {
        model: {
          fields: {
            RoomID: {
              nullable: false,
              editable: false
            },
            RoomName: {
              nullable: false,
              editable: false
            }
          }
        }
      }
    },
    toolbar: [{
        name: "SelectAllRooms",
        template: "<button id='btnSelectAllRooms' type='button' class='btn btn-warning btn-small pull-left' onclick=''><span class='glyphicon glyphicon-check'></span> Select All Rooms</button>"
      },
      {
        name: "SelectNoRooms",
        template: "<button type='button' id='btnSelectNoRooms' class='btn btn-warning btn-small pull-right' onclick=''><span class='glyphicon glyphicon-remove'></span> Select No Rooms</button>"
      }
    ],
    columns: [{
        title: '',
        template: "<center><input type='checkbox' class='checkbox' id='Room_#=RoomID #'/></center>",
        width: "30px"
      },
      {
        field: "RoomID",
        title: "RoomID",
        hidden: true
      },
      {
        field: "RoomName",
        title: "Room"
      }
    ],
    dataBound: function(e) {
      e.sender.dataSource.data().forEach((element, i) => {
        //console.log(e);
        e.sender.tbody.find('#Room_' + element.RoomID).click(function(e) {
          //console.log(e.currentTarget.id.split('_'));

          if ($('#SubmitToFactoryRoomsListGrid .k-state-selected + .k-detail-row').length > 0) {
            console.log("detailRow is open");
          } else {
            console.log("No DetailRow");
          }
        });
      });
    },
    selectable: "row",
    height: "100%",
    detailInit: STFRoomAreas,
    detailExpand: function(e) {
      roomAreasGrid = e.sender;
      roomAreasGrid.select(e.detailRow.prev());
      roomAreasGrid.collapseRow(roomAreasGrid.tbody.find('> tr.k-master-row').not(e.masterRow));

      // This line of code below will always remove the immediate detail row class, so everytime we open a detailrow it will automatically refresh its data
      //setTimeout(function () {
      //    $('#SubmitToFactoryRoomsListGrid :not(.k-state-selected) + .k-detail-row').remove();
      //});
    }
  });
}

function STFRoomAreas(e) {
  let masterRow, masterRowData, isMasterRowChecked;
  masterRow = e.masterRow;
  masterRowData = e.data;
  masterRowAreas = masterRowData.Areas;
  isMasterRowChecked = masterRow.find('.checkbox').is(':checked');


  $("<div id='" + masterRowData.RoomID + "' />").appendTo(e.detailCell).kendoGrid({
    scrollable: true,
    sortable: true,
    selectable: "row",
    filterable: false,
    columns: [{
        title: "AreaID",
        field: "AreaID",
        hidden: true
      },
      {
        template: "<input type='checkbox' class='checkbox' id='Area_#=AreaID #' />",
        width: "2px"
      }, {
        field: "AreaName",
        title: "Area Name",
        width: "20px",
        template: "<div >#=AreaName #</div>"
      }
    ],
    dataSource: {
      data: e.data.Areas,
      schema: {
        id: "AreaID",
        model: {
          fields: {
            AreaID: {
              nullable: true
            },
            AreaName: {
              validation: {
                required: true,
                maxLength: function(input) {
                  if (input.val().length < 1) {
                    input.attr("data-minlength-msg", "Min length is 1 character");
                    return false;
                  }
                  return true;
                }
              },
              nullable: false,
              editable: true
            }
          }
        }
      }
    },
    dataBound: function(event) {

      //#region Variables

      let ds = e.sender.dataSource.data();
      let dsLength = ds.length;
      let findstr = "",
        row = "",
        checkbox = "",
        count = 0,
        maxCount = masterRowAreas.length;;

      //#endregion

      if (isMasterRowChecked) {
        masterRowAreas.forEach((elem, index) => {
          $('#Area_' + elem.AreaID).prop("checked", true);
        });
      }

      // Create Count for amount of checkboxes 
      for (let i = 0; i < masterRowAreas.length; i++) {
        findstr = "tr[data-uid='" + masterRowAreas[i].uid + "']";
        row = this.table.find(findstr);
        checkbox = $(row).find(".checkbox");
        if (checkbox.is(":checked")) {
          count += 1;
        }
      }

      // Changing count so we can either put the masterrow checkbox in indeterminate or just checked
      masterRowAreas.forEach((element, i) => {
        this.table.find('#Area_' + element.AreaID).change(function(ev) {
          if (this.checked) {
            count += 1;
            // Change parent's checkbox to checked
            if (maxCount == count) {
              if ($('#Room_' + masterRowData.RoomID).prop("indeterminate")) {
                $('#Room_' + masterRowData.RoomID).prop("indeterminate", false);
                $('#Room_' + masterRowData.RoomID).prop("checked", true);
              } else {
                $('#Room_' + masterRowData.RoomID).prop("checked", true);
              }
            } else {
              $('#Room_' + masterRowData.RoomID).prop("indeterminate", true);
            }
          } else {
            count -= 1;
            if (count != 0) {
              // Set parent's checkbox to indeterminate
              $('#Room_' + masterRowData.RoomID).prop("indeterminate", true);
            } else {
              // Remove checkbox from parent's checkbox
              $('#Room_' + masterRowData.RoomID).prop("indeterminate", false);
              $('#Room_' + masterRowData.RoomID).prop("checked", false);
            }
          }
        });
      });
    },
    change: function(e) {}
  });
}

function AddKeyValuePairToRoomAndAreasObject() {
  for (let i = 0; i < roomAndAreasObject.length; i++) {
    for (let j = 0; j < roomAndAreasObject[i].Areas.length; j++) {
      roomAndAreasObject[i].Areas[j].IsChecked = false;
    }
  }
}

#SubmitToFactoryRoomsListWrapper {
  height: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-bootstrap.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.bootstrap.min.css" />

<div id="SubmitToFactorySendByRoom">
  <div id="SubmitToFactorySendByRoomTitlebar">
    <span class="pull-right" style=""><i class="glyphicon glyphicon-remove"></i></span> Submit By Room
  </div>
  <div id="SubmitToFactorySendByRoomInfoMessage">
    <div id="SubmitToFactorySendByRoomMessage">

    </div>
  </div>
  <div id="SubmitToFactoryRoomsListWrapper">
    <div id="SubmitToFactoryRoomsListGrid">

    </div>
  </div>
  <div class="pull-right" style="margin-top:10px;">
    <div id="btnGetAllSelected" class="btn btn-primary btn-small" style="margin-right:5px;">Ok</div>
  </div>
</div>