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.