How to bind from 2-level Entity Framework Model to Treeview

[Terry]

Hi:

I have a Company entity with a collection of child Employee entities.  The controller is defined like this:

public JsonResult JsonIndex()
{
    //var allCompanies = _db.Companies;

    var allCompanies = from c in _db.Companies
                       select new
                    {
                        CompanyName = c.CompanyName,
                        hasChildren = c.Employees.Any(),
                        ImageUrl = "/Images/icons/Employee3_16.png",
                        children = from e in c.Employees
                        select new
                        {
                            CompanyName = e.FirstName,
                            hasChildren = false,
                            ImageUrl = "/Images/icons/Company20_16.png",
                        }
                    };

    JsonResult json = Json( allCompanies,JsonRequestBehavior.AllowGet );
    return (json);
}

The company entities appear in the first level of the treeview correctly.  Where there are employees, the graphic on the left appears, but when I try to click on it to show them, it disappears.  As you can see, I am renaming the columns in the employee records to match the same names so they should bind correctly, shouldn't they?  I've looked at the remote data example, but the demos won't work on my machine (I've got another post asking about that), so I can't see what the json string should look like.

My Razor MVC cshtml looks like this:

@(Html.Kendo().TreeView()
      .Name("treeview2")
      .DataTextField("CompanyName")
      .DataImageUrlField("ImageUrl")
      .LoadOnDemand(true)
      .HighlightPath(true)
      .Events( events =>
        events.Change( "onTreeViewChange")
      )
      .DataSource(dataSource => dataSource
                                    .Read(read => read
                                                      .Action("JsonIndex", "Home")
                                    )
      )
      )

The employee entities exist correctly when I view them from the controller code.  Can you tell me what I am missing?

Thanks,

Terry

[Petur Subev]

Hello Terry,

When using the MVC wrappers you are not able to configure heterogeneous hierarchical dataSource.

I can suggest you to take a look at the following demo which demonstrates how you can achieve different types used on the different levels of the TreeView.

http://demos.kendoui.com/web/treeview/odata-binding.html

The only thing that you do not actually need to configure is the type of the dataSource to be odata.

Kind Regards,
Petur Subev
Telerik

[Terry]

Thanks, Petur, that was the solution.

For anyone who is interested, my revised javascript is below.

A couple of follow-up questions:
1. notice I have an onTreeViewChange event.  The event handler pops up the url in a separate Kendo window.  However, if I specify the url in dataUrlField, navigation directly to the current window happens and the change event is naturally never called.  Is there anyplace in the treeview items that I can stuff the url where my javascript can find it (something like a .Tag field)?

2. When fully fleshed out, I want to have the following hierarchy:
Company
    Employees 
        Employee 1
        Employee 2
        ...
    Customers
        Customer 1
            Projects
                Project 1
                Project 2
                ...
        Customer 2
        ...
In short, I need two types of children living under Company..  It does not look like the hierarchical datasource supports this.  Is that the case?  If so, I will need to manually add all of the treeview items in javascript.

Thanks for your great support!

Terry

function populateTreeView() {
    var remoteDataSource = new kendo.data.HierarchicalDataSource({
        type: "json",
        transport: {
            read: "Home/JsonIndex"
        },
        schema: {
            model: {
                text: "Name",
                ImageUrl: "ImageUrl",
                expanded: false,
                children: "Employees",
                hasChildren: "hasChildren",
                NavUrl: "NavUrl"
            }
        }
    });

    $("#tv").kendoTreeView({
        dataSource: remoteDataSource,
        dataTextField: "Name",
        dataImageUrlField: "ImageUrl",
        dataUrlField: "NavUrl",
        change: onTreeViewChange
        });
}

$(document).ready(function () {
    populateTreeView();
});

[Petur Subev]

Hello again Terry,

To the questions:
1) dataUrlField  makes the item navigate you to a different page and in that case selection is not supported. Clicking on items will navigate not change selection. Consider using the select event which is triggered when item is clicked.

2) Indeed the TreeView does not support different types of model for the same level of the TreeView.

Regards,
Petur Subev
Telerik