Scroll to selected item on page load

6 posts, 0 answers
  1. Andre
    Andre avatar
    11 posts
    Member since:
    Oct 2010

    Posted 08 Jun 2011 Link to this post

    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é

  2. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 09 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Andre
    Andre avatar
    11 posts
    Member since:
    Oct 2010

    Posted 10 Jun 2011 Link to this post

    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é
  5. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 10 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Andre
    Andre avatar
    11 posts
    Member since:
    Oct 2010

    Posted 10 Jun 2011 Link to this post

    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é
  7. Helen
    Admin
    Helen avatar
    1052 posts

    Posted 13 Jun 2011 Link to this post

    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

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017