We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Binding GridColumn.Field to List

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 =>

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

1 Reply

PS Pavithra Subramaniyam Syncfusion Team April 21, 2023 11:01 AM UTC

Hi Electa Baker,

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



Pavithra S

Live Chat Icon For mobile
Up arrow icon