Home / Community / Code Library / ASP.NET and ASP.NET AJAX > PanelBar > Scroll to Specific PanelItem

• Princy MVP

  Posted on May 27, 2009 (permalink)

  Requirements
  RadControls version	2009.01.0311.35
  .NET version	2.0
  Visual Studio version	2005
  programming language	JavaScript
  browser support	all browsers supported by RadControls

  
  PROJECT DESCRIPTION
  This project illustrates how to search and scroll to specific panelitem and select the item in client side. It also expands all the parent items. The method scrollIntoView() causes the panelitem to scroll into view, aligning the item to the top of the view area (if possible).
  Note: This repositions the PanelBar's scrollbars only, not the scrollbars for the page.
  
  ASPX:
  

  <asp:ScriptManager ID="ScriptManager1" runat="server" />

  <br />

  <br />

  <telerik:RadPanelBar ID="RadPanelBar1" Height="180px" ExpandMode="FullExpandedItem" runat="server" Skin="Vista">

  <Items>

  <telerik:RadPanelItem Text="ASP.NET controls" runat="server">

  <Items>

  <telerik:RadPanelItem Text="RadComboBox" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadMenu" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadTabStrip" runat="server">

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadPanelBar" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadTreeView" runat="server">

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadToolBar" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadChart" runat="server">

  </telerik:RadPanelItem>

  </Items>

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="WinForms controls" runat="server">

  <Items>

  <telerik:RadPanelItem Text="RadComboBox (Win)" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadDock" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadGridView" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="RadTabStrip (Win)" runat="server" >

  </telerik:RadPanelItem>

  </Items>

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="Other projects" runat="server">

  <Items>

  <telerik:RadPanelItem Text="SiteFinity" runat="server" >

  </telerik:RadPanelItem>

  <telerik:RadPanelItem Text="Reporting" runat="server" >

  </telerik:RadPanelItem>

  </Items>

  </telerik:RadPanelItem>

  </Items>

  </telerik:RadPanelBar>

  <br />Scroll to Panel Item <br />

  <telerik:RadComboBox ID="RadComboBox1" runat="server" Skin="Vista">

  <Items>

  <telerik:RadComboBoxItem Text="RadComboBox" />

  <telerik:RadComboBoxItem Text="RadMenu" />

  <telerik:RadComboBoxItem Text="RadTabStrip" />

  <telerik:RadComboBoxItem Text="RadPanelBar" />

  <telerik:RadComboBoxItem Text="RadTreeView" />

  <telerik:RadComboBoxItem Text="RadToolBar" />

  <telerik:RadComboBoxItem Text="RadChart" />

  <telerik:RadComboBoxItem Text="RadComboBox (Win)" />

  <telerik:RadComboBoxItem Text="RadDock" />

  <telerik:RadComboBoxItem Text="RadGridView" />

  <telerik:RadComboBoxItem Text="RadTabStrip (Win)" />

  <telerik:RadComboBoxItem Text="SiteFinity" />

  <telerik:RadComboBoxItem Text="Reporting" />

  </Items>

  </telerik:RadComboBox>

  input id="Button1" type="button" value="Search" onclick="FocusItem();" />

  
  JavaScript:
  

  <script type="text/javascript">

  function FocusItem(sender,e)

  {

  var combo = $find("<%= RadComboBox1.ClientID %>");

  var searchItem = combo.get_text();

  var panelbar1 = $find('<%=RadPanelBar1.ClientID %>');

  var myitem = panelbar1.findItemByText(searchItem);

  if(myitem)

  {

  if(myitem.get_level() != 0)

  {

  var parentItem = myitem;

  for(var i = 0; parentItem.get_level() >0; i++)

  {

  parentItem = parentItem.get_parent();

  parentItem.set_expanded(true);

  }

  }

  myitem.get_linkElement().scrollIntoView();

  myitem.select();

  }

  }

  </script>

  
  Thanks,
  Princy.

  Attached files

  • scrolltoitem.rar

  Reply

Back to Top

Home / Community / Code Library / ASP.NET and ASP.NET AJAX > PanelBar > Scroll to Specific PanelItem