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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book