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:
<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.
