U4-3951 - Checkbox List and Dropdown List Property Editors are not sortable

Created by Kevin Giszewski 30 Dec 2013, 21:29:52 Updated by Shannon Deminick 25 Mar 2014, 03:12:48

Checkbox List and Dropdown List property editors are not sortable and it requires inputting the data right the first time.

Solution, add sorting to these property editors.

1 Attachments


Andy Butland 31 Dec 2013, 14:26:59

Have had a look at this thinking it would be fairly straightforward. It didn't turn out to be, but thought it was worth recording what I found in case anyone else looks at it.

Updating the UI with "up/down" buttons, implementing a javascript move method, and having the new order saved to the database was fine. The problem was retrieving the data again for display.

Over the wire I could see the prevalues were coming back in the expected order from the API:


However in code, immediately after the promise is resolved, they get re-ordered by Id:


The problem looks to be because this is coming back as a JSON object rather than an array, where you [can't rely on the ordering being maintained|http://stackoverflow.com/questions/3948206/json-order-mixed-up].

Kevin Giszewski 31 Dec 2013, 14:44:39

I believe this is all using Angularjs in the backoffice. So if the model is modified, the DOM will follow.

Were you able to modify the model with Angularjs?

Andy Butland 31 Dec 2013, 15:04:51

Yes, that all worked without problems. It's just that after the data (with the order) is saved to the database, between the process of retrieving the prevalues as JSON from the API and their representation in the angular model, the order of them gets lost.

Kevin Giszewski 31 Dec 2013, 15:07:07

So it seems a sort order property needs added to the model?

Andy Butland 31 Dec 2013, 15:25:49

Yes, possibly. Or it's encoded in the JSON response from the API as a JSON array rather than an object, then the order would be retained.

Kevin Giszewski 31 Dec 2013, 15:30:06

Moving to an array might cause a breaking change? i.e. the model completely changes structure whilst the sortOrder would be backwards compatible (maybe).

But an array sounds better in the long term.

Andy Butland 02 Jan 2014, 11:58:55

I've had a further look at this and submitted a [pull request|https://github.com/umbraco/Umbraco-CMS/pull/277]. As well as the client side amends I've changed the API response to include the sort order in the list of prevalues returned as Kevin suggests above, so the order can be restored on the client.

Kevin Giszewski 02 Jan 2014, 15:05:17

Very nice Andy. We'll see if Per (or whomever) likes this or prefers a breaking change to use an array instead.

As an alternative, there is also support for jQueryUI sortable built-in. I did a small write-up on it: http://blog.imulus.com/kevin-giszewski/umbraco-7-the-sortable-dynamic-angular-property-editor-example

Andrew Swerlick 07 Feb 2014, 14:46:52

What's the status with this. We had a client ask about sorting drop downs, and if this is not going to be implemented soon we were going to roll a custom drop down property editor. Otherwise we'll just wait until this is rolled in.

Kevin Giszewski 07 Feb 2014, 14:59:34

@andrew Add a vote :)

Andy Butland 28 Feb 2014, 15:15:31

Thanks for the hint Kevin... took me a while to get around to it but given the PR was still pending figured would amend to use drag-drop.

Kevin Giszewski 28 Feb 2014, 16:40:25

Good job!

Priority: Normal

Type: Usability Problem

State: Fixed

Assignee: Shannon Deminick

Difficulty: Normal

Category: UI

Backwards Compatible: True

Fix Submitted: Pull request

Affected versions: 7.0.1, 7.0.2

Due in version: 7.1.0


Story Points: