Treelist always empty

[Francesco]

Hi,

I created a project and i need to put a treelist view to handle parents and child elements of a grid. I created a father and a child, but the page doesn't load any record in my grid. Am i missing something?

The attached files are the grid viewed in my page and the model received from the datasource

Here is the model

public class ProjectTaskViewModel
{
    public string IdTask { get; set; }
    public string FatherId { get; set; }
    public string TaskTitle { get; set; }
}

 

The View:

@(Html.Kendo().TreeList<Models.ProjectTaskViewModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(p => p.IdTask).Title(" ").Filterable(false).Sortable(false).Width("105px").Template("#=customformatter(Id)#");
            columns.Add().Field(p => p.TaskTitle).Title("Nsme");
        })
        .Pageable(p => p.Refresh(true).PageSize(20).PageSizes(new int[] { 20, 50, 100 }))
        .Sortable()
        .Filterable()
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("TreeViewDataSource", "ProjectTask").Data("CustomData")) //Function that contains correctly the IdProject param
            .ServerOperation(false)
            .Model(m => {
                m.Id<string>(p => p.IdTask);
                m.ParentId<string>(p => p.FatherId);
                m.Field(p => p.TaskTitle);
                m.Field<string>(p => p.FatherId);
            })
        )
    )

 

And finally the TreeViewDataSource:

public JsonResult TreeViewDataSource([DataSourceRequest]DataSourceRequest request, string IdProject)
{
    var temp = _db.ProjectTasks.Where(o => o.IdProject == IdProject).Select(o => new ProjectTaskViewModel
    {
        FatherId = o.ParentId,
        IdTask = o.Id,
        TaskTitle = o.Title
    });
     var result = temp.ToTreeDataSourceResult(request, o => o.IdTask, o => o.FatherId, o => o);
     return Json(result);
}

[Alex Hajigeorgieva]

Hi, Francesco,

Thank you very much for the provided resources.

I suppose that the reason why the TreeList is empty lies with the FatherId field. Please add to the model configuration that the ParentId is nullable so the TreeList can distinguish which are its root items. 

https://docs.telerik.com/aspnet-core/html-helpers/data-management/treelist/overview#basic-usage

m.ParentId<string>(p => p.FatherId).Nullable(true);

Let me know in case you have further questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Baracskai]

Hi Alex,

I have similar situation and nothing appear in the treelist. Can you help me please what can be the problem? Thank you!

Controller (GetAllStorageTreeItemsOfUser returns List<Model>):

[HttpPost]
       public JsonResult ReadAdvSearch([DataSourceRequest] DataSourceRequest request)
       {
           var result = REPO.GetAllStorageTreeItemsOfUser(this.GetCurrentUserId()).ToTreeDataSourceResult(request,
               e => e.StoragePath,
               e => e.StorageParentPath,
               e => e
           );

           return Json(result);
       }

 

 

 

Model:

public partial class StorageDto : DtoIdBase<int, Storage, StorageDto>
{
    public StorageDto() { }

    public StorageDto(Storage e) : base(e) { }

    public string Name { get; set; }
    public string StoragePath { get; set; }
    public string StorageFullPath { get; set; } //*//
    public string StorageParentPath { get; set; } = null;
    public string StorageParentFullPath { get; set; }
}

View:

            @(Html.Kendo().TreeList<StorageDto>()
    .Name("treeListAdvSearch")
    .Columns(columns =>
    {
        columns.Add().Field(e => e.Name).Width(220);
        columns.Add().Field(e => e.StorageFullPath).Width(360);
    })
    .Filterable()
    .Sortable()
    .DataSource(dataSource => dataSource
        .Events(e=> e.Error("onErrr"))
        .Read(read => read.Action("ReadAdvSearch", "Main"))
     //   .ServerOperation(false)
        .Model(m => {
            m.Id<string>(f => f.StoragePath);
            m.ParentId<string>(f => f.StorageParentPath).Nullable(true);
            m.Expanded(true);
            m.Field<string>(p => p.StoragePath);
            m.Field<string>(p => p.StorageFullPath);
            m.Field<string>(p => p.StorageParentPath);
            m.Field<string>(f => f.Name);
        })
    )
    .Pageable(p => p.PageSize(15)
                    .PageSizes(true)
    )
)

 

The Json response from browser:

