ListBoxItem with Button - Reorder Not Work Properly

8 posts, 0 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 19 Aug 2014 Link to this post

    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




  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 19 Aug 2014 in reply to Daniel Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 19 Aug 2014 in reply to Shinu Link to this post

    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.


  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 20 Aug 2014 in reply to Daniel Link to this post

    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.
  6. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 25 Aug 2014 in reply to Shinu Link to this post

    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.
  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 26 Aug 2014 in reply to Daniel Link to this post

    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.

  8. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 01 Sep 2014 in reply to Shinu Link to this post

    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.
  9. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 04 Sep 2014 Link to this post

    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.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017