How to display complex property in Grid column?

1 min read

Solution

Complex Property Binding is the process of binding a control (datagridview, listobject in excel) to a set of data items (a collection, IList, a DataTable). For example, a Grid has Datasource property that can be set to an ArrayList of strings or a DataSet.

<script>
        var data =   [{ "EmployeeID": 1, "Name": { "LastName": "Davolio", "FirstName": "Nancy" }, "Title": "Sales Representative", "OrderDate":new Date(836505e6), "phone": { "cc": 1, ac: "242", num: "555-1212", ext: "123" }, },
                      . . .
                      { "EmployeeID": 9, "Name": { "LastName": "Dodsworth", "FirstName": "Anne" }, "Title": "Sales Representative", "OrderDate": new Date(8364186e5), "phone": { "cc": 1, ac: "242", num: "345-3212", ext: "127" }, }]
                                $(function () {
                                    $("#Grid").ejGrid({
                                        dataSource: data,
                                        columns: [
                          { field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right},
                          { field: "Name.FirstName", headerText: 'First Name', textAlign: ej.TextAlign.Left }, //Complex Property Binding
                          { field: "Name.LastName", headerText: 'Last Name', textAlign: ej.TextAlign.Left}, //Complex Property Binding
                          { field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left},
                          { field: "OrderDate", headerText: 'Order Date', width: 150,format: "{0:dd/MM/yyyy}" },
                          { field: "phone.ext", headerText: 'Extension', textAlign: ej.TextAlign.Left},//Complex Property Binding
                          { field: "phone.ac", headerText: 'Phone.No', textAlign: ej.TextAlign.Left}//Complex Property Binding
                                        ]
                                    });
                                });
    </script>

MVC

@(Html.EJ().Grid<EJGridSample1.Models.Employee>("FlatGrid")
.Columns(col =>
        {
            col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.JavaScript.TextAlign.Right).Add();
            col.Field("Name.FirstName").HeaderText("First Name").TextAlign(Syncfusion.JavaScript.TextAlign.Left).Add();//Complex Property Binding
            col.Field("Name.LastName").HeaderText("Last Name").TextAlign(Syncfusion.JavaScript.TextAlign.Left).Add();//Complex Property Binding
            col.Field("Title").HeaderText("Title").Add();
            col.Field("OrderDate").HeaderText("Order Date").Format("{0:dd/MM/yyyy}").Add();
col.Field("phone.ext").HeaderText("Extension").TextAlign(Syncfusion.JavaScript.TextAlign.Left).Add();//Complex Property Binding
col.Field("phone.num").HeaderText("Phone.No").TextAlign(Syncfusion.JavaScript.TextAlign.Left).Add();//Complex Property Binding
})   
. . .
)

[ASPX]
<ej:Grid ID="EmployeesGrid" runat="server" AllowPaging="True" >
<Columns>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" IsPrimaryKey="True" />
<ej:Column Field="Name.FirstName" HeaderText="FirstName" />/>//Complex property Binding
<ej:Column Field="Name.LastName" HeaderText="LastName" />/>//Complex property Binding
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:dd/MM/yyyy}" />
<ej:Column Field="Title" HeaderText="Title" >
<ej:Column Field="phone.ext" HeaderText="Extension" />/>//Complex property Binding
<ej:Column Field="phone.num" HeaderText="Phone.No" />//Complex property Binding
</Columns>
</ej:Grid>