Skip to content

p-dataTable does not render when multiSortMeta is set #1663

@ASK83

Description

@ASK83

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Yesterday the table was broken so couldn't add a plunker for the bug. But now here is the plunker that shows the p-table throws find error as described below.

http://plnkr.co/edit/43HqrN?p=preview

Current behavior
addition of [multiSortMeta] to my table causes primeng below error.
If I don't set the multiSortMeta the table renders correctly but without the default sorts applied to the table.
Error:
EXCEPTION: Error in ./TableComponent class TableComponent - inline template:5:2 caused by: # Cannot read property 'find' of undefined ErrorHandler.handleError @ error_handler.js:51 next @ application_ref.js:373 schedulerFn @ async.js:98 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:84 NgZone.triggerError @ ng_zone.js:331 onHandleError @ ng_zone.js:292 ZoneDelegate.handleError @ zone.js:246 Zone.runTask @ zone.js:154 ZoneTask.invoke @ zone.js:345 error_handler.js:53 ORIGINAL EXCEPTION: Cannot read property 'find' of undefined ErrorHandler.handleError @ error_handler.js:53 next @ application_ref.js:373 schedulerFn @ async.js:98 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:84 NgZone.triggerError @ ng_zone.js:331 onHandleError @ ng_zone.js:292 ZoneDelegate.handleError @ zone.js:246 Zone.runTask @ zone.js:154 ZoneTask.invoke @ zone.js:345 error_handler.js:56 ORIGINAL STACKTRACE: ErrorHandler.handleError @ error_handler.js:56 next @ application_ref.js:373 schedulerFn @ async.js:98 SafeSubscriber.__tryOrUnsub @ Subscriber.js:223 SafeSubscriber.next @ Subscriber.js:172 Subscriber._next @ Subscriber.js:125 Subscriber.next @ Subscriber.js:89 Subject.next @ Subject.js:55 EventEmitter.emit @ async.js:84 NgZone.triggerError @ ng_zone.js:331 onHandleError @ ng_zone.js:292 ZoneDelegate.handleError @ zone.js:246 Zone.runTask @ zone.js:154 ZoneTask.invoke @ zone.js:345 error_handler.js:57 TypeError: Cannot read property 'find' of undefined at DataTable.ngDoCheck (datatable.js:285) at Wrapper_DataTable.ngDoCheck (wrapper.ngfactory.js:516) at View_TableComponent1.detectChangesInternal (component.ngfactory.js:406) at View_TableComponent1.AppView.detectChanges (view.js:438) at View_TableComponent1.DebugAppView.detectChanges (view.js:633) at ViewContainer.detectChangesInNestedViews (view_container.js:71) at CompiledTemplate.proxyViewClass.View_TableComponent0.detectChangesInternal (component.ngfactory.js:98) at CompiledTemplate.proxyViewClass.AppView.detectChanges (view.js:438) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (view.js:633) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (view.js:423) at View_BlockComponent2.detectChangesInternal (component.ngfactory.js:284) at View_BlockComponent2.AppView.detectChanges (view.js:438) at View_BlockComponent2.DebugAppView.detectChanges (view.js:633) at ViewContainer.detectChangesInNestedViews (view_container.js:71) at CompiledTemplate.proxyViewClass.View_BlockComponent0.detectChangesInternal (component.ngfactory.js:138)

I tracked down the error to a change in primeng table code as below:

working version (previous version of PrimeNg):
else if(!this.lazy && (this.sortField||this.multiSortMeta)) { if(this.sortMode == 'single') this.sortSingle(); else if(this.sortMode == 'multiple') this.sortMultiple(); }

Not working version:
`
else if(!this.lazy && (this.sortField||this.multiSortMeta)) {
if(!this.sortColumn) {
this.sortColumn = this.columns.find(col => col.field === this.sortField && col.sortable === 'custom');
}

            if(this.sortMode == 'single')
                this.sortSingle();
            else if(this.sortMode == 'multiple')
                this.sortMultiple();
        }

`

Based on the error received it appears this.cloumns is not defined and find could not apply on it at this point.

Expected behavior
Primeng 1.0.0 was working and applying the metaSort highlighted to the corresponding fields.

Minimal reproduction of the problem with instructions
Here is my table component structure:
<p-dataTable #table [exportFilename]="description" [value]="filterData$ | async" sortMode="multiple" [multiSortMeta]="defaultSortOrders" [globalFilter]="gb" [selectionMode]="selected" [(selection)]="selectedRow" (onRowSelect)="onRowSelect($event)" [rows]="rowsPerPageOptions[0]" [paginator]="(filterData$ | async)?.length > rowsPerPageOptions[0] ? true: false" [pageLinks]="5" [rowsPerPageOptions]="rowsPerPageOptions" paginatorPosition="top"> </p-dataTable>

What is the motivation / use case for changing the behavior?

Please tell us about your environment:
Windows 10

  • Angular version: 2.4.1
  • PrimeNG version: 2.1.1
  • Browser: all
  • Language: TypeScript [all | TypeScript X.X | ES6/7 | ES5]

  • Node (for AoT issues): node --version =

Metadata

Metadata

Assignees

Labels

Type: BugIssue contains a bug related to a specific component. Something about the component is not working

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions