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);
}
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|