1. Home
  2. Forum
  3. Angular - EJ 2
  4. Populate data column with dynamic array child property

Populate data column with dynamic array child property

Hi team,

I have a few columns that I need populate with an array child property, but the value that needs to be shown for specific row an specific column there is not always in the same array index beside that I need to populate that column based on a condition, for example, I have an array child property where I can have either 2 child objects or 6 child objects inside of it, and they are not always the same objects in the same position. Those object have 2 properties { key: string, value: string } and I need to validate if a particular object has specific "key" to set "value" property as column/cell value:



[
  {
    property1: 'value',
    property2: 'value2',
    property3: 'value3',
    myArray: [
      {
        key: 'key1',
        value: 'value1'
      },
      {
        key: 'key2',
        value: 'value2'
      },
      {
        key: 'key3',
        value: 'value3'
      }
    ]
  },
  {
    property1: 'value',
    property2: 'value2',
    property3: 'value3',
    myArray: [
      {
        key: 'key1',
        value: 'value1'
      },
      {
        key: 'key2',
        value: 'value2'
      }
    ]
  },
  {
    property1: 'value',
    property2: 'value2',
    property3: 'value3',
    myArray: [
      {
        key: 'key1',
        value: 'value1'
      },
      {
        key: 'key2',
        value: 'value2'
      },
      {
        key: 'key3',
        value: 'value3'
      },
      {
        key: 'key4',
        value: 'value4'
      },
      {
        key: 'key5',
        value: 'value5'
      },
      {
        key: 'key6',
        value: 'value6'
      }
    ]
  }
]


How I can populate my grid with this kind of complex data?


1 Reply
RS Rajapandiyan Settu Syncfusion Team February 14, 2023 11:54 AM UTC

Hi Edel,


Thanks for contacting Syncfusion support.


By default, the EJ2 Grid column only supports number, string, date, dateTime, and boolean type values, and it does not support array types of values. Refer to the below documentation.


columnType: https://helpej2.syncfusion.com/angular/documentation/grid/columns/columns#column-types


We can show an array of values in the Grid column using columnTemplate/valueAccessor features. But, this is used only for display purposes. We cannot perform any Grid actions like Filtering, Sorting, CRUD, column-spanning, Searching, Grouping, etc., on the array-type column. This is the behavior of EJ2 Grid.


columnTemplate: https://helpej2.syncfusion.com/angular/documentation/grid/columns/column-template
valueAccessor: https://helpej2.syncfusion.com/angular/documentation/grid/columns/columns#display-array-type-columns

Regards,

Rajapandiyan S


Loader.
Up arrow icon