This is a migrated thread and some comments may be shown as answers.

Sorting content Listbox

29 Answers 907 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

Roberth Dudiver asked on 09 Jul 2009, 04:08 PM

Translate this good day because I speak Spanish, with new controls telerick
I have to move the contents of a ListBox to another, that the problem is simple this
they need you to move from ListBoxal listbox2 sorting for this content
name, any idea how to do

Español

Buen día traduzco esto pues hablo español, trabajo con los controles telerick nuevos tengo que pasar el contenido de un ListBox a otro , eso es sencillo el problema esta en que necesito que al pasar del ListBoxal listbox2 este contenido se ordene por nombre, alguna idea de como hacerlo ??
Thanks

29 Answers, 1 is accepted

answered on 18 Sep 2009, 12:25 PM

Hi all,

As Mr. Sergeev already mentioned, introducing an integrated sorting support will create unnecessary complications to RadListBox and this is something we would like to avoid.

In any case, in response to your interest, the next week we will publish a KB article which will show how to preserve the order of two sorted ListBoxes between Transfer operations at the client-side.

We will follow up in this thread once the KB is out to notify you.

Greetings,
Simon
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.

answered on 07 Oct 2009, 11:58 AM

I also think client side sorting should be in the library. Its been well over a week and no link has been posted. Please remember to do this.

Integrated databinding seems like something only newb programmers will take advantage of. Anyone with a clue and a product being used outside of your own company is going to want more control than this. To make sure RadControls doesn't become a watered down version of a library for newbs, you should provide some accompanying support libraries that only work on certain parameters of the control or whatever you need to make the additional functionality work (and really quite basic functionality to anyone who is going to use this control). One related problem I have is that I want to be able to move items between two lists and always keep them in sorted order. This doesn't necessarily even need to ever sort them on the client side because they are already in order, it just needs to keep them in the same order they were originally in. Maybe you can at least make that work. Right now it just adds them to the end of the list which would then require sorting.

answered on 31 Dec 2009, 06:01 PM

I am using Version 2009.3.1103
I am a newbie when it comes to programming. I have the following code in my PopulateLIstBoxes() :

    
                    IQueryable allRenewableResources = RenewableSource.GetAllBindings();  
        
                    this.renewableSourceRadListBox.DataSource = allRenewableResources;  
        
                    this.renewableSourceRadListBox.DataValueField = "ID";  
        
                    this.renewableSourceRadListBox.DataTextField = "Name";  
        
                    this.renewableSourceRadListBox.DataBind();  
        
                    this.renewableSourceRadListBox.Sort = RadListBoxSort.Ascending;  
        
                    this.renewableSourceRadListBox.SortItems();

I would also like to have the left side re-sort after moving data from left to right and back again. Is there a way for me to do this?

Thanks!!
wen :)

answered on 05 Jan 2010, 01:25 PM

Hey Wen,

That's because Genady is using server-side methods and properties and you are looking at client-side methods. Assuming you are using Visual Studio 2005+, go into your code-behind, select your radListBox from the left dropdownlist, then look at the methods available in the right dropdownlist. You will find the OnTransferred event listed. Select it and VS will insert the event handler method (Sub if Visual Basic) where you would use the code Genady recommended.

Things like this should be made clear in documentation, but Telerik is rewriting the docs right now.

Cheers!

Mark

answered on 06 Jan 2010, 06:52 PM

