Button loses text when changing position client-side

[JP]

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!

[Kate]

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

[JP]

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">

<html xmlns="http://www.w3.org/1999/xhtml">
<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!

[Kate]

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