Foreign Key Column in ASP.NET MVC Tree Grid Component

17 Feb 20233 minutes to read

Since Tree Grid Databinding concept is based on hierarchy relationship, there is no in-built support for foreign key datasource. However, it is possible to display foreign key values in the Tree Grid at initial rendering as well as while Editing.

To display the foreignKey value at initial rendering, useQueryCellInfo event of the Tree Grid and and also for edit action use EditType and Column.edit properties of Tree Grid Column to render Dropdownlist with foreign datasource.

In the following code example, EmployeeID is a foreign column which shows EmployeeName from foreign data.

@{
    var DropDownList = new Syncfusion.EJ2.DropDowns.DropDownList() { DataSource = ViewBag.DropData, Query = "new ej.data.Query()", Fields = new Syncfusion.EJ2.DropDowns.DropDownListFieldSettings() { Value = "EmployeeID", Text = "EmployeeName" } };
}

@(Html.EJS().TreeGrid("TreeGrid").DataSource((IEnumerable<object>)ViewBag.datasource)
      .Columns(col =>
       {
        col.Field("EmpID").HeaderText("Emp ID").Width(90).TextAlign(TextAlign.Right).Add();
        col.Field("Name").HeaderText("Employee Name").Width(180).Add();
        col.Field("DOB").HeaderText("DOB").Format("yMd").TextAlign(TextAlign.Right).Width(90).Add();
        col.Field("EmployeeID").HeaderText("EmployeeID").Width(80).EditType("dropdownedit").Edit(new { @params = DropDownList }).TextAlign(TextAlign.Right).Add();
      }).Height(315).ChildMapping("Children").TreeColumnIndex(1).QueryCellInfo("queryCellInfo").Render()
)

<script>
    var jsonData = @Html.Raw(Json.Encode(ViewBag.DropData))
    function queryCellInfo(args) {
         if (args.column.field === "EmployeeID") {
            for (var i = 0; i < jsonData.length; i++) {
                let data = args.data;
                if (data[args.column.field] === jsonData[i]["EmployeeID"]) {
                    args.cell.innerText = jsonData[i]["EmployeeName"]; // assign the foreignkey field value to the innertext
                }
            }
         }
    }
</script>
public ActionResult Index()
{
    var treeData = TreeGridItems.GetTreeData();
    ViewBag.datasource = treeData;
	var emp = new Data().DataList();
    ViewBag.DropData = emp;
    return View();    
}

 public class Data{
      public string EmployeeName { get; set; }
      public string EmployeeID { get; set; }
      public List<Data> DataList() {
         List<Data> value = new List<Data>();
         value.Add(new Data { EmployeeName = "ANTOR", EmployeeID = "1" });
         value.Add(new Data { EmployeeName = "HANAR", EmployeeID = "2" });
         value.Add(new Data { EmployeeName = "VINCENT", EmployeeID = "3" });
         return value;
     }
 }

NOTE

You can refer to our ASP.NET MVC Tree Grid feature tour page for its groundbreaking feature representations. You can also explore our ASP.NET MVC Tree Grid example to knows how to present and manipulate data.