-
Notifications
You must be signed in to change notification settings - Fork 1.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Sorting with custom template - click handler doesn't seem to work #808
Comments
True...but if you do this, it will work: #681 (comment) In your case
|
But how do you define the sortFn in ts code? This way, the built-in sorting function runs. I need to call a custom function to call server-side sorting. |
I also did server side sorting. You need to set the function on the ngx-datatable like (sort)="onSort($event)"
This icludes server side sorting, server side pagination, selection boxes, custom header and column templates with custom footer that allows the user to change the page size. Hope that it helps you. |
Ah, so I don't need to set the |
Because I have many columns, I deleted most of them to keep the code small, and by accident also removed the column that does the sorting. I fixed the example. Now you have the first column that will not sort and the second column that will sort properly. Sorry for the confusion. |
Cool, I got the idea now, thanks! 😄 |
How do I write my own sort function? I want a column which sorts based on 'date' in an object. The 'onSort($event)' calls an onSort() that I defined in the component but when I manipulate the list based on the 'prop' in the column the table doesn't change. |
Have you tried reassigning your data source that you set in the |
I don't see the sort direction indicator, is there a way to get this back when using custom header templates? |
I am also not able to see direction indicator with custom header. |
I am also experiencing this issue when using a custom header template. It seems as though the sort button is added dynamically which causes the icon to be below the header and under the datatable body. In my component.html file I have this:
In the browser you can see that the sort icon is added below my template in the
which gives this functionality: |
Shortly after posting my comment above I was able to find a workaround using
Produces: If I wanted icons specifically I could do something like this:
|
@zachrussell I recently updated ngx datatable and your solution stopped working. I no longer see the sorting icon. Did similar happen to you? it appears that let-sortDir is undefined now. |
I haven't tried with any new version. My sample above was with version |
Yeah, I noticed let-sortDir is undefined now as well...this is not good :( |
Use this
this works now. even if you do not provide the implementation for the sort function. |
@kedar700 Thank you your suggestion works for my scenario. Looking through the docs I didn't see any examples of how to setup sorting when using custom templates like this. Or did I miss it? |
@kedar700 i am trying to sort using onSort(event) but I want to call this on ngInit(). Is there any way using which I i call onSort(event) on ngInit() of component. |
The following worked for me... .ngx-datatable .datatable-header .datatable-header-cell .sort-btn { |
I'm submitting a ... (check one with "x")
Current behavior
Looks a lot like #431
custom column template with server side pagination
on sort function is
(sort)="onPageSorted($event)"
and column is defined as
Expected behavior
on click on the column header will trigger the event
Reproduction of the problem
What is the motivation / use case for changing the behavior?
Please tell us about your environment:
9.3.0
4.1.3
all
TypeScript 2.3.4
The text was updated successfully, but these errors were encountered: