ODataVirtualCollectionView - error in _getInferredDataTypes

Posted by: seaninglis on 7 February 2022, 4:37 am EST

  • Posted 7 February 2022, 4:37 am EST

    I have a grid fed from an OData source, but for some reason it's not rendering correctly. I'll try to get standalone code, but in the meantime:

    This is the HTML defining the grid - one column only, a value set for that column in every row in the source data:

    [CODE]
    <wj-flex-grid
    #customers
    class="h-full w-full"
    [autoGenerateColumns]="utils.false"
    [itemsSource]="CustomerView"
    >
    <wj-flex-grid-column
    header="Customer Name"
    [name]="'CustomerName'"
    [binding]="'CustomerGuid'"
    [dataType]="'String'"
    width="*"
    ></wj-flex-grid-column>
    </wj-flex-grid>
    [/CODE]

    I'm aware that the "name" doesn't match the "binding" but the error is identical.

    This is the JSON returned by the OData endpoint. I've limited it to 5 rows in my controller so I can easily check things (and some manually redacted data when I pasted it):

    [CODE]
    [
    {
    "CustomerGuid": "60d20d50-b1f1-4dd2-b44c-006457267eaa",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "0d5394fc-c6b4-4ce4-ab2a-0070745e50b2",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "88c19ca8-e799-4609-b444-00b82a9ef71e",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "02ad0224-0650-48c5-926f-01375cad4e87",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "013587224410",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": "andrew.lonie@eqsoftware.net"
    },
    {
    "CustomerGuid": "d049737e-06e6-4c3c-a6fd-01986315efba",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    }]
    [/CODE]

    This is the setup code in my component constructor:

    [CODE]
    this.CustomerView = new ODataVirtualCollectionView(
    `${ApiConstants.BaseApi}/odata`,
    "customers",
    {
    oDataVersion: 4,
    sortOnServer: true,
    filterOnServer: true,
    }
    );

    this.utils.track(
    this.auth
    .GetTokenUpdate()
    .subscribe(
    (t) =>
    (this.CustomerView.requestHeaders = this.utils.GetAuthHeader(t))
    )
    );

    [/CODE]

    The second clause after the assignment to this.CustomerView just sets the auth header for the call. This appears to be fine as the call is being made successfully, (and the endpoint does require a properly authenticated user).

    The error I get is:

    [CODE]
    core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at ODataVirtualCollectionView.ODataCollectionView._getInferredDataTypes (es5-esm.js:14:12549)
    at success (es5-esm.js:14:10979)
    at XMLHttpRequest.c.onload [as __zone_symbol__ON_PROPERTYload] (es5-esm.js:14:31755)
    at XMLHttpRequest.wrapFn (zone.js:763:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25463:33)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
    at invokeTask (zone.js:1600:1)
    [/CODE]

    What is the reference to _getInferredDataTypes telling me?

    As far as I can tell, I've done everything I can to specify the name and type of the single column I'm trying to render.
  • Replied 7 February 2022, 4:40 am EST



    I have a grid fed from an OData source, but for some reason it's not rendering correctly. I'll try to get standalone code, but in the meantime:

    This is the HTML defining the grid - one column only, a value set for that column in every row in the source data:


    <wj-flex-grid
    #customers
    class="h-full w-full"
    [autoGenerateColumns]="utils.false"
    [itemsSource]="CustomerView"
    >
    <wj-flex-grid-column
    header="Customer Name"
    [name]="'CustomerName'"
    [binding]="'CustomerGuid'"
    [dataType]="'String'"
    width="*"
    ></wj-flex-grid-column>
    </wj-flex-grid>


    I'm aware that the "name" doesn't match the "binding" but the error is identical.

    This is the JSON returned by the OData endpoint. I've limited it to 5 rows in my controller so I can easily check things (and some manually redacted data when I pasted it):


    [
    {
    "CustomerGuid": "60d20d50-b1f1-4dd2-b44c-006457267eaa",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "0d5394fc-c6b4-4ce4-ab2a-0070745e50b2",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "88c19ca8-e799-4609-b444-00b82a9ef71e",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    },
    {
    "CustomerGuid": "02ad0224-0650-48c5-926f-01375cad4e87",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "013587224410",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": "andrew.lonie@eqsoftware.net"
    },
    {
    "CustomerGuid": "d049737e-06e6-4c3c-a6fd-01986315efba",
    "CustomerName": "REDACTED"
    "CustomerActive": 1,
    "DisplayName": "REDACTED",
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": ""
    }]


    This is the setup code in my component constructor:


    this.CustomerView = new ODataVirtualCollectionView(
    `${ApiConstants.BaseApi}/odata`,
    "customers",
    {
    oDataVersion: 4,
    sortOnServer: true,
    filterOnServer: true,
    }
    );

    this.utils.track(
    this.auth
    .GetTokenUpdate()
    .subscribe(
    (t) =>
    (this.CustomerView.requestHeaders = this.utils.GetAuthHeader(t))
    )
    );



    The second clause after the assignment to this.CustomerView just sets the auth header for the call. This appears to be fine as the call is being made successfully, (and the endpoint does require a properly authenticated user).

    The error I get is:


    core.mjs:6484 ERROR TypeError: Cannot read properties of undefined (reading 'length')
    at ODataVirtualCollectionView.ODataCollectionView._getInferredDataTypes (es5-esm.js:14:12549)
    at success (es5-esm.js:14:10979)
    at XMLHttpRequest.c.onload [as __zone_symbol__ON_PROPERTYload] (es5-esm.js:14:31755)
    at XMLHttpRequest.wrapFn (zone.js:763:1)
    at ZoneDelegate.invokeTask (zone.js:406:1)
    at Object.onInvokeTask (core.mjs:25463:33)
    at ZoneDelegate.invokeTask (zone.js:405:1)
    at Zone.runTask (zone.js:178:1)
    at ZoneTask.invokeTask [as invoke] (zone.js:487:1)
    at invokeTask (zone.js:1600:1)


    What is the reference to _getInferredDataTypes telling me?

    As far as I can tell, I've done everything I can to specify the name and type of the single column I'm trying to render.


    Reply to attempt to format again.
  • Marked as Answer

    Replied 8 February 2022, 1:26 am EST

    The issue appears to be that my Odata endpoint wasn't returning the
    count
    property, i.e. it should have been returning the results wrapped like this:


    {
    "@odata.context": "http://REDACTED/odata/$metadata#CustomersOdata",
    "@odata.count": 499,
    "value": [
    {
    "CustomerGuid": "60d20d50-b1f1-4dd2-b44c-006457267eaa",
    "CustomerName": "REDACTED",
    "CustomerActive": 1,
    "CompanyCode": "REDACTED",
    "DisplayName": "REDACTED,
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": "",
    "Colour": 0,
    "Status": "NO GUID NO STATUS",
    "AddressSummary": "REDACTED"
    },
    {
    "CustomerGuid": "0d5394fc-c6b4-4ce4-ab2a-0070745e50b2",
    "CustomerName": "REDACTED",
    "CustomerActive": 1,
    "CompanyCode": "REDACTED",
    "DisplayName": "REDACTED,
    "Phone": "",
    "Mobile": "REDACTED",
    "Fax": "",
    "Email": "",
    "Colour": 0,
    "Status": "NO GUID NO STATUS",
    "AddressSummary": "REDACTED"
    }]
    }


    rather than the bare contents of the `value` property.

    After altering my endpoint to ensure this is corrected, everything seems fine.

    A PEBCAK but the error behaviour could have been more helpful.

  • Replied 9 February 2022, 4:41 am EST

    Hello,

    We are glad that you were able to resolve your issue. Thank you for sharing the information with us.

    Regards
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels