How to display array of strings within a Grid column?
Solution
Object Array Binding is the process of binding an array within JSON object to a control. For example, JSON object data is bounded to Grid DataSource property and the inner array Name of the JSON object is bounded to the Grid columns using the helper functions.
- Render the Grid.
JS
<script>
var data = [{ "EmployeeID": 1, "Name": [{ "LastName": "Davolio"}, {" LastName ": "Nancy" }], "Title": "Sales Representative", "OrderDate":new Date(836505e6 },
. . .
{ "EmployeeID": 9, "Name": [{ "LastName": "Dodsworth"}, {"LastName": "Anne" }], "Title": "Sales Representative", "OrderDate": new Date(8364186e5)}]
$(function () {
$("#Grid").ejGrid({
dataSource: data,
columns: [
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right},
{ field: "Title", headerText: 'Title', textAlign: ej.TextAlign.Left},
{ field: "OrderDate", headerText: 'Order Date',format: "{0:dd/MM/yyyy}" },
{ template: true, templateID: "#Arraybinding", headerText: 'LastName', textAlign: "center"}
]
});
});
</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("Title").HeaderText("Title").Add();
col.Field("OrderDate").HeaderText("Order Date").Format("{0:dd/MM/yyyy}").Add();
col.HeaderText("Last Name").Template(true).TemplateID("#Arraybinding").TextAlign(TextAlign.Center). Add();
})
. . .
)
ASP
<ej:Grid ID="OrdersGrid" runat="server">
<Columns>
<ej:Column Field="EmployeeID" HeaderText="Employee ID" />
<ej:Column Field="Title" />
<ej:Column Field="OrderDate" HeaderText="Order Date" Format="{0:MM/dd/yyyy}"/>
<ej:Column Template="true" TemplateID="#ArrayBinding" HeaderText="Last Name" />
</Columns>
</ej:Grid>
- In the following code example, getVal is the name of the helper function. The inner array of the JSON object and the element of the inner array are passed as arguments to the helper function.
JS
<script type="text/x-jsrender" id="Arraybinding">
{{:~getVal(Name,"LastName")}}
</script>
$(function () {
$.views.helpers({
getVal: function(val, property){
return val.map(function(s){return s.LastName}).join();//The inner array element is converted as a string and returned to the column template.
}});
});
The following screenshot displays the array of strings within the Grid Column.
Conclusion
I hope you enjoyed learning about how to display array of strings within a 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!
