Category / Section
How to display complex property process in JavaScript Grid column?
4 mins 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) in JavaScript Grid. 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.
Conclusion
I hope you
enjoyed learning on how display complex property process in JavaScript Grid
column.
You can refer to our JavaScript Grid feature
tour page to know about its other groundbreaking feature
representations and documentation, and
how to quickly get started for configuration specifications. You can also
explore our JavaScript Grid example to understand how to
create and manipulate data.
For current
customers, you can check out our components from the License and Downloads page. If
you are new to Syncfusion, you can try our 30-day free trial to
check out our other controls.
If you have any queries or require
clarifications, please let us know in the comments section below. You can
also contact us through our support forums, Direct-Trac, or feedback portal. We
are always happy to assist you!
