Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > scroll listbox with buttons

• David

  Posted on Jan 5, 2012 (permalink)

  • ASP.net 2010/4.0
  • OS: Wiindows XP Pro
  • IE9
  • newest version of Telerik as of Jan 2012 (dont have that here with me now)
  • vb.net

  I have a Radlistbox that is taller than the table that contains it.  I was tasked with creating up and down buttons that the user can use to scroll the Radlistbox up and down.  I created that and I able to scroll up and down a div with no issue  however when I try to do this with the Telerik RadListbox it does not work, using "getElementByID("MyListBox"), that does not work.
  
  I researched the Radlistbox and found that it includes a div so what I did was look in the source code ("view source") of the page and found the name of that div and then tried using that exact name to scroll but nothing happens there.  It appears that the javascript finds the control because it does not error but it is simply  not moving that but the same code works good for a normal div.
  Does anyone know  how to solve this? 
  
  In the source code I see that Radlistbox uses 3 different stylesheets that are all online.  I was able to look at one of them last night and wondering if one of the stylesheets for the Radlistbox has some kind of setting that keeps the Radlistbox from being able to be manually scrolled by using a button.
  
  so the question I have is  how can  you use buttons (ex:  UpButton and DownButton) to scroll a RadListBox?
  
  I apologize that I do not have the exact javascript that I'm using here but when I get home later I can update this post with that.
  
  thanks
  
  MC

  Reply

• jumpstart Master

  Posted on Jan 5, 2012 (permalink)

  David:
  
  Unless I misunderstand your requirement, there's a simpler solution where you can force a RadListBox to display integral scrolling. See the Scrollbars in radlistbox forum thread for insights.
  
  Hope this helps!

  Reply


• Ivana Ivana

  Posted on Jan 6, 2012 (permalink)

  Hi,
  
  Could you paste the markup code here or provide us with a live URL to your page?
  
  Meanwhile, you could refer to the client API article of the RadListBox, to learn how to manipulate the client object of the control.
  
  Kind regards,
  Ivana
  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

  Reply

• David

  Posted on Jan 6, 2012 (permalink)

  Hi,
  thanks for your response.  The listbox is scrollable now but the direction that I was given was to also have 2 buttons on top of the listbox:
  1.  ScrollDown
  2. ScrollUp
  
  as their names suggest these would allow the user to scroll up or down.
  thanks
  
  Dave

  Reply

• jumpstart Master

  Posted on Jan 6, 2012 (permalink)

  David:
  
  Can you send a screenshot of the current application with your updated code? This would help to better understand what needs to be done.
  
  Regards,
  

  Reply

• David

  Posted on Jan 6, 2012 (permalink)

  sure, here is the javascript, I have tried both using the "view code" version of the control  name (seen below) and the actual control name as displayed in the html at the bottom of this post.
  
  I have attached a screenshot of the listbox and the ScrollUp and ScrollDown button to give you a visual.  The area with the checkboxes is the listbox (I had to remove the text inside the listbox from the attachment to protect sensitive data).  But essentially when the user clicks on the buttons it should perform the actions described.
  
  To summarize, I want the up and down buttons shown below to scroll the ListBox up and down. 
  I'm trying to format the code below so its readable
  

  var zxcTO;

   

  function ScrollUp() {

      var obj = document.getElementById("ctl00_MainContent_ListBoxProducts");

      obj.scrollTop = obj.scrollTop + -1;

   

       zxcTO = setTimeout(function () { ScrollUp(); }, 10);

  }

   

  function ScrollDown() {

      //var obj = document.getElementById("ctl00_MainContent_ListBoxProducts");

      var obj;

      obj = document.getElementById("ctl00_MainContent_ListBoxProducts");

      obj.scrollTop = obj.scrollTop + 1;

   

      zxcTO = setTimeout(function () { ScrollDown(); }, 10);

  }

  
  and the controls:
  
  

        <telerik:RadAjaxPanel ID="RadAjaxPanelProducts"
            runat="server"
            Width="200px"

      BorderColor="White" BorderStyle="Solid" BorderWidth="2px"

      HorizontalAlign="Left" Wrap="True"
           style="text-align:left;">

      Products

                      

    

                      

  <input type="button" id="cmdscrolldown" value="Scroll Down"
         onclick="ScrollDown();"

  onmouseup="clearTimeout(zxcTO);"

  style="font-size: 11px; width: 72px" size=""/>

           

  <input type="button" id="cmdScrollUp" value="Scroll Up"
         onclick="ScrollUp();" onmouseup="clearTimeout(zxcTO);"

   style="font-size: 11px; width: 65px"/>

                       

     

  <br />
