Binding GridColumn.Field to List

[Electa Baker]

I am trying to create a three-level Hierarchical Grid in a Syncfusion MVC Application (.NET Framework 4.8.) I create the data to be displayed in C#. Here is a condensed version of my C# code to explain the class structures of the objects created:

/*Condensed C# code*/
using System;
using System.Collections.Generic;
using System.Web.Mvc;
namespace SyncfusionMvcApplication4.Controllers
{
    public class DataGridController : Controller
    {
        public ActionResult DataGridFeatures()
        {
            List<LocationData> locations = GetAllLocations();
            List<ItemData> items = GetAllItems();
            List<RowData> rows = GetAllRows();
            ViewBag.datasource = locations;
            ViewBag.dataitems = items;
            ViewBag.datarows = rows;
            return View();
        }


       /*GetAllLocations, GetAllItems, GetAllRows Functions omitted for brevity*/
    }
    public class LocationData
    {
        public string locationId { get; set; }
        public string locationName { get; set; }
    }
    public class ItemData
    {
        public string itemId { get; set; }
        public string locationId { get; set; }
        public string supplier { get; set; }
        public string group { get; set; }
        public string description { get; set; }
        public int quantity { get; set; }
    }
    public class RowData
    {
        //Some of these values will be calculated dynamically, not taken from the database
        public string itemId { get; set; }
        public string rowId { get; set; }
        public string title { get; set; }
        public string notes { get; set; }
        public List<string> cellValues { get; set; }
    }
}

I have been able to confirm that the data is created and appears in the ViewBag as expected, using breakpoints. The Grids populate as expected, with the exception of the columns that ought to be populated with the information in RowData.cellValues. Here is the code I have used to create the Grid(s):

@using Syncfusion.EJ2
@{
    ViewBag.Title = "DataGridFeatures";
}
<div id="ControlRegion">
    @{
        var GrandChildGrid = new Syncfusion.EJ2.Grids.Grid()
        {
            DataSource = (IEnumerable<object>)ViewBag.datarows,
            QueryString = "itemId",
            Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="title", HeaderText="", Width="130" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="notes", HeaderText="Notes", Width="170" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[0]", HeaderText="Past Due", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[1]", HeaderText="This Week", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[2]", HeaderText="4/24/2023 - Week 1", Width="40" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[3]", HeaderText="5/1/2023 - Week 2", Width="40" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[4]", HeaderText="5/8/2023 - Week 3", Width="40" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="cellValues[5]", HeaderText="5/15/2023 - Week 4", Width="40" },
            }
        };
        var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
        {
            DataSource = (IEnumerable<object>)ViewBag.dataitems,
            QueryString = "locationId",
            Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {


            new Syncfusion.EJ2.Grids.GridColumn(){ Field="itemId", HeaderText="ItemId", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="description", HeaderText="Description", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="group", HeaderText="Group", Width="120" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="quantity", HeaderText="Quantity", Width="120" },
            },
            ChildGrid = GrandChildGrid
        };
    }


    @Html.EJS().Grid("MasterDetailsExport").DataSource((IEnumerable<object>)ViewBag.datasource).Columns(col =>
    {
        col.Field("locationId").HeaderText("LocationId").Width("125").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Add();
        col.Field("locationName").HeaderText("LocationName").Width("225").Add();
    }).AllowSorting().ChildGrid(ChildGrid).Render()
</div>

Please can you tell me the correct syntax to bind the columns to the List<string> cellValues member of the RowData Class?

[Pavithra Subramaniyam]

Hi Electa Baker,

We suggest the dot operator (.) bind complex field in EJ2 Grid. Please refer to the below documentation link for more information.

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/how-to/list-of-array-of-objects

Regards,

Pavithra S