Complex Data Binding

24 Feb 20222 minutes to read

You can achieve complex data binding in the grid by using the dot(.) operator in the field property of e-grid-column tag helper.

<ejs-grid id="Grid" dataSource="@ViewBag.data" height="315" >     
    <e-grid-columns>
        <e-grid-column field="EmployeeID" headerText="Employee ID"   width="120"  textAlign="Right"></e-grid-column>
        <e-grid-column field="Name.FirstName" headerText="Last Name"  width="120"></e-grid-column>               
        <e-grid-column field="Name.LastName"  headerText="Last Name"  width="120"></e-grid-column>
        <e-grid-column field="Title"  headerText="Title"  width="150"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
public IActionResult Index()
{
    var ComplexData = ComplexData.GetAllRecords();
    ViewBag.data = ComplexData;
    return View();
}

For OData and ODataV4 adaptors, you need to add expand query to the query property (of Grid), to eager load the complex data.

<ejs-grid id="Grid" query="new ej.data.Query().expand('Employee')" >
    <e-data-manager url="https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders" adaptor="ODataAdaptor" crossdomain="true"></e-data-manager>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" type="number" textAlign="Right" width="120"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" type="string" width="140"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" textAlign="Right" format="C2" width="120"></e-grid-column>
        <e-grid-column field="Employee.City" headerText="City" width="140"></e-grid-column>
    </e-grid-columns>
 </ejs-grid>
public IActionResult Index()
 {   
    return View();
 }