Kendo UI TreeView and Datasource: from basic to SPA

Question

I am working moving a very simple sample using Kendo UI Treeview and ASP.Net MVC TO ASP.Net MVC SPA (durandal + breeze). Use kendo UI + ASP.NET MVC is very simple since just we have to use a sintaxis like this on my client side:

  jQuery(function () {
            jQuery("#treeview").kendoTreeView({
                    "dataSource":{
                        "transport":{
                            "prefix": "",
                            "read":{"url": "http://localhost:49729//treeview/operations"}
                        },
                        "schema":{"errors": "Errors"}},
                    "dataTextField": "Name"
                }
            );});

And in my controller use something like this:

public JsonResult Operations(int? id)
    {
        var manager = new OperationUnitManager();

        var objects = from o in manager.GetList()
                      where (id.HasValue ? o.ParentId == id : o.ParentId == null)
                      select new
                      {
                          id = o.Id,
                          Name = o.Name,
                          hasChildren = o.HasChildren
                      };
        return Json(objects, JsonRequestBehavior.AllowGet);
    }

Very simple! TreeViewControl get the data from the service using LoadOnDemand=true,so that the control will get the id for the selected treenode and it will call to Operation method in order to get all the child nodes. very simple!

Now when I want use the same control using the mvvm pattern and breeze(base on https://github.com/jstott/breeze-kendo) the control doesn't work.. it just show a message "loading .." The code what I am using for my viewmodel is:

define(['services/logger', 'services/datacontext'], function (logger, datacontext) {
var vm = function () {
    var self = this;
    this.activate = function () {
        logger.log('Organisation View Activated', null, 'Organisation', true);
        return true;
    };

    this.viewAttached = function (view) {
        logger.log('viewAttached', this.title, 'Organisation', true);
        $('#treeView').kendoTreeView(this.treeViewOptions);
    };
    this.datacontext = datacontext;
    this.title = 'Organisation View';
    this.treeViewOptions = {
        dataTextField: 'Description',
        dataSource: new kendo.data.extensions.BreezeDataSource({
            entityManager: self.datacontext.manager,
            endPoint: "TreeObjects"
        })
    };
};
return vm;

});

The View:

<section>
   <h2 class="page-title" data-bind="text: title"></h2>
   <div id="treeView"></div>
</section>

The Controller (using Breeze):

   [HttpGet]
    public String Metadata()
    {
        return _contextProvider.Metadata();
    }

    [HttpGet]
    public IQueryable<TreeNode> TreeObjects()
    {
        var repository = new OrganisationRepository(_contextProvider.Context);
        var username = "AnyUser";
        var treeNodes= repository.GetTreeNodes(username);
        return treeNodes.AsQueryable();
    }

If you see in the first two blocks of code the server method is called every time when some treenode in the tree is expanded (using id as parameter). BUT for the case of breeze the query should be made in js code every time when a node is expanded... AND I don't know to get that working. Any idea how to solve it?

Any advice is welcome!

Answer 1

Finally I ignored breeze and I used just kendo TreeView js library. Some code bellow:

public JsonResult TreeObjects()
{
    var repository = new OrganisationRepository(MyDataContext);
    var username = "AnyUser";
    var treeNodes= repository.GetTreeNodes(username);
    return Json(treeNodes, JsonRequestBehavior.AllowGet);
}

The Controller should not use Breeze

public class OrganizationTreeController :Controller {}

the View:

<section>
  <h2 class="page-title" data-bind="text: title"></h2>
  <div id="treeView"></div>
</section>

The ViewModel:

define(['services/logger'],
 function (logger) {
     var populate = function () {

         logger.log('Organisation Control view loaded', null, 'Organisation', true);
         $('#treeView').kendoTreeView(
             {
                 "dataSource":
                     {
                         "transport":
                             {
                                 "prefix": "",
                                 "read":
                                     {
                                         "url": "http://localhost:51123/OrganizationTree/Operations"
                                     }
                             },
                         "schema":
                             {
                                 model: {
                                     id: "id",
                                     hasChildren: "hasChildren"
                                 },
                                 "errors": "Errors"
                             }
                     },
                 "dataTextField": "Name"
             }
         );                  


     };

That's it: Now i have working Kendo UI TreView inside of Hot Towel template :). i hope help you!