ListBoxItem with Button - Reorder Not Work Properly

[Daniel]

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

[Shinu]

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.

[Daniel]

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.

[Shinu]

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.

[Daniel]

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.

[Shinu]

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.

[Daniel]

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.

[Nencho]

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