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

Button loses text when changing position client-side

3 Answers 58 Views
ToolBar
This is a migrated thread and some comments may be shown as answers.
JP
Top achievements
Rank 1
JP asked on 31 Aug 2012, 01:33 PM
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!

3 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 05 Sep 2012, 01:26 PM
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.
0
JP
Top achievements
Rank 1
answered on 05 Sep 2012, 02:43 PM
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!
0
Kate
Telerik team
answered on 10 Sep 2012, 01:05 PM
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.
Tags
ToolBar
Asked by
JP
Top achievements
Rank 1
Answers by
Kate
Telerik team
JP
Top achievements
Rank 1
Share this question
or