Sort Listbox items

[Bo Su]

Hi Telerik team,

 

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

 

 

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

[Bo Su]

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

[Mark Perry]

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.

[Genady Sergeev]

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

[kate tsai]

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>