Hello,
I have a Grid, which has sub grids, which themselves have sub grids. I would like to drag rows between the sub-sub-grids. The kendoDropTarget event fires when I drag and drop within the same grid, but not when I drag to another grid. Any thoughts?
I but my code below.
Thanks!
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
<title></title>
<script>
var dsArray = new Array();
var dragged;
var dropped;
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: "GroupHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
id: "G_Code",
fields: {
G_Code: { editable: false },
G_T_p_a: { field: "G_T_p_a" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
detailInit: typesInit,
columns: [
{ field: "G_Code", filterable: false, hidden: true },
{field: "G_T_p_a", title: " "}
],
editable: true
})
})
function typesInit(e) {
$("<div/>").appendTo(e.detailCell).kendoGrid({
detailInit: deleguesInit,
dataSource: {
autoSync: true,
transport: {
read: {
url: "TypesHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { g_code: e.data.G_Code }
},
},
schema: {
model: {
id: "T_Code",
fields: {
T_Code: { editable: false },
T_T_p_a: { field: "T_T_p_a" }
}
}
}
},
columns: [
{ field: "T_Code", filterable: false, hidden: true },
{ field: "T_T_p_a", title: " ", width: "400px" }
],
});
}
function deleguesInit(e) {
var deldatasource = new kendo.data.DataSource({
autoSync: true,
//batch: true,
transport: {
read: {
url: "DeleguesHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "read" }
},
update: {
url: "DeleguesHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { mode: "update" }
},
create: {
url: "DeleguesHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { g_code: e.data.G_Code, t_code: e.data.T_Code, d_code_pays: "275", mode: "create" }
},
destroy: {
url: "DeleguesHandler.ashx",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: { mode: "destroy" }
}
},
schema: {
model: {
id: "D_Code",
fields: {
D_Code: { type: "number" },
D_Numseq: { type: "number" },
D_Appellation: { type: "string" },
D_Nom: { type: "string" },
D_Prenom: { type: "string" },
D_Titre: { type: "string" }
}
}
}
});
//save to array
dsArray[e.data.G_Code + e.data.T_Code] = deldatasource;
var delgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
toolbar: ["create"],
dataSource: deldatasource,
editable: true,
//editable:{
// createAt: "bottom",
// mode: "incell"
//},
navigatable: true,
columns: [
{ field: "D_Code", hidden: true },
//{
// command: [
// {
// name: "destroy",
// text: ""
// //click: function (e) {
// // e.preventDefault();
// // var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
// //}
// }
// ],
// title: " ",
// width: "110px"
//},
{ field: "D_Numseq", width: "50px" },
{ field: "D_Appellation", width: "50px" },
{ field: "D_Nom", width: "200px" },
{ field: "D_Prenom", width: "200px" },
{ field: "D_Titre" }
]
}).data("kendoGrid");
delgrid.tbody.on('keydown', function (e) {
if ($(e.target).closest('td').is(':last-child') && $(e.target).closest('tr').is(':last-child')) {
delgrid.addRow();
}
});
delgrid.table.kendoDraggable({
filter: "tbody > tr",
group: "gridGroup" + e.data.G_Code + e.data.T_Code,
hint: function (e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
delgrid.table/*.find("tbody > tr")*/.kendoDropTarget({
group: "gridGroup" + e.data.G_Code + e.data.T_Code,
drop: function (e2) {
var dsDrop = dsArray[e.data.G_Code + e.data.T_Code];
var diDrop = dsDrop.getByUid(e2.draggable.currentTarget.data("uid"));
//var target = deldatasource.get($(e.draggable.currentTarget).data("id"));
//var dest = $(e.target);
//if (dest.is("th")) {
// return;
//}
//dest = deldatasource.get(dest.parent().data("id"));
////not on same item
//if (target.get("id") !== dest.get("id")) {
// //reorder the items
// var tmp = target.get("position");
// target.set("position", dest.get("position"));
// dest.set("position", tmp);
// deldatasource.sort({ field: "position", dir: "asc" });
//}
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid"></div>
</form>
</body>
</html>
1 Answer, 1 is accepted
Hello Suzanne,
`The kendoDropTarget event fires when I drag and drop within the same grid, but not when I drag to another grid` - indeed this is by design. The events of the DropTarget will fire only over the element where it is initialized. Am I missing something obvious here?
In your code snippet DropTarget is initialized over the sub Grid ` delgrid.table/*.find("tbody > tr")*/.kendoDropTarget` and drop event will be triggered only when dropping inside the sub-grid table element.
Regards,
Nikolay Rusev
Telerik by Progress