Maintaining sort order when transferring between listboxes

[Andrew Ryan]

I am trying to migrate from a homegrown composite "DualListBox" control. One of the things I spent a lot of time on is making sure that if I moved an item from listbox1 to listbox2, if I moved it back, it moved in the same place. Especially if the source listbox is "sorted." I need to make sure that when I transfer back from one listbox to the original, the sort is maintained. How do I do this?

Andrew

[Schlurk]

I do not think there's a built-in way to do this. However you could have a manual insert method that has a defined place for each item so whenever you pass a RadListBoxItem it will perform the insert(index,item) at your pre-set index.

[Genady Sergeev]

Hello Schlurk,

We are going to prepare a KB article on the topic, please stay tuned. We have recently been very busy with the preparing of the Q3 Beta which is going to be released in a few days. After the release, we will prepare the article. You will be able to find it here.

Kind regards,
Genady Sergeev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jim]

Was the KB article ever posted?  I can't find it.

[Schlurk]

It seems like Telerik actually placed this functionality within the controls and didn't just provide a KB article on how to work around this. There is a similar thread, found here, that you can read through that even mentions how to potentially implement this. The idea is that you subscribe to the OnTransferred event and set up the sorting there, which I believe was not possible in the version mentioned in this thread.

[Jim]

Schlurk,

Thanks for taking the time to answer.  Unfortunately, the only thing I see in that thread is a server-side solution, which re-sorts the list box on postback.  I thought the example was to show how to do it client side.  It's not critical, though.  I can figure it out.

Thanks again.

[Genady Sergeev]

Hi guys,

We have dropped the idea for client-side sorting on RadListBox. The reason is complex but it can be summarized in the following: performance issues. DOM manipulations are quite expensive in terms of performance, especially in browsers like IE6&7. We suggest that you use the server-side sorting should you need such.

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Albert Shenker]

This thread doesn't quite provide a solution. Is it possible to maintain the sort status of rad listbox after items are transfered via TransferButtons or Drag/Drop?

[Genady Sergeev]

Hi Albert Shenker,

It is possible to sort the items after transfer but it has to be done on the server using the Sort method provided by RadListBox.

Regards,
Genady Sergeev
the Telerik team

[Andy]

Functionality is as follows:

Protected Sub Available_Transferred(ByVal sender As Object, ByVal e As Telerik.Web.UI.RadListBoxTransferredEventArgs) Handles Available.Transferred

    If e.DestinationListBox.Equals(Available) Then

        Available.Sort = Telerik.Web.UI.RadListBoxSort.Ascending
   Available.SortItems()

    End If

End Sub

Took me a while to find that method.  

[Genady Sergeev]

Hi Andy,

Indeed, the SortItems method should be called after setting the Sort property which only indicates the sort direction ascending or descending.

Greetings,
Genady Sergeev
the Telerik team

[Thad]

Hi Andy,

Here is a tested client side approach that works for me.

Markup:

<telerik:RadListBox ID="rlbSource" runat="server"
                AllowTransfer="true"
                EnableDragAndDrop="false"
                SelectionMode="Multiple"
                AllowTransferOnDoubleClick="true"
                TransferToID="rlbDestination"
                Height="200px"
                OnClientTransferred="radListBoxSortAndFocus_ClientTransferred"
                ButtonSettings-VerticalAlign="Middle"   />

 <telerik:RadListBox ID="rlbDestination" runat="server"
                SelectionMode="Multiple"
                EnableDragAndDrop="false"
                OnClientTransferred="radListBoxSortAndFocus_ClientTransferred"
                Height="200px" />

And the JavaScript:

// This function insert items in a sorted fashion
function radListBoxSortAndFocus_ClientTransferred(sender, e) {
    var senderBox = e.get_sourceListBox();
    var receivingBox = e.get_destinationListBox();
    var transferring = e.get_items();
    var trindex = 0;
    for (t = 0; t <= transferring.length - 1; t++) {
        toTransfer = transferring[t];
        trindex = getInsertPosition(receivingBox, toTransfer.get_text());
        if (trindex >= 0) {
            receivingBox.reorderItem(toTransfer, trindex);
        }
    }
    $telerik.$(senderBox._getGroupElement()).focus();
}

//Gets the position for the transferred item
function getInsertPosition(radListBox, textToInsert) {
    for (i = 0; i <= radListBox.get_items()._array.length - 1; i++) {
        existingText = radListBox.get_items()._array[i].get_text()
        if (existingText.toUpperCase() > textToInsert.toUpperCase()) {
            return i;
        }
    }
    return radListBox.get_items()._array.length - 1;
}

Hope this helps!!
Thad

[Casey]

Hi, I realize this is an old topic but I am in need of this functionality. I would like to re-sort list box items after they are transferred between boxes and would very much like to do it on the client side in order to avoid a page refresh/postback.

I understand why you chose not to implement this when IE 6 and 7 were the predominate browsers since DOM processing was abysmally slow. Now that most users have a newer browser with greater capabilities, I would like to ask that you reconsider your position and give us the ability to keep these list boxes sorted using client-side code.

Thanks,
Casey Gillenwater

[Dimitar Terziev]

Hello Casey,

We appropriate your feedback on the matter, it has been forwarded to our development team for further consideration.

Greetings,
Dimitar Terziev
the Telerik team

[Yien]

Thad - thanks for sharing.  Saved me a lot of headache!!