Reordering oj-list-view items with buttons

ZacD

Hello,

We have a use case where we are trying to allow users to reorder items in an oj-list-view by using buttons. Here's a simplified example of what we are trying to do:

https://jsfiddle.net/draconian/x9jbL6vh/

One of the issues we are having is that after pressing the button to reorder the items once, the selection is getting lost. So, if the user needs to move an item (or items) multiple space up or down, they need to reselect the items each time.

My question is this: Should this use case work and if so, what is the proper way to manipulate the items to not mess up the selection?

This is in JET 9.2.9.

John 'JB' Brock-Oracle

This jsFiddle

https://jsfiddle.net/peppertech/us90hmpc/

shows it working for the most part. What doesn't work is that highlighting of the selected element.

If you select Item and then press the Down button over and over, it will keep moving down as it is reset as the selected item after each move. The CSS that shows it as the selected item is not working still though. I'll try to figure that part out.

John 'JB' Brock-Oracle

Hey Zac,

You should be updating the array under the component and not the component itself. I haven't had a chance to look at the fiddle yet (meetings), but I'll take a look in a few hours.

John 'JB' Brock-Oracle

This jsFiddle

https://jsfiddle.net/peppertech/us90hmpc/

shows it working for the most part. What doesn't work is that highlighting of the selected element.

If you select Item and then press the Down button over and over, it will keep moving down as it is reset as the selected item after each move. The CSS that shows it as the selected item is not working still though. I'll try to figure that part out.

John 'JB' Brock-Oracle

Hey Zac,

I updated the jsFiddle referenced above to use the latest JET v13 release and the styling works properly. The styling issue would appear to have been a bug in the 9.x release at least and has since been fixed.

ZacD

Thanks, @John 'JB' Brock-Oracle! I was able to use the difference between your version and mine to work through the issues I was seeing. I had to make a few tweaks due to issues with the way we are using the KO Rate Limiting on the underlying ObservableArray, but I was able to get that straightened out. One other issue that I saw while working on this is that if you spam the Up or Down buttons to move rows fast, it ends up inserting these sort of 'ghost' records that appear to be duplicates. I was not able to recreate this in your v13 sample, so it seems like whatever is causing this fixed in a later release. I was able to work around it by adding controls to prevent the user from clicking too fast.

Regarding the selection styling issue (where the selected row loses the styling after being moved), is it possible to get a patch for v9 to address this, or is this something that is going to need to wait for an upgrade?

John 'JB' Brock-Oracle

Hi Zac,

Glad to hear you got it working. JET v9 is no longer supported so we won't do any backports to that specific version. Currently supported releases are v11, 12, 13. I'm not positive in which release this issue was fixed. I just noticed that it is working in v13. You can try dropping the fiddle back to 11 or 12 to see if it's fixed there as well. I tried searching our bug database to see if I could recognize the specific issue that was fixed, but I wasn't successful in finding it.