Sorting content Listbox

30 posts, 0 answers
  1. Roberth Dudiver
    Roberth  Dudiver avatar
    3 posts
    Member since:
    Jul 2009

    Posted 09 Jul 2009 Link to this post

    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
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 10 Jul 2009 Link to this post

    Hello Roberth Dudiver,

    RadListBox provides integrated sorting mechanism, there is a property Sort that accepts an enumeration value: RadListBoxSort. The correct way to do an ascending sort is:

     
    RadListBox1.Sort = RadListBoxSort.Ascending; 
    RadListBox1.SortItems(); 


    Sincerely yours,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. vbl vbl
    vbl vbl avatar
    18 posts
    Member since:
    Apr 2005

    Posted 24 Jul 2009 Link to this post

    Is there client side sorting? I could not find anything in the docs.

    Thanks,
    vbl
  5. Michael Arocho
    Michael  Arocho avatar
    29 posts
    Member since:
    Mar 2009

    Posted 15 Sep 2009 Link to this post

    I am in the same situation.  I need the ability to refresh the sort on the client after performing a client transfer.  Is there any way to tell the control to refresh its sort?
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 18 Sep 2009 Link to this post

    Hello guys,

    There is no integrated client side sorting, because this would bring several complications if it were used on a databound RadListBox. However, in the specific case of transferring items, you don't really need a client side sort. The only thing you need is to cancel the transferring event and to manually insert the items being transferred to the correct position


    All the best,
    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.
  7. vbl vbl
    vbl vbl avatar
    18 posts
    Member since:
    Apr 2005

    Posted 18 Sep 2009 Link to this post

    Neraly 2 months come on guys you are falling behind. Or do you just not like me any more?

    I ended up using a bubble sort
  8. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 18 Sep 2009 Link to this post

    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.
  9. Jason
    Jason avatar
    3 posts
    Member since:
    Jun 2009

    Posted 07 Oct 2009 Link to this post

    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.
  10. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 14 Oct 2009 Link to this post

    Hi guys.

    We have recently been very busy working on the upcoming Q3 Beta release. Therefore, the KB is on the queue. We are sorry for the inconvenience, as soon as the beta is out we will prepare the KB article that we have promised. The release of the Q3 beta is scheduled for tomorrow.


    Sincerely yours,
    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.
  11. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 21 Oct 2009 Link to this post

    Hi guys,

    I am happy to announce that we have managed to fix the bug. You can verify that on the latest internal build.

    Sincerely yours,
    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.
  12. Mark Galbreath
    Mark Galbreath avatar
    171 posts
    Member since:
    Jul 2009

    Posted 17 Nov 2009 Link to this post

    Just decent API documentation would help....
  13. Wendy Hunt
    Wendy Hunt avatar
    50 posts
    Member since:
    Nov 2009

    Posted 31 Dec 2009 Link to this post

    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  :)
  14. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 04 Jan 2010 Link to this post

    Hello Wendy Hunt,

    Your code is correct.

    If you want to sort the listboxes after items are transferred hook on the OnTransferred event of the listbox that you want to sort and use the following code:

    RadListBox1.Sort = RadListBoxSort.Ascending; 
    RadListBox1.SortItems();


    Greetings,
    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.
  15. Wendy Hunt
    Wendy Hunt avatar
    50 posts
    Member since:
    Nov 2009

    Posted 04 Jan 2010 Link to this post

    Hi Genady -

    Thanks for your response.  What do you mean by "hook on the OnTransferred event"?  I see an OnClientTransferred property, but it has no True/False selection.  What would I place in the property? 

    Thanks!!  :)
    wen
  16. Mark Galbreath
    Mark Galbreath avatar
    171 posts
    Member since:
    Jul 2009

    Posted 05 Jan 2010 Link to this post

    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

  17. Wendy Hunt
    Wendy Hunt avatar
    50 posts
    Member since:
    Nov 2009

    Posted 06 Jan 2010 Link to this post

    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







  18. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 07 Jan 2010 Link to this post

    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.
  19. Wendy Hunt
    Wendy Hunt avatar
    50 posts
    Member since:
    Nov 2009

    Posted 07 Jan 2010 Link to this post

    HI Genady -

    I was able to get it to work, finally...  :)

    I had to put it in an if statement with (!Page.IsPostBack) because it kept repopulating itself and refreshing the list without transferring my requested data to the next box.  Now it works just fine.  Thanks for your help and explanations. 

    wen
  20. Mark Galbreath
    Mark Galbreath avatar
    171 posts
    Member since:
    Jul 2009

    Posted 11 Jan 2010 Link to this post

    Doh!  Wendy, I was thinking of telling you to put it in the isPostback conditional of the Page_Load method, but just assumed you were doing that.  Sorry!

    Cheers!
    Mark
  21. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 04 Jan 2011 Link to this post

    Whatever happened to the KB article on sorting a listbox on the client-side?
  22. Simon
    Admin
    Simon avatar
    2281 posts

    Posted 05 Jan 2011 Link to this post

    Hello Roberth Dudiver,

    It has been a long time since we promised to publish the KB without any result until now. We will now look into this and will consider publishing the article in the next few weeks.

    Please excuse us for delaying this for so long and thank you for reminding us.

    Greetings,
    Simon
    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.
  23. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 05 Jan 2011 Link to this post

    Thanks, Simon!
  24. Jerry T.
    Jerry T. avatar
    118 posts
    Member since:
    Jul 2012

    Posted 10 Feb 2011 Link to this post

    Any word on releasing this?
  25. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 16 Feb 2011 Link to this post

    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.
  26. Premalatha
    Premalatha avatar
    1 posts
    Member since:
    Nov 2010

    Posted 08 Jun 2011 Link to this post

    Hi,

    The code given below is not working (RadListBoxSort.Zip). We are not able to move all the items using >> button. The items are not at all moving. Please provide us the correct code so that we can use it.

    Please do the needful.
     
    Thanks,
    Prema
  27. ANDREW
    ANDREW avatar
    11 posts
    Member since:
    Aug 2011

    Posted 23 Feb 2012 Link to this post

    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();

    }
  28. ANDREW
    ANDREW avatar
    11 posts
    Member since:
    Aug 2011

    Posted 23 Feb 2012 Link to this post

    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
  29. Brent
    Brent avatar
    1 posts
    Member since:
    Jun 2012

    Posted 26 Jun 2012 Link to this post

    I'm having the same issue. The server side sort adds the un-smooth postback and the code above seems to work nicely but it has errors with the transfer all. Any fix/solution for this?
  30. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 29 Jun 2012 Link to this post

    Hello,

    We have dropped the idea for client-side sorting due to the performance impact it would have caused. If you experience any issue with the server-side sorting please open a support ticket and provide more details regarding your scenario there.

    All the best,
    Genady Sergeev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  31. SlimSjakie
    SlimSjakie avatar
    10 posts
    Member since:
    Apr 2010

    Posted 23 Nov 2012 Link to this post

    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());
    }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017