Articles in this section
Category / Section

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.

 

JS

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

 

The following screenshot displays the complex property in Grid column.

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment