SAPUI5 StandardListItem sort by selected

Question

I have SelectDialog for one of the popovers. Inside that, I am displaying data using StandardListItem.

The list shows more than 2000 records. However, it takes lots of time to load data, so I set the threshold of 50. When user opens popover, it will show the first 50 records, once he scrolls down, next set of 50 records and so on.

Now, the issue is when user search for a record (e.g. "ABC"), this ABC can be at position 500 in the list. He selects ABC, closes popover, and then reopens it, he cannot see ABC (because ABC is not in first 50 records). He needs to scroll down 6 times to see the data.

What I want to achieve, is once the user selects records, it automatically goes to the top position. UI5 SelectDialog (UI5 Demo Kit) does not provide this functionality since it only supports one-way binding. Any help on this?

My fragement.XML code:

<SelectDialog 
    id="idSel" 
    growingThreshold="50" 
    growing="true"
    showClearButton="true"
    items="{data>AllItems}" 
    multiSelect="true" 
    noDataText="Not Found"
    liveChange="handleSearch" 
    title="Choose"
    autoAdjustWidth="true" 
    growingScrollToLoad="true">

    <StandardListItem id="idItem" description="{data>AllDataId})"
    title="{data>Title}" type="Active"/>

</SelectDialog>

Answer 1

rememberSelections would keep the options ticked/unticked but "ABC" would still be in position 500. I don't think the standard sap.m.SelectDialog control has a way of doing this.

I see a few options though:

• If the selection is queried from somewhere (OData?) you could enrich the options read with whether they are selected or not for this purpose. Then add a sorter to the list that sorts by selected first (https://sapui5.hana.ondemand.com/#/api/sap.ui.model.Sorter). You might also be able to do that in the UI when reading the list data at once, but you've already said you're doing that in batches for performance reasons.
• If manipulating the backend won't work, you could build a custom control that is basically a sap.m.Dialog with 2 sap.m.Lists on top of each other to replicate what you are describing. The top displaying selected items then the bottom, the standard list.
• If we look at how other UIs manage multi-select, it is actually 2 lists side-by-side. Selecting/deselecting is simply moving the item from one side to the other (buttons in between or drag and drop). That way you always keep the context of the selected while looking for another to select. I've implemented this recently myself for choosing multiple options from a long list.
• Alternatively, don't bother with multi-select on the dialog but simply keep the selected state in a sap.m.MultiInput as sap.m.Tokens. This is probably least work of all.