Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > SetFocus - client side

• Michael Tissington

  Posted on Nov 6, 2007 (permalink)

  I have a button (and other controls) in a template in each panel item.
  
  When the item is expanded, how can I set the focus to the button ?

• Paul Paul

  Posted on Nov 7, 2007 (permalink)

  Hello Michael,
  
  Please find below a sample code snippet that demonstrates the needed approach.
  
  ASPX:
  

  <form id="form1" runat="server">

  <radP:RadPanelbar ID="RadPanelbar1" runat="server" OnItemClick="RadPanelbar1_ItemClick">

  <Items>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 1">

  <Items>

  <radP:RadPanelItem runat="server" Value="TemplateHolder">

  <ItemTemplate>

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>

  </ItemTemplate>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 2">

  <Items>

  <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelbar>

  </form>

  
  Code-behind:
  

  protected void RadPanelbar1_ItemClick(object sender, Telerik.WebControls.RadPanelbarEventArgs e)

  {

  if (e.Item.Text == "Root RadPanelItem 1" && e.Item.Expanded == true)

  {

  RadPanelItem myItem = (RadPanelItem)RadPanelbar1.FindItemByValue("TemplateHolder");

  Button myBut = (Button)myItem.FindControl("Button1");

  myBut.Focus();

  }

  }

  
  
  Sincerely yours,
  Paul
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Michael Tissington

  Posted on Nov 7, 2007 (permalink)

  Paul, thanks for the reply.
  
  Unless I'm missing something, this solution is code-behind and I'm really looking for a solution on the client side (javascript).
  
  Thanks.

• Paul Paul

  Posted on Nov 7, 2007 (permalink)

  Hi Michael,
  
  There are two possible ways you can achieve your goal on the client.
  
  1)
  

  <script type="text/javascript">

  function SetFocus(sender, args)

  {

  if(args.Item.Text == "Root RadPanelItem 1" && args.Item.Expanded == true)

  {

  var mybutID = args.Item.Items[0].ID + "_Button1";

  var mybut = document.getElementById(mybutID);

  mybut.focus();

  }

  }

  </script>

  <radP:RadPanelbar ID="RadPanelbar1" runat="server" OnClientItemExpand="SetFocus">

  <Items>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 1">

  <Items>

  <radP:RadPanelItem runat="server" Value="TemplateHolder">

  <ItemTemplate>

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>

  </ItemTemplate>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 2">

  <Items>

  <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelbar>

  
  2)
  

  <script type="text/javascript">

  function SetFocus(sender, args)

  {

  if(args.Item.Text == "Root RadPanelItem 1" && args.Item.Expanded == true)

  {

  var mybutID = '<%= RadPanelbar1.FindItemByValue("TemplateHolder").FindControl("Button1").ClientID %>';

  var mybut = document.getElementById(mybutID);

  mybut.focus();

  }

  }

  </script>

  <radP:RadPanelbar ID="RadPanelbar1" runat="server" OnClientItemExpand="SetFocus">

  <Items>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 1">

  <Items>

  <radP:RadPanelItem runat="server" Value="TemplateHolder">

  <ItemTemplate>

  <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

  <asp:Button ID="Button1" runat="server" Text="Button"></asp:Button>

  </ItemTemplate>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  <radP:RadPanelItem runat="server" Text="Root RadPanelItem 2">

  <Items>

  <radP:RadPanelItem runat="server" Text="Child RadPanelItem 1">

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelItem>

  </Items>

  </radP:RadPanelbar>

  
  
  Best wishes,
  Paul
  the Telerik team

  
  Instantly find answers to your questions at the new Telerik Support Center

• Michael Tissington

  Posted on Nov 7, 2007 (permalink)

  Thanks - that's what I was looking for.

• Karl Intermediate

  Posted on Dec 21, 2010 (permalink)

  I need to do a similar thing, in that I need to work with a control in a template. However, Im using PanelBar from version 2010.3.1215.35 and my control is in a dynamic RadPanelItem's HeaderTemplate.
  
  I have a custom template as I need to embed a textbox along with other controls in the actual header, which is all working fine, but I also want my expand/collapse image to change when the RadPanelItem is expended or collapsed.
  
  The code I have so far, which doesn't work,  is ...
  
  

  function PanelItemExpanded(sender, eventArgs)

  {

      if (eventArgs.Item.Expanded == true)

      {

          var myImageID = eventArgs.Item.Items[0].ID;

          var myImage = document.getElementById(myImageID);

          mybut.scr = "../App_Themes/MyTheme/Images/SmallButtons/btn_Collapse.png";

      }

  }

  
  but this fails straight away on the line that reads
  
  

  if (eventArgs.Item.Expanded == true)

  
  In fact, "Item" isn't part of the "eventArgs" object model, but "_item" is?
  
  The point is that I'm trying to access an image control in a tablecell which is part of a table that makes up the HeaderTemplate but I'm haivng no luck at all. It seems the samples below require that the name of the RadPanelItem be known at design time, but I won;t know this.
  
  Any help implementing this for dynamic RadPanelItems would be most appreciated...
  
  Thanks,
  Karl

• Karl Intermediate

  Posted on Dec 22, 2010 (permalink)

  Is the help up to date for the event onClientItemExpand for the RadPanelBar?
  
  The link http://www.telerik.com/help/aspnet/panelbar/radpanelbar-telerik.webcontrols.radpanelbar-onclientitemexpand.html suggests that there is one property for eventArgs, "Item", but this isn't the case when I debug my code.
  

• Yana Yana

  Posted on Dec 22, 2010 (permalink)

  Hi Karl,
  
  This help article is for "classic" RadPanelBar for ASP.NET.  I guess that you're using RadPanelBar for ASP.NET AJAX.  Here is the correct article about OnClientItemExpand event.
  
  Kind regards,
  Yana
  the Telerik team

  
  Check out Telerik Trainer, the state of the art learning tool for Telerik products.

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET > Panelbar > SetFocus - client side