Nested Property in React Datatable

Support
#1

Hi:

I am getting a property not found error when trying to access a nested property in a React datatable. Simple setup:

Entities are:

MPStatus -> association one to one -> Order

View loads mpstatus and the order with various fields from each order.

    <view entity="pasweb_MPStatus" name="mpstatus-view" extends="_local">
        <property name="order" view="_minimal" fetch="BATCH">
            <property name="bkrnum"/>
            <property name="cancelled"/>
            <property name="lst" view="_minimal"/>
            <property name="mlr" view="_minimal"/>
            <property name="status"/>
            <property name="mplist" view="_minimal" fetch="BATCH">
                <property name="actqty"/>
                <property name="brk" view="_minimal"/>
                <property name="inputqty"/>
                <property name="mplType"/>
                <property name="ordqty"/>
                <property name="recdqty"/>
                <property name="status"/>
                <property name="statusDesc"/>
            </property>
            <property name="totQtyOrdered"/>
            <property name="totQtyReceived"/>
            <property name="totQtyConverted"/>
            <property name="statusDesc"/>
            <property name="shipments" view="_minimal" fetch="BATCH">
                <property name="timestamp"/>
            </property>
        </property>
        <property name="customer" view="_minimal" fetch="AUTO"/>
    </view>

Datatable contains the field order.totQtyOrdered like this:

      <DataTable
        dataCollection={this.dataCollection}
        canSelectRowByClick={true}
        tableProps={{bordered: true}}
        columnDefinitions={[
          {field: "bkrnum", columnProps: {title: "Bkr Num"}},
          {field: "id", columnProps: {title: "PAS Num"}},
          {field: "order.totQtyOrdered",
            columnProps: {
              title: "Qty Ordered",
              render: (text, record: any) => (record.order.totQtyOrdered == null ? 0 : record.order.totQtyOrdered.toLocaleString('en-US', {maximumFractionDigits: 0}))
            }
          },

Error message in the javascript console is:

VM35 react_devtools_backend.js:2430 Error: Cannot find MetaPropertyInfo for property order.totQtyOrdered
    at Y (index.esm.js:813)
    at Kd (index.esm.js:2250)
    at index.esm.js:2725
    at Array.map (<anonymous>)
    at n.get (index.esm.js:2720)
    at he (mobx.module.js:801)
    at e.computeValue (mobx.module.js:1286)
    at e.trackAndCompute (mobx.module.js:1271)
    at e.get (mobx.module.js:1231)
    at e.read (mobx.module.js:4139)

When I dig into the code, it appears that getPropertyInfoNN called by generateDataColumn does not understand dot notation. Is this true? Is there a workaround?

#6

Hi, @Eraskin! According to documentation (point 3), if you want to definite a column, which are not bound to an entity field, you no need to use ‘field’ property in columnDefinitions item. DataTable does not support nested fields and dot notation. Just remove ‘field’ property to get rid of the error:

  <DataTable
    dataCollection={this.dataCollection}
    canSelectRowByClick={true}
    tableProps={{bordered: true}}
    columnDefinitions={[
      {field: "bkrnum", columnProps: {title: "Bkr Num"}},
      {field: "id", columnProps: {title: "PAS Num"}},
      {
        columnProps: {
          title: "Qty Ordered",
          render: (text, record: any) => (record.order.totQtyOrdered == null ? 0 : record.order.totQtyOrdered.toLocaleString('en-US', {maximumFractionDigits: 0}))
        }
      },
#8

So simple! I should have thought of that. :wink: Since I have a render() function, I don’t really need a field, do I?

#9

Since I have a render() function, I don’t really need a field, do I?

Exactly :slight_smile: