Sort Listbox items

5 posts, 0 answers
  1. Bo Su
    Bo Su avatar
    2 posts
    Member since:
    Aug 2009

    Posted 17 Aug 2009 Link to this post

    Hi Telerik team,

     

    I am Telerik user and I have an requirement as below:

     

    1. -          Two rad listboxes, one named AvailableList and the other named SelectedList
    2. -          User can drag and drop items between two list boxes.
    3. -          As soon as an item is dragged from SelectedList and dropped into AvailableList, the AvailableList needs to be sorted in ascending order.

     

    Right now, Telerik RadListBox doesn’t support Dropped event (it is not fired when dropping an item over another RadListBox/RadListBoxItem). So, how can I sort  AvailableList’s items whenever an item is dropped into it?

     

    I have tried to work around by firing two event OnInserted and OnUpdated, but it seems hopelessness (these two events were fired one by one after an item was dropped into AvailableList), and it threw exception like:

     

    Line: 6

    Error: Sys.WebForms.PageRequestManagerServerErrorException: Insertion index was out of range. Must be non-negative and less than or equal to size.

    Parameter name: index

     

    It’s urgent, any solution please?

     

    Many thanks,

    Bo

  2. Bo Su
    Bo Su avatar
    2 posts
    Member since:
    Aug 2009

    Posted 17 Aug 2009 Link to this post

    Source code:

    <asp:Content ID="Content3" ContentPlaceHolderID="ReportBuilderContent" runat="server">  
        <div>
            <telerik:RadAjaxPanel ID="panelDataSelection" runat="server">
                <div style="float: left; padding-right: 10px">
                    <div>
                        Available Fields:</div>
                    <div>
                        <telerik:RadListBox ID="lstAvailableFields" runat="server" SelectionMode="Multiple"
                            AllowTransfer="true" AutoPostBackOnTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true"
                            EnableDragAndDrop="true" TransferToID="lstSelectedFields" Height="300px"
                            Width="250px" AllowAutomaticUpdates="true"
                            OnInserted="OnAvailableListInserted"    
                            OnUpdated="OnAvailableListUpdated"                          
                            Sort="Ascending" >
                            <ButtonSettings ShowReorder="false" ShowTransfer="false" ShowTransferAll="false"/>
                        </telerik:RadListBox>
                    </div>
                    <div align="center">
                        <br/>
                        <asp:Button ID="btnDone" runat="server" Text="I'm Done Choosing Fields" Width="170px" />                    
                    </div>
                </div>
                <div style="float: left">
                    <div>
                        Selected Fields:</div>
                    <div>
                        <telerik:RadListBox ID="lstSelectedFields" runat="server" SelectionMode="Multiple"
                            AllowTransfer="True" AutoPostBackOnTransfer="True" AllowReorder="True" AutoPostBackOnReorder="True"
                            EnableDragAndDrop="True" TransferToID="lstAvailableFields" Height="300px" Width="250px"                                                
                            Sort="Ascending">
                            <ButtonSettings ShowReorder="false" ShowTransfer="false" ShowTransferAll="false" />
                        </telerik:RadListBox>
                    </div>
                    <div align="center">
                        <br/>
                        <asp:Button ID="btnReset" runat="server" OnClick="OnButtonResetClicked" Text="Reset" />                    
                    </div>
                </div>
                <div style="clear: both">
                </div>
            </telerik:RadAjaxPanel>
        </div>    
    </asp:Content>

    Code behind

     /// <summary>
            /// Event is fired on available list inserted.
            /// </summary>        
            protected void OnAvailableListInserted(object sender, RadListBoxEventArgs e)
            {
                 lstAvailableFields.SortItems();          
            }

     /// <summary>
            /// Event is fired on available list updated.
            /// </summary>        
            protected void OnAvailableListUpdated(object sender, RadListBoxEventArgs e)
            {
                    lstAvailableFields.SortItems();
            }




  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark Perry
    Mark Perry avatar
    17 posts
    Member since:
    Mar 2010

    Posted 07 Oct 2010 Link to this post

    Did you ever get this to work? I am running into the same issue. Items transfered to the avalible list need to be in alphabetical order.
  5. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 14 Oct 2010 Link to this post

    Hello guys,

    You need to use the Transferring/Transferred events when transfering items (even with DragAndDrop). I've attached a sample project that demonstrates the approach.

    Best wishes,
    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
  6. kate tsai
    kate tsai avatar
    1 posts
    Member since:
    Jan 2010

    Posted 02 Mar 2011 Link to this post

    HI.  i've follow the sample example, but it still does not sort the target list box.  Please help!

    RadLstCombinedPrecincts is the source and RadLstCombinedPrecinctSelected is the target ListBox.  
    When i drag an item from RadLstCOmbinedPrecincts to RadLstCombinedPrecinctSelected, i want to sort the text in the target listbox, but it's not doing it even after registering the transferred & transferring event.  When i go through the debugger, the transferred & transferring methods are getting called when i drag/drop an item from source to target listbox.  

    protected override void OnInit(EventArgs e)
          {
              RadLstCombinedPrecincts.Transferred += new Telerik.Web.UI.RadListBoxTransferredEventHandler(OnRadLstCombinedPrecinctsSelected_Transferred);
             RadLstCombinedPrecincts.Transferring += new Telerik.Web.UI.RadListBoxTransferringEventHandler(OnRadLstCombinedPrecinctsSelected_Transferring);
             base.OnInit(e);
          }

    protected void OnRadLstCombinedPrecinctsSelected_Transferring(object sender, RadListBoxTransferringEventArgs e)
          {
             RadLstCombinedPrecinctsSelected.SortItems();
          }
          void OnRadLstCombinedPrecinctsSelected_Transferred(object sender, Telerik.Web.UI.RadListBoxTransferredEventArgs e)
          {
             RadLstCombinedPrecinctsSelected.SortItems();
          }

    <telerik:RadListBox ID="RadLstCombinedPrecincts" runat="server" 
                            TransferToID="RadLstCombinedPrecinctsSelected" 
                            AllowReorder="true"
                            AllowTransfer="True"
                            AutoPostBackOnTransfer="true"
                            AutoPostBackOnReorder="true"                             
                            Sort="Ascending" 
                            Height="200px" EnableDragAndDrop="true"                        
                            Width="100%"  CssClass="TXT_CAPTION" >
                        <ButtonSettings ShowReorder="false" ShowTransfer="false" ShowTransferAll="false" />
                        <HeaderTemplate>
                           <div class="TXT_CAPTION3" style="display:inline;float:left;width:230px"><asp:Label runat="server">Combined Precincts</asp:Label></div>
                        </HeaderTemplate>                    
                        </telerik:RadListBox>

    <telerik:RadListBox ID="RadLstCombinedPrecinctsSelected" runat="server"      
                              TransferToID="RadLstCombinedPrecincts" 
                              AllowTransfer="true" 
                              AllowReorder="true"  
                              AutoPostBackOnTransfer="true"  
                              AutoPostBackOnReorder="True"
                              Sort="Ascending"      
                              Height="170px" Width="100%" EnableDragAndDrop="true" >
                           <ButtonSettings ShowReorder="false" ShowTransfer="false" ShowTransferAll="false" />
                           <HeaderTemplate>
                              <div class="TXT_CAPTION3" style="display:inline;float:left;width:230px"><asp:Label ID="Label2" runat="server">Combined Precincts</asp:Label></div>
                           </HeaderTemplate>                                                                   
                           </telerik:RadListBox>
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017