<table cellpadding="0" cellspacing="0" border="0">

   <tr><td width="102px"></td>

     <td width="20px">N</td>

        <td width="20px">L</td>

        <td width="20px">M</td>

      <td>R</td></tr>

  </table>

   

                 

  <telerik:radlistbox ID="ListBoxProducts"

  runat="server" DataSourceID="SqlDataSourceProducts"
Width="190px" DataValueField="ProductID" Height="335px"
          AutoPostBack="true"

  TabIndex="6" style="top: 0px; left: 0px;">

                               

   <ItemTemplate> 

                                   

   <table cellpadding="0" cellspacing="0" >
<tr>

   <td style="font-weight:normal; font-size:11px;" width="110px">
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Eval("FullName") %>' CssClass="listName">
                </asp:Label>
                </td>

   <td style="background-color:#ffff80">
                  <asp:CheckBox ID="checkbox1" runat="server" Enabled="false" />
               </td>

  
</tr>

   </table>

  </ItemTemplate> 

    </telerik:radlistbox>

  </telerik:RadAjaxPanel>

  Attached files

  • ScrollListbox.GIF

  Reply

• Ivana Ivana

  Posted on Jan 11, 2012 (permalink)

  Hello David,
  
  Try the following:
  

  function ScrollUp() {

      var scrollDiv = $telerik.$(".rlbGroup");

      var scrollTop = scrollDiv.scrollTop();

      scrollDiv.scrollTop(scrollTop - 10);

  }

   

  function ScrollDown() {

      var scrollDiv = $telerik.$(".rlbGroup");

      var scrollTop = scrollDiv.scrollTop();

      scrollDiv.scrollTop(scrollTop + 10);

  }

  <telerik:RadAjaxPanel ID="RadAjaxPanelProducts" runat="server" Width="200px" BorderColor="White"

      BorderStyle="Solid" BorderWidth="2px" HorizontalAlign="Left" Wrap="True" Style="text-align: left;">

      Products

      <input type="button" id="cmdscrolldown" value="Scroll Down" onclick="ScrollDown();"

          style="font-size: 11px; width: 72px" size="" />

      <input type="button" id="cmdScrollUp" value="Scroll Up" onclick="ScrollUp();" style="font-size: 11px;

          width: 65px" />

      <br />

      <table cellpadding="0" cellspacing="0" border="0">

          <tr>

              <td width="102px">

              </td>

              <td width="20px">

                  N

              </td>

              <td width="20px">

                  L

              </td>

              <td width="20px">

                  M

              </td>

              <td>

                  R

              </td>

          </tr>

      </table>

      <telerik:RadListBox ID="ListBoxProducts" runat="server" DataSourceID="SqlDataSourceProducts"

          Width="190px" DataValueField="ProductID" Height="335px" AutoPostBack="true"

          TabIndex="6" Style="top: 0px; left: 0px;">

      </telerik:RadListBox>

  </telerik:RadAjaxPanel>

  
  I hope this helps.
  
  Regards,
  Ivana
  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

  Reply

• David

  Posted on Jan 11, 2012 (permalink)

  thanks for the response.
  what is ".rlbGroup", I assume that is the name of the listbox?
  
  I changed to the name of my radlistbox and it still does not work.
  The syntax used in the api, EX:
  
  

  var listbox = $find("<%= RadListBox1.ClientID %>");

  
  
  when I change the RadListBox1 with the name of my RAdListbox control I get an error:
  <ERROR>
  

  The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

  
  </ERROR>
  I'm googling this now and found to keep the javascript out of the <head> tag, my javascript is not in the head tag, it is near the bottom of the page, in fact, just before the closing content tag (</asp:Content>)

  Reply

• Ivana Ivana

  Posted on Jan 16, 2012 (permalink)

  Hi David,
  
  "rlbGroup" is a class name of the div element containing the items of RadListBox -- which is the element that needs to be scrolled in order to obtain the desired functionality. This is a consisting element of the RadListBox control.
  
  As for the error, try to put the script block in a telerik:RadCodeBlock control.
  

  <telerik:RadCodeBlock runat="server">

    <script type="text/javascript" language="javascript">

       //The client code goes here.

  </script>

  </telerik:RadCodeBlock>

  
  More information could be found at: (http://www.telerik.com/help/aspnet-ajax/ajax-radscriptblock-radcodeblock.html).
  
  All the best,
  Ivana
  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

  Reply

• Aruna

  Posted 10 hours ago (permalink)

  Hi Telerik team 
  
  i was trying to test your  
  
  Load on Demand List box using Selenium Webdriver
  
  what is the java script to scroll the scroll bar of the list box( not the page scroll bar)?
  
  Thanks
  Aruna

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > ListBox > scroll listbox with buttons