Button loses text when changing position client-side

4 posts, 0 answers
  1. JP
    JP avatar
    120 posts
    Member since:
    Aug 2011

    Posted 31 Aug 2012 Link to this post

    Hi,

    I want to change the order of a checked button client-side. This works, but after moving the button, it loses it's text.

    This is my code:
    moveButtonRight: function () {
          var toolbar = this.get_radToolBar();
          toolbar.trackChanges();
          var button = this._getSelectedButton();
          var index = toolbar.get_items().indexOf(button);
          if (index < toolbar.get_items().get_count() - 1) {
             toolbar.get_items().removeAt(index);
             toolbar.get_items().insert(index + 1, button);
          }
          toolbar.commitChanges();
       },
       _getSelectedButton: function () {
          var toolbar = this.get_radToolBar();
          var itemCount = toolbar.get_items().get_count();
     
          for (var i = 0; i < itemCount; i++) {
             var item = toolbar.get_items().getItem(i);
             if (item.constructor.getName() == "Telerik.Web.UI.RadToolBarButton" && item.get_checked()) {
                return item;
             }
          }
     
          return null;
       }

    When I change the _getSelectedButton function so that I call item.get_text() before returning it, it works fine:

    _getSelectedButton: function () {
          var toolbar = this.get_radToolBar();
          var itemCount = toolbar.get_items().get_count();
     
          for (var i = 0; i < itemCount; i++) {
             var item = toolbar.get_items().getItem(i);
             if (item.constructor.getName() == "Telerik.Web.UI.RadToolBarButton" && item.get_checked()) {
                item.get_text();
                return item;
             }
          }
     
          return null;
       }

    Is this a bug or what else could cause this?

    Thanks!
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Sep 2012 Link to this post

    Hello Jan-Patrick,

    Can you please elaborate on your scenario? How do you use the code that you provided? I would greatly appreciate if you can send me a full runnable page that I can inspect locally and help you out. 

    Regards,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. JP
    JP avatar
    120 posts
    Member since:
    Aug 2011

    Posted 05 Sep 2012 Link to this post

    Hi,

    I want to change the toolbar's button position client side. But after switching, it loses the text. Here is an easy sample how you can reproduce this issue:

    this is the aspx.cs:
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
     
    namespace Test
    {
       /// <summary>
       ///
       /// </summary>
       public partial class WebForm1 : System.Web.UI.Page
       {
          /// <summary>
          /// Handles the Load event of the Page control.
          /// </summary>
          /// <param name="sender">The source of the event.</param>
          /// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>
          protected void Page_Load(object sender, EventArgs e)
          {
     
          }
     
          /// <summary>
          /// Called by the ASP.NET page framework to notify server controls that use composition-based implementation to create any child controls they contain in preparation for posting back or rendering.
          /// </summary>
          protected override void CreateChildControls()
          {
             base.CreateChildControls();
     
             RadToolBar toolBar = new RadToolBar();
             toolBar.ID = "Toolbar";
     
             toolBar.Items.Add(new RadToolBarButton("Button1") { CheckOnClick = true, AllowSelfUnCheck = true });
             toolBar.Items.Add(new RadToolBarButton("Button2") { CheckOnClick = true, AllowSelfUnCheck = true });
              
             Form.Controls.Add(toolBar);
     
             RadButton buttonAlertText1 = new RadButton();
             buttonAlertText1.ID = "buttonAlertText1";
             buttonAlertText1.Text = "Doesn't work";
             buttonAlertText1.AutoPostBack = false;
             buttonAlertText1.OnClientClicked = "Button1OnClientClicked";
             Form.Controls.Add(buttonAlertText1);
     
             RadButton buttonAlertText2 = new RadButton();
             buttonAlertText2.ID = "buttonAlertText2";
             buttonAlertText2.Text = "Works";
             buttonAlertText2.AutoPostBack = false;
             buttonAlertText2.OnClientClicked = "Button2OnClientClicked";
             Form.Controls.Add(buttonAlertText2);
          }
     
          /// <summary>
          /// Raises the <see cref="E:System.Web.UI.Control.PreRender"/> event.
          /// </summary>
          /// <param name="e">An <see cref="T:System.EventArgs"/> object that contains the event data.</param>
          protected override void OnPreRender(EventArgs e)
          {
             base.OnPreRender(e);
     
             RadToolBar toolbar = (RadToolBar)FindControl("Toolbar");
             RadButton buttonAlertText1 = (RadButton)FindControl("buttonAlertText1");
             RadButton buttonAlertText2 = (RadButton)FindControl("buttonAlertText2");
     
             buttonAlertText1.Value = toolbar.ClientID;
             buttonAlertText2.Value = toolbar.ClientID;
          }
       }
    }

    And this the aspx:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Test.WebForm1" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     
    <head runat="server">
        <title></title>
         
    </head>
    <body>
       <script type="text/javascript">
          function Button1OnClientClicked(sender, e) {
             var toolbar = $find(sender.get_value());
             var itemCount = toolbar.get_items().get_count();
     
             for (var i = 0; i < itemCount; i++) {
                var item = toolbar.get_items().getItem(i);
                if (item.get_checked()) {
                   var index = toolbar.get_items().indexOf(item);
                   var newIndex = index == 1 ? 0 : 1;
                   toolbar.get_items().removeAt(index);
                   toolbar.get_items().insert(newIndex, item);
                    
                   alert('item text: ' + item.get_text());
                   return;
                }
             }
     
             alert('nothing selected');
          }
     
          function Button2OnClientClicked(sender, e) {
             var toolbar = $find(sender.get_value());
             var itemCount = toolbar.get_items().get_count();
     
             for (var i = 0; i < itemCount; i++) {
                var item = toolbar.get_items().getItem(i);
                if (item.get_checked()) {
                   item.get_text(); // this is the only difference!
                   var index = toolbar.get_items().indexOf(item);
                   var newIndex = index == 1 ? 0 : 1;
                   toolbar.get_items().removeAt(index);
                   toolbar.get_items().insert(newIndex, item);
                    
                   alert('item text: ' + item.get_text());
                   return;
                }
             }
     
             alert('nothing selected');
          }
        </script>
        <form id="form1" runat="server">
           <telerik:RadScriptManager runat="server" ID ="ScriptManager"></telerik:RadScriptManager>
        </form>
    </body>
    </html>

    Both RadButtons will switch the selected button's position and display the text in an alert.
    The "Doesn't work" button won't call "get_text()" before remove/insert and therefor the "get_text()" after remove/insert will be empty. The second button does this and it will work. I'm using 2012.2.607.40.

    Thanks!
  5. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 10 Sep 2012 Link to this post

    Hello Jan-Patrick,

    Once you remove an item from the collection (meaning that you remove the whole element) it is expected that  you get all of its properties lost when you try to place it back in the collection. Thus you get the behavior that you describe. I would suggest, however, that you use the approach described in the RadToolBarItemCollection Client Object help article - you remove and add items and at the same time preserve the changes over a postback. 

    All the best,
    Kate
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top