I don't think the OnTransferred is what I'm looking for. More like the OnInserted. Here is my aspx:

    
                   <asp:Label ID="Label11" runat="server" Text="Locations:" 
        
                      style="z-index:1; position:absolute; top:300px; left:67px; text-align: right;"></asp:Label> 
        
                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"   
        
                      style="z-index:1; position:absolute; top:300px; left:150px; height: 78px; width: 75px;">  
        
                      <telerik:RadListBox ID="locationsRadListBox" runat="server" Height="125px"   
        
                        Width="150px" AllowTransfer="true"  OnInserted="locationsRadListBox_OnInserted" 
        
                        TransferToID="RadListBoxDestination" DataSortField="Name" DataTextField="Name"   
        
                        DataValueField="Name" AutoPostBack="False" Skin="WebBlue" >   
        
                      </telerik:RadListBox> 
        
                    </telerik:RadAjaxPanel>    
        
                    <telerik:RadListBox runat="server" ID="RadListBoxDestination" Height="125px" Width="100px" 
        
                      style="z-index:1; position:absolute; top:300px; left:300px;"  /> 
        
                    <asp:Label ID="Label12" runat="server" Text="Renewable Source:" 
        
                      style="z-index:1; position:absolute; top:432px; left:13px; width: 127px; text-align: right;"></asp:Label> 
        
                    <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server"   
        
                      style="z-index:1; position:absolute; top:432px; left:150px; height: 78px; width: 75px;"   
        
                      EnableTheming="True">  
        
                      <telerik:RadListBox ID="renewableSourceRadListBox" runat="server" Height="125px"   
        
                        Width="150px" DataSortField="Name"    
        
                        DataTextField="Name" DataValueField="Name" AllowTransfer="true" TransferToID="RadListDestination2" 
        
                         Skin="WebBlue" onclienttransferred="true">  
        
                      </telerik:RadListBox> 
        
                    </telerik:RadAjaxPanel> 
        
                    <telerik:RadListBox runat="server" ID="RadListDestination2" Height="125px" Width="100px" 
        
                      style="z-index:1; position:absolute; top:432px; left:300px;"  />

Here is my behind code for the event:

    
                  protected void locationsRadListBox_OnInserted(object sender, RadListBoxInsertingEventArgs e)  
        
                  {  
        
                    this.locationsRadListBox.Sort = RadListBoxSort.Ascending;  
        
                    this.locationsRadListBox.SortItems();  
        
                  }

I want the list to be sorted when the data is inserted back into the listbox from the destination box.
My event for OnInserted isn't being fired at all for some reason.
Any Ideas ?

wen

answered on 07 Jan 2010, 01:51 PM

testtransfer.zip

Hi Wendy Hunt,

OnInserting, OnInserted, OnTransfering and OnTransferred are all server events that have their counter part on the client, named the same + the onclient prefix. In your case, you are not posting back to the server, so the server events are not fired. Please, remove the AutoPostBack="false" declaration and put the following instead:

AutoPostBackOnTransfer="true"

So, your source listbox declaration should looks like this:

<telerik:RadListBox ID="locationsRadListBox" runat="server" Height="125px"

Width="150px" AllowTransfer="true" OnInserted="locationsRadListBox_OnInserted"

TransferToID="RadListBoxDestination" DataSortField="Name" DataTextField="Name"

DataValueField="Name" AutoPostBackOnTransfer="true" Skin="WebBlue" >

This will make the server events described above to fire. However, you cannot use the Inserting event to sort items. The reason is, that the Inserting event has entirely different purpose. It was designed to be used when the ListBox is bound to a datasource and the automatic datasource updates functionality is turned on. In your case, you wil need to stick to the OnTransferring event. Once there, you need to use the following code:

void RadListBox1_Transferred(object sender, RadListBoxTransferredEventArgs e)

{

RadListBox1.Sort = RadListBoxSort.Ascending;

RadListBox1.SortItems();

}

For your convenience, I have prepared sample project demonstrating the approach.

Best wishes,
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.

answered on 16 Feb 2011, 02:09 PM

RadListBoxSort.zip

Hi Jerry T.,

I am attaching sample project that shows how to do the sorting. The changes are persist over a postback. I hope that this will help you to get started.

Greetings,
Genady Sergeev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 24 Feb 2012, 02:44 AM

Hi Folks,

