scroll listbox with buttons

11 posts, 0 answers
  1. David
    David avatar
    4 posts
    Member since:
    Jan 2012

    Posted 05 Jan 2012 Link to this post

    • 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

  2. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 05 Jan 2012 Link to this post

    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!
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 06 Jan 2012 Link to this post

    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
  5. David
    David avatar
    4 posts
    Member since:
    Jan 2012

    Posted 06 Jan 2012 Link to this post

    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
  6. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 06 Jan 2012 Link to this post

    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,
  7. David
    David avatar
    4 posts
    Member since:
    Jan 2012

    Posted 06 Jan 2012 Link to this post

    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>
  8. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 11 Jan 2012 Link to this post

    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
  9. David
    David avatar
    4 posts
    Member since:
    Jan 2012

    Posted 11 Jan 2012 Link to this post

    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>)
  10. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 16 Jan 2012 Link to this post

    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
  11. Aruna
    Aruna avatar
    2 posts
    Member since:
    Aug 2011

    Posted 23 May 2012 Link to this post

    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
  12. Ivana
    Admin
    Ivana avatar
    657 posts

    Posted 28 May 2012 Link to this post

    Hello Aruna,

    Take a look at the RadListBox online documentation: http://www.telerik.com/help/aspnet-ajax/listbox-scroll-items-horizontally.html.

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017