Ngx-datatable: Sorting not working when template let-column="column" used
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
Current behavior
When tag is added to an expressive template, sorting function for that column doesn't work.
Expected behavior
Sorting should work.
Reproduction of the problem
In your own example in the documentation you can see this behaviour https://plnkr.co/edit/iH1e7cIAdX5Ds4jY7WYc?p=preview
Hi + {{column.name}}
What is the motivation / use case for changing the behavior?
Sort by column with a customized title
Please tell us about your environment:
Window 10
- Table version: 0.7.x
0.11.2
- Angular version: 2.0.x
2.1.1
- Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
all
- Language: [all | TypeScript X.X | ES6/7 | ES5]
TS 2.0.3
ghost
All 15 comments
yeah, got the same issue.
collapsarzhang
on 2 Nov 2016
Can you retry on 1.0.0?
amcdnl
on 3 Nov 2016
I moved to 1.0.0 using:
[rows]="rows"
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'">
And got this error, but don't know if it's related with the issue we had before:
error_handler.js:48 EXCEPTION: Uncaught (in promise): Error: Error in ./DataTableBodyComponent class DataTableBodyComponent - inline template:14:8 caused by: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at _View_DataTableBodyComponent0.detectChangesInternal (/Angular2DataTableModule/DataTableBodyComponent/component.ngfactory.js:133:36)
at _View_DataTableBodyComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:93943:14)
at _View_DataTableBodyComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:94048:44)
at _View_DatatableComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:93969:19)
at _View_DatatableComponent0.detectChangesInternal (/Angular2DataTableModule/DatatableComponent/component.ngfactory.js:205:8)
at _View_DatatableComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:93943:14)
at _View_DatatableComponent0.DebugAppView.detectChanges (http://localhost:4200/main.bundle.js:94048:44)
at _View_NegotiationListComponent0.AppView.detectViewChildrenChanges (http://localhost:4200/main.bundle.js:93969:19)
at _View_NegotiationListComponent0.detectChangesInternal (/CRMModule/NegotiationListComponent/component.ngfactory.js:261:8)
at _View_NegotiationListComponent0.AppView.detectChanges (http://localhost:4200/main.bundle.js:93943:14)
ghost
on 3 Nov 2016
I got the same error. With 1.0.0, it fails if rows is ever unspecified or null.
shattar
on 3 Nov 2016
Got the same issue in 1.7.0.
Chandru-B
on 28 Nov 2016
Hi,
Does any one know how to call the sort Manually? @viewchild datatable doesn't have any sort methods to call. Please help if there is a workaround to call sort manually.
Chandru-B
on 29 Nov 2016
It would be a great to fix this feature.
If the name of a property of my model is "fooBar" and I want to print it like "Foo Bar", I would have to use a <template let-column="column">Foo Bar</template>
which breaks the sorting.
JeanPascalR
on 1 Dec 2016
I'm not sure I understand the problem. Can someone give me a example?
amcdnl
on 4 Dec 2016
For example:
<template let-column="column" swui-datatable-header-template width="300">
<span class="my-class">My Column Name</span>
</template>
This breaks the sort for this column.
sarge5766
on 5 Dec 2016
For instance, I would like to set "Foo Bar" as a custom column name of a sortable column:
- Here the sort works but the column name is "FooBar":
<datatable-column name="FooBar" [flexGrow]="1"> <template let-value="value"> <strong>{{value}}</strong> </template> </datatable-column>
- Here the the column name is "Foo Bar" but the sort is broken:
<datatable-column [flexGrow]="1"> <template let-column="column">Foo Bar</template> <template let-row="row">...</template> </datatable-column>
JeanPascalR
on 6 Dec 2016
+1 This seems to be a problem when using swui-datatable-header-template directive for custom column headers. The sorting stops working with the custom template and there is no way to call the onSort function. I believe the problem lies at header-cell.component.ts:21-34
dunerunner
on 16 Dec 2016
You need to use prop vs name.
amcdnl
on 16 Dec 2016
@amcdnl I think you misunderstood me. I was talking about being able to click on the column header and change the sort direction. This function does not work if I use a custom template for the column header. Is there a possibility to be able to change column sorting when using a custom template?
dunerunner
on 18 Dec 2016
Thanks ! Using prop and name worked for me
<datatable-column name="Foo Bar" prop="fooBar">
<template let-value="value">
{{value}}
</template>
</datatable-column>
JeanPascalR
on 17 Jan 2017
The above works for let-value, but for let-column It doesn't. Even with prop and name. This resolved it though
https://github.com/swimlane/ngx-datatable/issues/681#issuecomment-297386597
SriganeshNk
on 17 Aug 2017
Related issues
eddy-geek
路
3Comments
mmrath
路
3Comments
jguttman94
路
3Comments
dinvlad
路
3Comments
ChanBen
路
3Comments
Most helpful comment
The above works for let-value, but for let-column It doesn't. Even with prop and name. This resolved it though
https://github.com/swimlane/ngx-datatable/issues/681#issuecomment-297386597