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

scroll listbox with buttons

10 Answers 266 Views

ListBox

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

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

answered on 07 Jan 2012, 12:30 AM

ScrollListbox.GIF

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>

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

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>)

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