kendo ui treeview drag and drop MVC 5

kendo ui treeview drag and drop MVC 5

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.


The HTML code sample 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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

kendo ui treeview drag and drop MVC 5 kendo ui treeview drag and drop MVC 5 Reviewed by Anil Singh on 1:18 AM Rating: (5)
www.code-sample.com/. Powered by Blogger.
^