{
   "Data":[
      {
         "Name":"998",
         "StoragePath":"/6/1/1/",
         "StorageFullPath":" ▶ RootFolder 3 ▶ ooo ▶ 998",
         "StorageParentPath":"/6/1/",
         "StorageParentFullPath":" ▶ RootFolder 3 ▶ ooo",
         "Id":97
      },
      {
         "Name":"999999dsffdssfd",
         "StoragePath":"/4/6/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ 999999dsffdssfd",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":80
      },
      {
         "Name":"ddd",
         "StoragePath":"/4/7/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ ddd",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":81
      },
      {
         "Name":"ddd1",
         "StoragePath":"/4/9/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ ddd1",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":83
      },
      {
         "Name":"dgf",
         "StoragePath":"/4/1/1/1/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ SubFolder 1 ▶ SubSubFolder 1 ▶ dgf",
         "StorageParentPath":"/4/1/1/",
         "StorageParentFullPath":" ▶ RootFolder 1 ▶ SubFolder 1 ▶ SubSubFolder 1",
         "Id":76
      },
      {
         "Name":"ooo",
         "StoragePath":"/6/1/",
         "StorageFullPath":" ▶ RootFolder 3 ▶ ooo",
         "StorageParentPath":"/6/",
         "StorageParentFullPath":" ▶ RootFolder 3",
         "Id":72
      },
      {
         "Name":"RootFolder 1",
         "StoragePath":"/4/",
         "StorageFullPath":" ▶ RootFolder 1",
         "StorageParentPath":"/",
         "StorageParentFullPath":" ▶ ",
         "Id":4
      },
      {
         "Name":"RootFolder 3",
         "StoragePath":"/6/",
         "StorageFullPath":" ▶ RootFolder 3",
         "StorageParentPath":"/",
         "StorageParentFullPath":" ▶ ",
         "Id":6
      },
      {
         "Name":"RootFolder 8",
         "StoragePath":"/4/12/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ RootFolder 8",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":88
      },
      {
         "Name":"uzuzu",
         "StoragePath":"/15/",
         "StorageFullPath":" ▶ uzuzu",
         "StorageParentPath":"/",
         "StorageParentFullPath":" ▶ ",
         "Id":94
      },
      {
         "Name":"www1",
         "StoragePath":"/14/1/1/",
         "StorageFullPath":" ▶ w1 ▶ ww1edited ▶ www1",
         "StorageParentPath":"/14/1/",
         "StorageParentFullPath":" ▶ w1 ▶ ww1edited",
         "Id":93
      },
      {
         "Name":"Dashoard 1",
         "StoragePath":"/4/3/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ Dashoard 1",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":10
      },
      {
         "Name":"Dashoard 2",
         "StoragePath":"/4/4/",
         "StorageFullPath":" ▶ RootFolder 1 ▶ Dashoard 2",
         "StorageParentPath":"/4/",
         "StorageParentFullPath":" ▶ RootFolder 1",
         "Id":11
      },
      {
         "Name":"File",
         "StoragePath":"/1/",
         "StorageFullPath":" ▶ File",
         "StorageParentPath":"/",
         "StorageParentFullPath":" ▶ ",
         "Id":1
      },
      {
         "Name":"iiiiiiiiiiiii",
         "StoragePath":"/16/",
         "StorageFullPath":" ▶ iiiiiiiiiiiii",
         "StorageParentPath":"/",
         "StorageParentFullPath":" ▶ ",
         "Id":95
      },
      {
         "Name":"vvd",
         "StoragePath":"/6/2/",
         "StorageFullPath":" ▶ RootFolder 3 ▶ vvd",
         "StorageParentPath":"/6/",
         "StorageParentFullPath":" ▶ RootFolder 3",
         "Id":96
      }
   ],
   "Total":16,
   "AggregateResults":{

   }
}

 

Thank you for help!

 

BR,László

 

[Baracskai]

Hi, finally I find the solution:

public JsonResult ReadAdvSearch([DataSourceRequest] DataSourceRequest request)
{
    var result = REPO.GetAllStorageTreeItemsOfUser(this.GetCurrentUserId(), true)
        .ToTreeDataSourceResult(request,
        e => e.StoragePath,
        e => e.StorageParentPath
    );

    return Json(result, new JsonSerializerSettings());
}

[Frode]

Thanks, you got me in the right direction. I had to add new JsonSerializerOptions() though. Strange that the examples doesn't mention that the camel casing cannot be used.

[Ramesh]

Thanks a lot, Adding new JsonSerializerOptions() fixed my issue. Which is not not mentioned in the examples. Telerik Guys, can you please add this in example to not to waste of the developers time and burning their mind. Thanks in advance

[Mihaela]

Thank you for your feedback, Ramesh.

The JSON serialization is mentioned in the Getting Started section. However, we will add a note in the Overview articles of all data-bound components (for example, TreeList Overview).

Best,

Mihaela

[Alex Hajigeorgieva]

Hello, Baracskai,

Thank you for sharing your solution with the Kendo UI community.

An article that is relevant since Microsoft changed their default JSON serialization is available here:

https://docs.telerik.com/aspnet-core/compatibility/json-serialization

Regards,
Alex Hajigeorgieva
Progress Telerik