[grid] vaadin-grid-sorter feature request: bi-state sorting

[n1ywb]

Our UX designers identified the current tri-state sort behavior (asc, desc, null) as potentially confusing for users and asked me to make is so that once a column is clicked for sorting, clicking the sort button toggles between asc and desc. Clicking another column in single sort resets the first column to null sort. We do not use multi-sort.

This should be rather easily accomplished with the addition of a bi-state property and a slight change to https://github.com/vaadin/vaadin-grid/blob/master/vaadin-grid-sorter.html#L208

If there's sufficient interest from Vaadin I can talk to my boss about getting that coded up. For now I have just monkeypatched the sorter in my app.

[jouni]

I think this would be a welcome enhancement.

We chose to tri-state by default because it covers the broader use case. But I do understand that this depends on the desired UX for the app, and sometimes tri-state is not suitable.

Did you already have an API in mind, how this would be configured?

[tomivirkki]

The following should also do the trick:

grid.addEventListener('sorter-changed', e => 
                    e.target.direction = e.target.direction || 'asc');

[n1ywb]

I tried that first but it sets every column to ascending when the elements are created which should not be allowed to happen unless multisort is turned on. In my scheme all columns start out null; once you sort one column you cannot return to a no-sort state. My scheme may not even make sense with multi-sort.

…

On Mon, Oct 30, 2017 at 2:48 PM, Tomi Virkki ***@***.***> wrote: The following should also do the trick: grid.addEventListener('sorter-changed', e => e.target.direction = e.target.direction || 'asc'); — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <https://github.com/vaadin/vaadin-grid/issues/1069#issuecomment-340546507>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AATWIZOAUXiGIqDd-H2nUv-TSoBjY1akks5sxhoBgaJpZM4QLaLR> .

-- 73 de n1ywb

[n1ywb]

I should add that I had originally configured my table with multisort, but like the tri-state, my UX folks asked me to turn it off, too complex for our users, so we only use single-sort. On Mon, Oct 30, 2017 at 9:56 PM, Jeff Laughlin <[email protected]> wrote:

…

I tried that first but it sets every column to ascending when the elements are created which should not be allowed to happen unless multisort is turned on. In my scheme all columns start out null; once you sort one column you cannot return to a no-sort state. My scheme may not even make sense with multi-sort. On Mon, Oct 30, 2017 at 2:48 PM, Tomi Virkki ***@***.***> wrote: > The following should also do the trick: > > grid.addEventListener('sorter-changed', e => > e.target.direction = e.target.direction || 'asc'); > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <https://github.com/vaadin/vaadin-grid/issues/1069#issuecomment-340546507>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AATWIZOAUXiGIqDd-H2nUv-TSoBjY1akks5sxhoBgaJpZM4QLaLR> > . > -- 73 de n1ywb

-- 73 de n1ywb

[tomivirkki]

I tried that first but it sets every column to ascending when the elements
are created which should not be allowed to happen unless multisort is
turned on

You can ignore the initial sorter-changed event:

grid.addEventListener('sorter-changed', e => {
  if (e.target._initialized && !e.target.direction) {
    e.target.direction = 'asc';
  }
  e.target._initialized = true;
});

[n1ywb]

@tomivirkki thanks for that, seems a bit cleaner than my monkeypatch.

Upon further testing that solution still seems to force multisort. Previously sorter cols do not return to null sort state when a new column is sorted.