Server side grid with complex data bindings with array

Question

Hi, The documentation specifies we can bind complex data with a list of array objects like this.

How can I do this with a server-side grid defined like this?

How do I iterate or show all array objects?

Thanks

Santhosh Iruthayaraj · Answer

Hi Brendton,Greetings from Syncfusion Support!To iterate over and display all columns from a complex dataSource with an array, you can utilize a for loop. However, there are some points you need to understand clearly before proceeding with the solution.Firstly, in order to loop through and display every object from every array in every record, you need to know the maximum possible length of the complex dataSource array. Since each record has its own array, the length of the array may differ from one record to another. Therefore, to loop through and display every object in an array as a column, you need to determine the maximum possible length of the array and use it iteration.Another point to note is that, from your code sample for the iterative columns, we noticed that you have added code to generate the column "headerText" from the dataSource via complex property binding. Please note that "headerText" cannot be generated from the dataSource by the Grid; it can only be provided as static text for as same as for the normal columns. In our Complex Data Binding documentation also, we only bind the "field" property with complex property binding to access the complex data, while "headerText" is bound as static text.These points are crucial in order to loop through and create columns for the array from the complex dataSource successfully. Below is the code snippet for your reference: [CSHTML]

@for (int i = 0; i < 3; i++) {

}

In the above code, a for loop has been added to generate three columns iteratively based on the provided length. As explained earlier, the length property must be known prior to creating the column, so that the for loop can generate the columns accordingly. In our sample dataSource, the array from each record can contain a maximum of three objects. Therefore, we have provided "3" as the maximum value in the for loop.Inside the loop, each column's "field" and "headerText" are generated using the iterative variable "i". As depicted in the code, we only bind the "field" property with complex property binding, and "headerText" is simply a text which will be displayed on the header. This is the second point we explained in the explanation above and you cannot take "headerText" from the dataSource, because it only accepts text. Even if you bind complex data properties, it will consider them as text as well. We have attached a screenshot of the preview of the code below for your reference:[Result]As you can see in the code and the above images, all the product related columns are generated from the for loop and the "field" property with complex property binding is responsible for populating the data, while "headerText" is displayed simply as a result of the statement in the "headerText" definition. Since we have the maximum length of the array as 3 in the for loop, a total of 3 sections of product columns are generated. You can notice that some cells are empty; this is because not every array in every record has 3 objects. We only provided the maximum possible length of the array. So some record’s arrays do have 3 objects and some don’t. This is the reason some cells are empty.We have attached the sample for your reference below. We hope the provided solution and explanation will resolve your concerns. Please let us know if you have any further queries.Regards,Santhosh IAttachment: CoreGridApp_f4c4c739.zip