У меня есть сетка кендо, в которой используется 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>