How to populate a tree in KendoUI?

Question

I am currently using the code:

@foreach (var table in Model.TableData)
{
    foreach(var field in table.Fields)
    {
        var tableName = table.TableName;
        var fieldName = field;

        @(Html.Kendo().TreeView().Name("DatabaseTables").DragAndDrop(true)

        .Items(treeview =>
          {
              treeview.Add().Text(tableName).Expanded(false).Items(fields =>
              {
                  fields.Add().Text(fieldName);
              });
          }))
    }
}

This is supposed to create a node for each table, and populate it with the fields but is obviously creating one tree per field in the table.

Answer 1

The trouble is your nesting. I typically don't use the html helpers, however I believe the correct use would look like the following.

    @(Html.Kendo().TreeView().Name("DatabaseTables").DragAndDrop(true)

    .Items(treeview =>
      {
          foreach (var table in Model.TableData)
           {
            var tableName = table.TableName;
            treeview.Add().Text(tableName).Expanded(false).Items(branch=>
            {
            foreach(var field in table.Fields)
              { 
                var fieldName = field;
                 branch.Items(fields =>
                 {
                 fields.Add().Text(fieldName);
                 });
           }});}
      }))

Your treeview creation is in your for loop and it needs to be on the outside, otherwise you will generate duplicate trees for each iteration.