ngx-datatable: TypeError: Cannot read property 'length' of undefined ( allRowsSelected )
I’m submitting a … (check one with “x”)
[X] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter
Current behavior
since version 11.1.x I have the following error in console
DatatableComponent.html:5 ERROR TypeError: Cannot read property 'length' of undefined
at DatatableComponent.get [as allRowsSelected] (index.js:4867)
at Object.eval [as updateDirectives] (DatatableComponent.html:18)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
at checkAndUpdateView (core.js:13508)
at callViewAction (core.js:13858)
at execEmbeddedViewsAction (core.js:13816)
at checkAndUpdateView (core.js:13509)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
It seems to be a new feature, so maybe some issues there ? I haven’t changed my code since 11.0.4 which is as follow :
<ngx-datatable
class="material fullscreen"
[columnMode]="'force'"
[rowClass]="getRowClass"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="50"
[externalPaging]="true"
[externalSorting]="true"
[loadingIndicator]="loading"
[limit]="pageSize"
[offset]="pageOffset"
[count]="totalCount"
[rows]="items"
[columns]="columns"
[messages]="{emptyMessage: 'DataTable.EmptyMessage' | translate, totalMessage: 'DataTable.Total' | translate, selectedMessage: 'DataTable.SelectedMessage' | translate}"
(page)="onPageChanged($event)"
(sort)="onSortChanged($event)"
(scroll)="onScroll($event.offsetY)"
(reorder)="onColumnsReordered($event)">
<!-- Header template -->
<ng-template #headerTemplate let-column="column" let-sort="sortFn">
<span class="datatable-header-cell-wrapper"><span class="datatable-header-cell-label draggable text-truncate" (click)="sort()">{{ column.name | translate }}</span></span>
</ng-template>
<!-- Cell template -->
<ng-template #cellTemplate let-column="column" let-value="value">
<div [innerHTML]="getCellHtml(value, column)"></div>
</ng-template>
<!-- Actions template -->
<ng-template #actionTemplate let-row="row" let-value="value">
<button mat-icon-button (click)="onDeleteClick(value)" [attr.disabled]="!canDelete" color="warn" matTooltip="{{'CRM.Delete' | translate}}" [matTooltipPosition]="'below'">
<i class="material-icons">delete</i>
</button>
<button mat-icon-button (click)="onEditClick(value)" [attr.disabled]="!canEdit" matTooltip="{{'CRM.Edit' | translate}}" [matTooltipPosition]="'below'">
<i class="material-icons">create</i>
</button>
</ng-template>
</ngx-datatable>
Please tell us about your environment:
win10 pro, vscode, npm, node
- Table version: 0.8.x
11.1.2
- Angular version: 2.0.x
5.0.2
- Browser:
chrome 62.0.3202.94
- Language: [all | TypeScript X.X | ES6/7 | ES5] typescript 2.6.1
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Reactions: 3
- Comments: 39 (4 by maintainers)
Me too - Version 11.1.4 receiving the same error. The problem in my case is because an uninitialized object is assigned to the [row] property or it is not an array type.
In my html: <ngx-datatable class = “material” [rows] = “customers” [loadingIndicator] = “loadingIndicator”> …
In my component.ts:
public customers: any; // <- here’s the problem …
The solution, assign an object of type initialized array:
In my component.ts:
public customers: Array
<any>= new Array<any>(); // <- solution …The best solution is to initialize the array of the customer type in my case public customers: Array
<customer>= new Array<customer>(); // <- best solutionI hope you seriva for help, I have solved the problem.
Try 11.1.7 plz
I’m still seeing this issue with 11.1.5. Any update on when a build with this fix will be pushed to NPM?
@amcdnl Hi Austin. I still get the error with 11.1.4. It works with 11.0.4 though.
I’m having the same issue with 11.1.5, probably because the rows: Observable<User[]>; is empty at first
@aog1971 Thank you for the hint. That helped a lot.
There is also the same kind of problem when using async input for the rows. If the Observable returns undefined instead of an empty array the exception is thrown.
I have found the issue. The issue is I am using rowDetail and select event in the table, so if I try to select the text in row detail. Then select event of row selection gets fired which was making selected undefined.
Hi. I was experiencing the length is null issue as well, eventually I realized that I was missing the following :
selected = [];
I was using selected in my HTML, but I did not initialize the selected variable, after I added the initialize it worked, no further length undefined issues, on V14.0.0 of ngxdatatables.
I can’t get rid of this issue I just followed the getting started page and the very first example keeps showing this error : TypeError: Cannot read property ‘length’ of undefined at DatatableComponent.get [as allRowsSelected] (vendor.bundle.js:sourcemap:17581)
any real solution for this ?
I am definitely running 11.1.2. My issue may be another bug with a similar symptom. I have s in the header cells. When editing text in the inputs it was triggering the select event on the table 3 times in succession, every time I changed the text selection in the box. Once with every item as selected, once with no items, and once with the selected as undefined. The last one was causing errors in the data table code. I realized yesterday that has a select event, and the listeners in datatable aren’t discrete enough to exclude the event coming from the inputs. I added handlers to swallow the select event from the inputs as a workaround for now.