Kendo Tree View doesn't load properly

Question

I wanna create a kendo ui tree view with remote data source in Asp.net mvc4. I'm having a problem with knowledge about kendo. I've tried those examples in kendo website .

But i couldn't even get those images to the treeView.

About the project : This project is to create a TreeView menu for load web forms. Each web form can be taken as an formObject. That objects has following attributes

1. name
2. id
3. List of child objects (List childs)

Here is my Codes on the Controller

  public class HomeController : Controller
{
    ObjectService service = new ObjectService();
    private int cky = 11;
    private int usrky=28;

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetAllMenu(int prntKy = 1)// initially the parent key is = 1 
    {
        List<ObjectModel> objects = new List<ObjectModel>();
        objects = service.GetObjectsByPrntKy(prntKy, cky, usrky);//get all parent nodes

        List<TreeViewModel> tree = new List<TreeViewModel>();

        if (objects != null)
        {
            foreach (ObjectModel model in objects)//for each parent node
            {
                TreeViewModel treeObj = new TreeViewModel();

                treeObj.id = model.ObjKy;
                treeObj.name = model.ObjNm;
                treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
                tree.Add(treeObj);
            }
        }


        return Json(tree, JsonRequestBehavior.AllowGet);

    }

    private List<TreeViewModel> GetChileByPrntObjKy(int prntKy)// method to get child nodes
    {
        List<TreeViewModel> tree = new List<TreeViewModel>();

        List<ObjectModel> Objects = new List<ObjectModel>();

        Objects = service.GetAllObjects();

        foreach (ObjectModel model in Objects)
        {

            TreeViewModel treeObj = new TreeViewModel();

            if (model.PrntObjKy == prntKy)
            {
                treeObj.id = model.ObjKy;
                treeObj.name = model.ObjNm;
                treeObj.childrens = GetChileByPrntObjKy(model.ObjKy);
                tree.Add(treeObj);
            }

        }
        return tree;
    }

}

Here is the model

    public class TreeViewModel
{
    public int pid { get; set; }
    public int id { get; set; }
    public string name { get; set; }
    public List<TreeViewModel> childrens { get; set; }
}

    public class ObjectModel
{
    public long UsrObjPrmsnKy { get; set; }
    public long UsrKy { get; set; }
    public int ObjKy { get; set; }
    public string ObjCd { get; set; }
    public string ObjNm { get; set; }
    public string ObjCaptn { get; set; }
    public bool isPrntObj { get; set; }
    public Nullable<int> PrntObjKy { get; set; }
    public int CallObjKy { get; set; }
    public string ObjPath { get; set; }
    public bool isAlwAcs { get; set; }
    public bool isAlwAdd { get; set; }
    public bool isAlwUpdate { get; set; }
    public bool isAlwDel { get; set; }
    public bool isAlwApr { get; set; }
}

and here is the View

        <div id="treeview">
    </div>
    <script type="text/javascript">

        $(document).ready(function () {
            LoadTreeView(1);
        });

        function LoadTreeView(prntKy)
        {
            var key = prntKy;
            homogeneous = new kendo.data.HierarchicalDataSource({
                transport: {
                    read: {
                        url: '@Url.Content("~/Home/GetAllMenu")',
                        data:{'prntKy':key},
                    dataType: "json"
                }
            },
                schema: {
                    model: {
                        id: "id",
                        hasChildren: "childrens",
                        name: "name"
                    }
                }
            });

        $("#treeview").kendoTreeView({
            dataSource: homogeneous,
            select: onSelectTree,
            dataTextField: "name",
            dataValueField: "id",
        });
        }

        function onSelectTree(e) {
            var data = $('#treeview').data('kendoTreeView').dataItem(e.node);
            alert(data.id);
            LoadTreeView(data.id);
        }
    </script>

I have uploaded the results images too. Please help me.

Answer 1

Your treeview isn't properly configured. You seem to be reinitializing it every time a node is selected which is redundant. I suggest you check the remote binding demo which implements a very similar case to yours. Here is how the treeview declaration looks:

var serviceRoot = "http://demos.kendoui.com/service";
    homogeneous = new kendo.data.HierarchicalDataSource({
       transport: {
          read: {
             url: serviceRoot + "/Employees",
             dataType: "jsonp" // you don't need "json" for your case
          }
       },
       schema: {
          model: {
             id: "EmployeeId",
             hasChildren: "HasEmployees"
          }
       }
   });

$("#treeview").kendoTreeView({
   dataSource: homogeneous,
   dataTextField: "FullName"
});

In this demo the treeview will ask the data source to load a new level of nodes when a parent node is expanded. For example when the user expands the root node in that demo the data source makes request to http://demos.kendoui.com/service/Employees?EmployeeId=2 which means "return the children of the node whose EmployeeID is equal to 2". Why "EmployeeId"? Because this is what the "id" of the data source model is:

  schema: {
     model: {
        id: "EmployeeId",
        hasChildren: "HasEmployees"
     }
  }