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

scroll listbox with buttons

10 Answers 172 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
David asked on 05 Jan 2012, 07:31 PM
  • 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

10 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 05 Jan 2012, 11:53 PM
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!
0
Ivana
Telerik team
answered on 06 Jan 2012, 02:23 PM
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
0
David
Top achievements
Rank 1
answered on 06 Jan 2012, 03:33 PM
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
0
Richard
Top achievements
Rank 1
answered on 06 Jan 2012, 07:21 PM
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,
0
David
Top achievements
Rank 1
answered on 07 Jan 2012, 12:30 AM
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>
0
Ivana
Telerik team
answered on 11 Jan 2012, 02:01 PM
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
0
David
Top achievements
Rank 1
answered on 12 Jan 2012, 12:04 AM
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>)
0
Ivana
Telerik team
answered on 16 Jan 2012, 04:37 PM
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
0
Aruna
Top achievements
Rank 1
answered on 24 May 2012, 01:47 AM
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
0
Ivana
Telerik team
answered on 28 May 2012, 02:35 PM
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.
Tags
ListBox
Asked by
David
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Ivana
Telerik team
David
Top achievements
Rank 1
Aruna
Top achievements
Rank 1
Share this question
or