Articles in this section
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 forumsDirect-Trac, or feedback portal. We are always happy to assist you!
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
Access denied
Access denied