Hello everyone, I am going to share the code
sample for drag and drop node in kendo ui using mvc and jQuery as given below.
<div class="row">
<div class="col-lg-12">
<div class="panel
panel-primary">
<div class="panel-heading">
<h3 class="panel-title"><i class="fa
fa-list"></i>Detail List</h3>
</div>
<div id="divCostCenterTreeView" class="panel-body remove-padding">
@(
Html.Kendo().TreeView()
.Name("treeViewCostCenters")
.DragAndDrop(true)
.DataTextField("Name")
.DataSource(ds => ds
.Read(read =>
read.Action("CostCentersTreeHierarchy", "CompanyAdmin")))
.Events(e =>
{
e.DragStart("onDragStart");
e.Drop("onDrop");
})
)
</div>
</div>
</div>
</div>
The JavaScript with Kendo UI code sample as given below,
<script type="text/javascript">
var _DraggedCostCenterID = 0;
function onDragStart(e) {
var treeview = $("#treeViewCostCenters").data("kendoTreeView");
getCostCenterIdByName(treeview.text(e.sourceNode), $('#hdnType').val());
}
function onDrop(e) {
var treeview = $("#treeViewCostCenters").data("kendoTreeView");
var droppedOn = e.sender.dataItem(e.destinationNode);
if (e.valid) {
updateCostCenterTreeView(_DraggedCostCenterID, droppedOn.id);
}
else {
alert("Invalid location.");
}
}
function getCostCenterIdByName(draggedText, type) {
var _url = _url = 'API/BusinessEntity/GetCostCenterIDByName/' + draggedText + '/' + TenantID + '/' + CompanyID;;
pcx.ajaxCall.ajaxSync(_url, null, 'GET', function (data) {
if (data !== undefined && data !== null) {
_DraggedCostCenterID = data;
}
});
}
The C# MVC 5 code sample as given below,
function updateCostCenterTreeView(DraggedCostCenterID,
DroppedCostCenterID) {
//#region
UPDATE THE COST CENTERS IN THE DATABASE
var _url = 'API/BusinessEntity/UpdateCostCenter/' + DraggedCostCenterID + '/' + DroppedCostCenterID;
pcx.ajaxCall.ajaxSync(_url, null, 'GET', function (data) {
//#region
SET THE '_DraggedCostCenterID' VARIABLES TO THE DEFAULT VALUE
_DraggedCostCenterID = 0;
//#endregion
//$('#divCostCenterTreeView').load();
var tree = $("#treeViewCostCenters").data("kendoTreeView");
tree.dataSource.read();
});
//#endregion
}
</script>
public System.Web.Mvc.JsonResult CostCentersTreeHierarchy(int? id, int CompanyID)
{
List<BusinessEntity> dBusinessEntity = new List<BusinessEntity>();
DALBusinessEntity objDalBusinessEntity = new DALBusinessEntity();
dBusinessEntity =
mapper.MapDALBusinessEntities2BAL(objDalBusinessEntity.getBusinessEntityByCompanyID(CompanyID));
if (id == null)
id = 0;
var myEntity = from be in dBusinessEntity
where (id.HasValue ? be.ParentID
== id : be.ParentID == null)
orderby be.Name ascending
select new
{
id = be.ID,
Name = be.Name,
hasChildren =
be.ID
};
return Json(myEntity, JsonRequestBehavior.AllowGet);
}