Scroll to selected item on page load

[Andre]

Hello,

I saw my problem has already been explained in others threads, but I can't resolve it.

Here it is:

Server side:
- I use a datasource to populate my listbox, and I select an item

Client side:
- I want to scroll to my selected item with te code below:

<

 

body >

 

 

<form id="form1" runat="server">  

 

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

 

</asp:ScriptManager>

 

 

<script type="text/javascript"> 

 

function 

 

scrollToSelected(sender, args)
{

 

 

        var item = sender.get_selectedItem();  

 

        if (item)

        {  

 

            item.ensureVisible(); 

 

            sender.clearSelection();  

 

        }  

 

}

 

</script>  

 

<div>...

 

and in my listbox definition I add

 

 

OnClientLoad

 

="scrollToSelected"

 

 

This works only when I refresh my page, but it doesn't work the first time. I tried with OnSelectedIndexChanged, but it doesn't work anymore.

Coul do help me please?
Best regards,

André

[Helen]

Hello Andre,

See the code below which works at our side:

<telerik:RadListBox ID="RadListBox1" runat="server" Width="150px"
    Height="100px">
    <Items>
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem8" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem9" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem10" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem11" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem12" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem13" Selected="true"/>
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem14" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem15" />
    </Items>
</telerik:RadListBox>
<script type="text/javascript">
    function pageLoad() {
    var list = $find("<%=RadListBox1.ClientID %>");
    var item = list.get_selectedItem();
    item.scrollIntoView();
    }
</script>

Regards,
Helen
the Telerik team

[Andre]

Hello,

Thank you for your answer.

The code like you gave it to me works perfectly. But I found when there is a problem: if the page is in a radwindow.  Have you an idea to fix it?

Thank you again!

Best regards

André

[Helen]

Hi Andre,

Please execute the javascript code on the OnClientShow client-side event of the RadWindow:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true">
<Windows>
<telerik:RadWindow ID="RadWindow1" runat="server" ShowContentDuringLoad="false" Width="400px"
Height="400px" Title="Telerik RadWindow" Behaviors="Default" VisibleOnPageLoad="true" OnClientShow="show">
<ContentTemplate>
<telerik:RadListBox ID="RadListBox1" runat="server" Width="150px" Height="100px">
<Items>
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem1" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem2" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem3" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem4" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem5" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem6" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem7" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem8" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem9" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem10" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem11" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem12" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem13" Selected="true" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem14" />
    <telerik:RadListBoxItem runat="server" Text="RadListBoxItem15" />
</Items>
</telerik:RadListBox>
</ContentTemplate>
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>

<script type="text/javascript">
function show() {

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

    var item = list.get_selectedItem();
    item.scrollIntoView();
}
</script>

Greetings,
Helen
the Telerik team

[Andre]

Hello,

your code works again, but if I define the radwindow with a NavigateUrl and put the listbox in another page like I would, I can't use it. And in another page, it doesn't work. Have you another idea please?

Thank you very much!

Best regards,

André

[Helen]

Hello Andre,

Since we are not sure about the exact your scenario, could you please open a support ticket and send us a project which demonstrates the issue to examine it locally?

Greetings,
Helen
the Telerik team