I am trying to perform like this drag item from kendo Treelist to Drop in Kendo grid but not working in .net code using
But when I doing drag from treelist to grid I am not event getitng debug
Please help me asap if anyone has solution
JS Code:
But when I doing drag from treelist to grid I am not event getitng debug
Please help me asap if anyone has solution
Razor page code:
<div style="height: 100%;">
<!-- Parent Grid -->
<div style="width: 60%; height: 100%; float: left;">
<h2>{_ParentItem_}s</h2>
@(Html.Kendo().TreeList<ParentChildModel>()
.Name("ParentGrid")
.Columns(columns =>
{
columns.Add().Field(p => p.Id).Width(80).Hidden(false);
columns.Add().Field(p => p.ItemId).Width(80).Hidden(true);
columns.Add().Field(c => c.Name).Title("Name").Width(140).Template("#= getIndentedName(Name, Id) #");
columns.Add().Field(e => e.AssetCode).Title("{_AssetCode_}").Width(60);
columns.Add().Field(e => e.Weight).Title("Weight").Format("{0:n3}").Width(40).Hidden(false);
columns.Add().Field(e => e.Dimension).Title("Dimension").Width(100).Hidden(false);
columns.Add().Command(c =>
{
c.Edit().Text("Edit").ClassName("k-grid-edit");
c.Destroy().Text("Delete").ClassName("k-grid-delete");
}).Title("Actions").Width(80);
})
.Editable(editable => editable.Move(move => move.Reorderable(true)).Mode(TreeListEditMode.PopUp)
.TemplateName("ParentPopupEditor"))
.Toolbar(toolbar =>
{
toolbar.Create().Text("Add New {_ParentItem_}");
toolbar.Custom().Template(
"<div>" +
"<input id='toolbarComboBox' style='width: 300px;' />" +
"</div>"
);
toolbar.Search();
})
.DataSource(dataSource => dataSource
.Read(read => read.Action("GetParentAndChildItems", "ParentChild").Data("parentSearchData"))
.Create(update => update.Action("AddNewRecord", "ParentChild").Type(HttpVerbs.Post))
.Update(u => u.Action("UpdateRecord", "ParentChild").Type(HttpVerbs.Post)) //.Data("saveFormData"))
.Destroy(update => update.Action("DeleteRecord", "ParentChild"))
.ServerOperation(false)
.PageSize(20)
.Model(m =>
{
m.Id(f => f.Id);
m.ParentId(f => f.ParentId);
m.Expanded(true);
m.Field(f => f.ItemId);
m.Field(f => f.AssetName);
m.Field(f => f.AssetCode);
m.Field(f => f.Weight);
m.Field(f => f.Dimension);
})
)
.Pageable(x => x.PageSizes(new int[] { 20, 50, 100, 200, 500 }).Refresh(true).Input(true))
.Sortable()
.Selectable()
.Events(e => e.DataBound("dataBound").Save("onEditorDataSave").DragEnd("onDragEnd"))//.DragStart("onDragStart").DragEnd("onDragEnd")
)
</div>
<!-- Assignable Assets -->
<div style="width: 40%; height: 100%; float: right;">
<h2>Assignable {_Asset_}s</h2>
@(Html.Kendo().Grid<ItemDto>()
.Name("AssetGrid")
.HtmlAttributes(new { style = "height:100%; width:100%;" })
.Columns(columns =>
{
//columns.Template(@<text> </text>).Draggable(true).Width(30);
columns.Template("").Draggable(true);
columns.Bound(a => a.Id).Title("Id").Width(60).HtmlAttributes(new { @class = "idColStyle" });
columns.Bound(a => a.Title).Title("{_AssetName_}").Width(150);
columns.Bound(a => a.ItemTypeName).Title("{_AssetType_}").Width(100);
columns.Bound(a => a.LocationName).Title("Destination {_Location_}").Width(110);
})
.ToolBar(toolbar =>
{
toolbar.Custom().ClientTemplate(Html.Kendo().Template().AddComponent(c => c
.TextBox().Name("toolbarTextBox")
.Placeholder("Filter by {_AssetName_}/{_AssetType_}...")
.HtmlAttributes(new { style = "float: right; width: 300px;" })
.Events(ev => ev.Change("toolbarTextBoxChanged"))
));
toolbar.Search();
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(false)
.Model(m => m.Id("Id")) //Ensure that the Model identifier ("Id") is defined.
.Read(read => read.Action("GetAssignableAssets", "ParentChild").Data("childrenSearchData"))
)
.Pageable()
.Sortable()
.Selectable()
)
</div>
</div>JS Code:
$(document).ready(function () {
var treeList = $("#ParentGrid").data("kendoTreeList");
if (treeList) {
treeList.dataSource.bind("requestEnd", function (e) {
if (e.response) {
if (e.type === "create") {
console.log("call requestEnd type: create");
treeList.dataSource.read(); // Refresh immediately
} else if (e.type === "update") {
console.log("call requestEnd type: update");
setTimeout(function () {
treeList.dataSource.read(); // Refresh after 1 second
}, 200); // 1000 milliseconds = 1 second
}
}
});
}
});
function onDragEnd(e) {
var draggedItem = e.source; // The dragged item
var newParent = e.destination; // The new parent (if changed)
var newOrder = e.position; // The new order in the parent
// Prepare data for backend
var updateData = {
sourceId: draggedItem.id,
destId: newParent ? newParent.id : null,
destParentId: newParent ? newParent.id : null,
//sourceItemId = draggedItem.ItemId,
//destItemId = newParent ? newParent.ItemId : null,
order: newOrder
};
// Make an AJAX call to update the hierarchy/order in the backend
$.ajax({
url: "/ParentChild/Reorder", //"/ParentChild/Reorder",
type: "POST",
data: { //{destId: updateData.destId, sourceId: updateData.sourceId, order: updateData.order},
destId: e.destination.Id,
sourceId: e.source.Id,
destParentItemId: e.destination.ParentItemId,
order: e.position
},
//contentType: "application/json",
success: function () {
// Optionally refresh the TreeList
$("#ParentGrid").data("kendoTreeList").dataSource.read();
},
error: function () {
$("#ParentGrid").data("kendoTreeList").dataSource.read();
alert("Reorder failed (Can't make child asset as parent)");
}
});
console.log("Drag operation ended!", e);
}
// Initialize ParentGrid rows as drop targets
window.initializeDropTargets = function () {
var draggedItem = null;
// Make Rows Draggable
$("#AssetGrid").on("mousedown", "tr", function () {
var grid = $("#AssetGrid").data("kendoGrid");
var dataItem = grid.dataItem($(this));
draggedItem = dataItem; // Track the dragged item's data
console.log("AssetGrid -> mousedown", draggedItem);
});
// Track dragged item from ParentGrid
$("#ParentGrid").on("mousedown", "tr", function () {
var parentGrid = $("#ParentGrid").data("kendoTreeList");
draggedItem = parentGrid.dataItem($(this));
console.log("ParentGrid -> mousedown", draggedItem);
});
$("#ParentGrid").kendoDropTargetArea({
filter: "tbody tr",
group: "assetGroup", // Match the draggable group
drop: function (e) {
var parentGrid = $("#ParentGrid").data("kendoTreeList"); // Get the Kendo Grid instance
var dropTargetRow = $(e.dropTarget); //.closest("#ParentGrid tr.k-table-row.k-master-row"); // The row where the item was dropped
var targetItem = parentGrid.dataItem(dropTargetRow); // Target row data
console.log("Dragged Item:", draggedItem.Id);
console.log("Drop Target:", e.dropTarget);
console.log("Drop Target Row:", dropTargetRow);
console.log("Target Item:", targetItem.Id);
if (targetItem && draggedItem) {
//alert("Item '" + draggedItem.Title + "' dropped on Parent '" + targetItem.Name + "'");
// Add AJAX call here to save assignment in the database
$.ajax({
url: "/ParentChild/AssignAsset",
method: "POST",
data: { parentId: targetItem.Id, itemId: draggedItem.Id, parentItemId: targetItem.ParentItemId },
success: function (response) {
parentGrid.dataSource.read();
$("#AssetGrid").data("kendoGrid").dataSource.read();
console.log("AssignAsset ended from kendoDropTargetArea -> drop");
//parentGrid.refresh();
//alert("Assignment successful!");
},
error: function () {
alert("Error while assigning asset (Can't assign children to child asset).");
}
});
}
},
dragend: function (e) {
var draggedItem = e.source; // The dragged item
var newParent = e.destination; // The new parent (if changed)
var newOrder = e.destinationIndex; // The new order in the parent
// Prepare data for backend
var updateData = {
id: draggedItem.id,
parentId: newParent ? newParent.id : null,
order: newOrder
};
// Make an AJAX call to update the hierarchy/order in the backend
$.ajax({
url: "/ParentChild/Reorder",
type: "POST",
data: JSON.stringify(updateData),
contentType: "application/json",
success: function () {
// Optionally refresh the TreeList
$("#TreeList").data("kendoTreeList").dataSource.read();
console.log("AssignAsset ended from kendoDropTargetArea -> dragend -> Reorder");
},
error: function () {
alert("Reorder failed");
}
});
}
});
$("#AssetGrid").kendoDropTarget({
filter: "tbody tr",
group: "gridGroup", // Match the draggable group
drop: function (e) {
var parentGrid = $("#ParentGrid").data("kendoTreeList"); // Get the Kendo Grid instance
var dropTargetRow = $(e.dropTarget); //.closest("#ParentGrid tr.k-table-row.k-master-row"); // The row where the item was dropped
var targetItem = parentGrid.dataItem(dropTargetRow); // Target row data
console.log("Dragged Item:", draggedItem.Id);
console.log("Drop Target:", e.dropTarget);
console.log("Drop Target Row:", dropTargetRow);
console.log("Target Item:", targetItem.Id);
if (targetItem && draggedItem) {
//alert("Item '" + draggedItem.Title + "' dropped on Parent '" + targetItem.Name + "'");
// Add AJAX call here to save assignment in the database
$.ajax({
url: "/ParentChild/UnAssignAsset",
method: "POST",
data: { parentId: targetItem.Id, itemId: draggedItem.Id, parentItemId: targetItem.ParentItemId },
success: function (response) {
parentGrid.dataSource.read();
$("#AssetGrid").data("kendoGrid").dataSource.read();
console.log("AssignAsset ended from kendoDropTargetArea -> drop");
//parentGrid.refresh();
//alert("Assignment successful!");
},
error: function () {
alert("Error while assigning asset (Can't assign children to child asset).");
}
});
}
}
});
};
$(document).ready(function () {
// Make rows in the AssetGrid draggable
$("#AssetGrid").kendoDraggable({
filter: "tbody > tr", // Target rows in the grid
hint: function (element) {
return $("<div class='k-card k-card-type'><b>" + $(element).find("td:nth-child(2)").text() + "</b></div>");
},
group: "assetGroup"
});
var treeList = $("#ParentGrid").data("kendoTreeList");
// Configure drag-and-drop from TreeList to Grid
treeList.wrapper.kendoDraggable({
filter: "tr",
hint: function (element) {
var item = treeList.dataItem(element);
console.log("treeList.wrapper.kendoDraggable -> ", item);
return element;
},
group: "gridGroup"
});
window.initializeDropTargets();
});1 Answer, 1 is accepted
0
Hello Belish,
Thank you for the details provided.
Generally, The Telerik UI for ASP.NET Core TreeView and the Telerik UI for ASP.NET Core Grid expose draggable functionalities that separate one from the other. There is no direct integration between the two.
Regardless, I can suggest reviewing this Knowledgebase article on dragging nodes from a TreeView to a ListBox:
In addition, this article demonstrates a possible approach of dragging and dropping from one Grid to another Grid:
I hope this information was helpful.
Regards,
Ivaylo
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.