Trying to develop a Syncfution data grid based on the object list

[R Hemachandra]

Hello there,

I'm trying to develop a data table based on the following object list 

{

name : Sherin,

age : 25,

address : UK,

otherData : { {Id : 1123, displayName : Category 1, status : active},

                     {Id : 1124, displayName : Category 2, status : active},

                     {Id : 1125, displayName : Category 3, status : active},

                    {Id : 1126, displayName : Category 4, status : active},

                    {Id : 1127, displayName : Category 5, status : active},

                   }

},

{

name : Miyami,

age : 29,

address : UK,

otherData : { {Id : 1123, displayName : Category 1, status : active},

                       {Id : 1124, displayName : Category 2, status : active},

                       {Id : 1125, displayName : Category 3, status : active},

                       {Id : 1126, displayName : Category 4, status : active},

                       {Id : 1127, displayName : Category 5, status : active},

                      }

}

I'm trying to develop this table based on the above object list 

			Other Data
name	age	address	Option 1	Option 2	Option 3	Option 4	Option 5
Shani	25	UK	Editable cell	Editable cell	Editable cell	Editable cell	Editable cell
Miyami	29	UK	Editable cell	Editable cell	Editable cell	Editable cell	Editable cell

Could you kindly help me to sort this problem ?

[Rajapandi Ravi]

Hi Hemachandra,

Greetings from Syncfusion support

We have checked your shared dataSource and we could see that you are having complex data with list of array objects in your datasource. The following example shows how to set Complex field for datasource having Array Of Objects. Please refer the below code example, sample and documentation for more information.

 

<ejs-grid id="Grid" allowPaging="true" load="load">

    <e-grid-pagesettings pageSize="7"></e-grid-pagesettings>

    <e-grid-columns>

        <e-grid-column field="name" headerText="Name" width="100"></e-grid-column>

        <e-grid-column field="age" headerText="Age" editType="numericedit" format="C2" width="120"></e-grid-column>

        <e-grid-column field="address" headerText="Address" width="120"></e-grid-column>

        <e-grid-column headerText="otherData" columns="@( new List<Syncfusion.EJ2.Grids.GridColumn>() { new Syncfusion.EJ2.Grids.GridColumn { Field = "otherData.0.Id", Width = "140", HeaderText = "ID" },

                                                          new Syncfusion.EJ2.Grids.GridColumn { Field = "otherData.0.displayName", Width = "145", HeaderText = "Display Name" },

                                                          new Syncfusion.EJ2.Grids.GridColumn { Field = "otherData.0.status", Width = "145", HeaderText = "Status" }} )">

        </e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<script>

    var data = [{

 

        name: 'Sherin',

 

        age: 25,

 

        address: 'UK',

 

        otherData: [

            { Id: 1123, displayName: 'Category 1', status: 'active' },

 

            { Id: 1124, displayName: 'Category 2', status: 'active' },

 

            { Id: 1125, displayName: 'Category 3', status: 'active' },

 

            { Id: 1126, displayName: 'Category 4', status: 'active' },

 

            { Id: 1127, displayName: 'Category 5', status: 'active' }]

 

    },

 

    {

 

        name: 'Miyami',

 

        age: 29,

 

        address: 'UK',

 

        otherData: [

            { Id: 1123, displayName: 'Category 1', status: 'active' },

 

            { Id: 1124, displayName: 'Category 2', status: 'active' },

 

            { Id: 1125, displayName: 'Category 3', status: 'active' },

 

            { Id: 1126, displayName: 'Category 4', status: 'active' },

 

            { Id: 1127, displayName: 'Category 5', status: 'active' }]

 

        }];

 

    function load(args) {

        var grid = document.getElementById('Grid').ej2_instances[0];

        grid.dataSource = data;

    }

</script>

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/180333-822672433.zip

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/how-to/list-of-array-of-objects#complex-data-binding-with-list-of-array-of-objects

                              https://ej2.syncfusion.com/aspnetcore/documentation/grid/columns/complex-data-binding