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

ListBoxItem with Button - Reorder Not Work Properly

7 Answers 61 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 19 Aug 2014, 09:05 AM
Hello, 

I am working on a project with a RadListBox.
In the RadListBox there is a list of items.
Each item consists of 2 elements: text and a toggle RadButton.
The user can change the location of an item inside the list, by drag-and-drop and also can change the toggle-state of the RadButton.

I am trying to get the new order of the list, after such a change.
I get the new order of the texts, but not the order of the buttons. [View video]

How can I get also the new order of the buttons?

Thanks,
Daniel.


My code:

ASPX:
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="Button1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lbl_listSelected" />
                        <telerik:AjaxUpdatedControl ControlID="RadListBox1" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="btn_up">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadListBox1" UpdatePanelCssClass="" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
 
 
 <table cellpadding="0" cellspacing="0" class="nav-justified">
            <tr>
                <td class="auto-style1">
     
  
        <telerik:RadListBox ID="RadListBox1" runat="server"  AutoPostBackOnReorder="false" EnableDragAndDrop="true" AllowReorder="true" Skin="Metro" >
             <ButtonSettings ShowReorder="false"></ButtonSettings>
            <ItemTemplate>
                <telerik:RadButton ToggleType="CustomToggle" runat="server" AutoPostBack="false" Skin="Metro" ID="btn_Order"  Width="26px" Height="18px" Checked="true" ButtonType="ToggleButton" OnClick="btn_Order_Click" EnableViewState="true">  
                   <ToggleStates>
                       <telerik:RadButtonToggleState ImageUrl="img/no-sort.png" Selected="true" IsBackgroundImage="true" Value="NoSort"/>
                       <telerik:RadButtonToggleState ImageUrl="img/up.png"  IsBackgroundImage="true" Value="Asc" />
                       <telerik:RadButtonToggleState ImageUrl="img/down.png" IsBackgroundImage="true" Value="Dsc"/>
                   </ToggleStates>
                      
                </telerik:RadButton>
         
  
  
                 <span runat="server" id="Buttons_Name"><%# Eval("Col")%></span>
                
                <br />
            </ItemTemplate>
             
          
        </telerik:RadListBox>
                </td>
                <td>
                    <asp:Label ID="lbl_listSelected" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td class="auto-style1">
        <asp:Button ID="Button1" runat="server" Text="Button" />
                    <asp:Button ID="btn_up" runat="server" Text="up" />
                </td>
                <td> </td>
            </tr>
        </table>

VB.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
  
  
             
            columnsTable = generateListCol()
            RadListBox1.DataSource = columnsTable
            RadListBox1.DataTextField = "Col"
            RadListBox1.DataBind()
        End If
    End Sub
 
   Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click
  
        Dim sb As New StringBuilder
        Dim collection As IList(Of RadListBoxItem) = RadListBox1.Items
  
 
        For Each item As RadListBoxItem In collection
            Dim btn As RadButton = CType(item.FindControl("btn_Order"), RadButton)
            sb.Append(item.Text + " - " + btn.SelectedToggleState.Value + "<br />")
        Next
        lbl_listSelected.Text = sb.ToString
    End Sub




7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 19 Aug 2014, 09:52 AM
Hi Daniel,

Try to set the AutoPostBackOnReorder property of RadListBox to true which works fine at my end.

ASPX:
<telerik:RadListBox ID="RadListBox1" runat="server" AutoPostBackOnReorder="true"...>

Thanks,
Shinu.
0
Daniel
Top achievements
Rank 1
answered on 19 Aug 2014, 11:37 AM
Hi Shinu,

Thank you for the solution you have submitted.

However, it is not good for my project.
In my project the performance is very critical and if you add AutoPostBackOnReorder="true" it becomes very slow.

Hope for another solution,

Thanks,
Daniel.


0
Shinu
Top achievements
Rank 1
answered on 20 Aug 2014, 05:00 AM
Hi Daniel,

With reference to this forum thread this is the one work around that Telerik provides for this issue. As a suggestion you can Ajaxify the RadListBox so that the PostBack issue will not occur and try to set the AutoPostBackOnReorder property.

ASPX:
<telerik:AjaxSetting AjaxControlID="RadListBox1">
  <UpdatedControls>
    <telerik:AjaxUpdatedControl ControlID="RadListBox1" />
  </UpdatedControls>
</telerik:AjaxSetting>

Thanks,
Shinu.
0
Daniel
Top achievements
Rank 1
answered on 25 Aug 2014, 10:22 AM
Hi Shinu,

Thank you for the solution.

However, it is not good for my project’s requirements.

In my project the performance is very critical. If you add AutoPostBackOnReorder="true"
it becomes very slow. [see video that shows the difference in speed between  AutoPostBackOnReorder="true” and
AutoPostBackOnReorder="false”
]

Hoping for a fast drag-and-drop solution and thanks,

Daniel.
0
Shinu
Top achievements
Rank 1
answered on 26 Aug 2014, 05:44 AM
Hi Daniel,

Unfortunately I couldn't replicate the issue at my end. Please have a look into the sample project which works fine at my end.

Thanks,
Shinu.

0
Daniel
Top achievements
Rank 1
answered on 01 Sep 2014, 09:42 AM
Hi Shinu,

Thank you for your reply.

Our project has a page with RadGrid with Properties and a lot of JS functions that can affect the speed with AUTOPOSTBACKREORDER = TRUE.

For instance, if the RadGrid has the Property MasterTableView-HierarchyLoadMode = "Client"
that slows the speed of reordering the items.

hoping for solution that will work for me,
Daniel.
0
Nencho
Telerik team
answered on 04 Sep 2014, 08:16 AM
Hello Daniel,

As I can see you are using server templates. In such scenario, you would need to have the AutoPostBack property corresponding to the needed action, as Shinu already suggested. Otherwise, I would suggest you to use client templates, as demonstrated in the following documentation article :

http://www.telerik.com/help/aspnet-ajax/listbox-client-templates.html

Regards,
Nencho
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
ListBox
Asked by
Daniel
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Daniel
Top achievements
Rank 1
Nencho
Telerik team
Share this question
or