I've modified Genady's example to use args.get_items instead of args.get_item so it will work with multiple items (either by selecting multiple or using the 'transfer all' buttons. Also the example was missing the specification for the source sorting order which meant that the source box would sort descending..

Regarding the track and commit code, I'm not sure what the recommended location would be (around the items for loop or inside wrapping each insert call). Putting it outside the items for loop should perform better but not sure if there would be any downsides??

HTH

Andrew

var direction = { ascending: 0, descending: 1 };

Telerik.Web.UI.RadListBox.prototype.comparer = function() { };

Telerik.Web.UI.RadListBoxItem.prototype.compareTo = function(otherItem) {

return this.get_parent().comparer(this, otherItem);

}

function pageLoad() {

initComparers();

}

function initComparers() {

var source = $find("<%= source_ListBox.ClientID %>");

var destination = $find("<%= destination_ListBox.ClientID %>");

// you can chose among ascending/descending

source.direction = direction.ascending;

destination.direction = direction.ascending;

// you can use your own comparer depending on the criteria you want to compare the

// the items against. If the item to insert should preceed the current item

// return 1. If the current item is before the item to insert return -1

destination.comparer = source.comparer = function(item, otherItem) {

var arr = [item.get_text(), otherItem.get_text()];

arr.sort();

var result = arr[0] == item.get_text() ? -1 : 1;

if (item.get_parent().direction == direction.descending)

result *= -1;

return result;

}

function transferring(sender, args) {

args.set_cancel(true);

var destination = args.get_destinationListBox();

var items = args.get_items();

destination.trackChanges();

args.get_sourceListBox().trackChanges();

for (var j = 0; j < items.length; j++) {

var itemToTransfer = items[j];

var index = destination.direction == 0 ? destination.get_items().get_count() : 0;

for (var i = 0; i < destination.get_items().get_count(); i++) {

var currentItem = destination.getItem(i);

if (currentItem.compareTo(itemToTransfer) > 0) {

index = currentItem.get_index();

break;

}

destination.get_items().insert(index, itemToTransfer);

destination.commitChanges();

args.get_sourceListBox().commitChanges();

}

answered on 24 Feb 2012, 02:54 AM

Ok so I've just found a bug in this method.. it seems that when transferring from source to destination (either using the single move to dest on the last remaining item in the source list or 'all move to dest' buttons, all buttons disable. However if going the other way (from destination to source), moving the last remaining item in the destination list or 'all move' button the 'move single to source' and 'move all to source' buttons stay enabled until the use clicks in the source box.

Just out of interest, what is the reason that the 'move all' buttons appear disabled at all? I can understand that if all items are already in one location you wouldn't need the move all TO that location but surely the move all to other location button should be enabled even if the listbox doesn't have focus? The buttons themselves do actually still 'work' but appear disabled until either listbox gains focus.

Just to clarify, the problem only occurs if the transfer function is 'overridden'. The standard Telerik controls function as expected if the transfer isn't cancelled and processed manually. Just need to work out how to update the transfer buttons manually post update.

Cheers,

Andrew

answered on 23 Nov 2012, 01:06 PM

Sorting a RadListBox on the client is not that difficult:

function doFullSort(sender, args) {

var oRadListBox = $telerik.toListBox($find('<%=rlbMain.ClientID %>'));

var Items = oRadListBox.get_items();

var ItemA, ItemB, ItemX;

for (x = 0; x < Items.get_count(); x++) {

ItemA = Items.getItem(x);

for (y = x+1; y < Items.get_count(); y++) {

ItemB = Items.getItem(y);

if (ItemA.get_text() > ItemB.get_text()) swapItem(ItemA, ItemB);

}

function swapItem(ItemA, ItemB)

{

var ItemX = new Telerik.Web.UI.RadListBoxItem();

ItemX.set_value(ItemB.get_value());

ItemX.set_text(ItemB.get_text());

ItemB.set_value(ItemA.get_value());

ItemB.set_text(ItemA.get_text());

ItemA.set_value(ItemX.get_value());

ItemA.set_text(ItemX.get_text());

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Sorting content Listbox

29 Answers, 1 is accepted