Object Type Field

Can display data of ObjectType. By default, it cannot be edited, but can be edited by specifying an ObjectKey. If you specify an ObjectKey, only the specified property value will be edited/displayed.

//Type of data
[
   {
     "Person": {
       "Name": "Park Young-ho",
       "Address": "45-89 Gonghang-dong, Gangseo-gu, Seoul"
     },
     "Gender": "Male",
     "Age": "71",
...
   },
   {
     "Person": {
       "Name": "Jo Il-hyung",
       "Address": "122 Bongrae-dong 2-ga, Jung-gu, Seoul"
     },
     "Gender": "Male",
     "Age": "62",
...
   },
...
];

//Field settings
var fields = [
   {
     fieldName: "Person",
     dataType: "object",
     objectKey: "Name"
   },
...
];
 
dataProvider.setFields(fields);
 
//Column settings
var columns = [
   {
     name: "Person",
     fieldName: "Person",
     objectKey: "Name",
     width: "300",
     header: {
       text: "name"
     }
   },
   ...
];
 
gridView.setColumns(columns);

caution

When copying the Object field, the Object is copied, not the Text that appears on the screen.
When pasting into the Object field, only the same Object Data can be pasted. Plain text cannot be pasted.
When multiple columns are used in one Object field, the sort function is executed based on the column for which the ObjectKey is specified. For example, as shown below, because Name is specified in the objectKey property of the Object Field, both the PersonName column and the PersonAddress column are sorted by Name. At this time, column filters cannot be used.

One Object field - two column usage example

const fields = [
  {
      fieldName: "Person",
      dataType: "object",
      objectKey: "Name"
  },
...
]
 
const columns = [
  {
      name: "PersonName",
      fieldName: "Person",
      objectKey: "Name",
      width: "150",
      header: {
          text: "name"
      }
  },
  {
      name: "PersonAddress",
      fieldName: "Person",
      objectKey: "Address",
      width: "150",
      header: {
          text: "Address"
      }
  },
]

objectCallback

If the object has a depth of 2 or more, you can set it to be displayed on the screen using objectCallback for data output.

The value returned from objectCallback is output to the grid. Get the value of the field as the data argument value.

{
  name: "PersonAddress",
  fieldName: "Person",
  objectCallback:function(fieldName, dataRow, data){
    return data.Address
  },
  width: "300",
  header: {
    text: "Address"
  }
}

Date type field Subtypes