Last Updated: 24 Jul 2020 07:57 by ADMIN
Created on: 12 May 2020 13:45
Category: TreeList
Type: Feature Request
Treelist needs more alignment (for grid)foreignkey

Align more to grid items (since treelist is essentially a grid with parent/child).  Need a ForeignKey element to allow for helpers etc. instead of forcing override and manual Templates.

                columns.Add().Field(n => n.StatusId).Title("Status").Width(150).Template("#=statustemplate(data)#");
                columns.Add().Field(n => n.CategoryId).Title("Category").Width(150).Template("#=categorytemplate(data)#");

ForeignKeys should be treated the same was a grid elements and allow for the UIHint, etc.

Full alignment of the .Add function to .Bound in grid would be nice as well, but naming is as critical as the functionality.

This item is a duplicate of an already existing item. You can find the original item here:
1 comment
Alex Hajigeorgieva
Posted on: 24 Jul 2020 07:57

Hi, Eric,

Thank you for the suggestion.

Until this item gains more popularity, I wanted to add one approach to get the same functionality:

  • Return the collection of Key-Value pairs in the ViewData
  • Parse the ViewData on the client and use it in a template
  • Use an Editor Template

public ActionResult Index()
     // Tasks are a collection. A task has an Id and a Title.
     ViewData["tasks"] = GetTasks();
      return View();
// the TreeList column is bound to the TaskId property
columns.Add().Field(e => e.TaskId).Title("Task").Template("#=getText(data)#");

     // for ASP.NET Core
     var tasks = @Html.Raw(Json.Serialize(ViewData["tasks"]));
    // for ASP.NET MVC
    var tasks = @Html.Raw(Json.Encode(ViewData["tasks"]));
    var tasksMappingObj = convertToObject(tasks);

    function getText(data) {
        return tasksMappingObj[data.TaskId] || "";

    function convertToObject(array) {
        var result = {},

        for (idx = 0, length = array.length; idx < length; idx++) {
            item = array[idx];
            result[item.Id] = item.Title; // example => result[11] = "Pending";

        return result;

Kind Regards,
Alex Hajigeorgieva
Progress Telerik