Firing Javascript after RadSearchBox OnSearch event

5 posts, 0 answers
  1. Captain America
    Captain America avatar
    5 posts
    Member since:
    Mar 2012

    Posted 28 Aug Link to this post

    Hi Telerik support

    I want my radlistbox scoll to selected item as code bellow

    I test this  code , it was working fire when i click the btnRefresh, pls tell me how to force the radlistbox scroll to selected item after searching finish on RadSearchBox RadIPSearch, after searching, the radlistbox will select the item found, but i want to scroll to it also

    Thanks very much

     

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false"></telerik:RadScriptManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

      <div>
                         <telerik:RadSearchBox ID="RadIPSearch" runat="server"
                                EmptyMessage="Search..." Width="135" OnSearch="RadIPSearch_Search">
                                <DropDownSettings Height="400" Width="200" />
                            </telerik:RadSearchBox>


                            <telerik:RadButton ID="btnRefresh" runat="server" Text="Refresh"
                                OnClientClicked="OnClientClicked"
                                ButtonType="SkinnedButton" AutoPostBack="false" OnClick="btnRefresh_Click">
                            </telerik:RadButton>
                        </div>

                        <div>
                            <telerik:RadListBox ID="lstIPAddress" runat="server"
                                Height="510px" Width="200px" AutoPostBack="True"
                                OnSelectedIndexChanged="lstIPAddress_SelectedIndexChanged">
                                <ButtonSettings TransferButtons="All" />
                            </telerik:RadListBox>
                        </div>

     <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

                    <script type="text/javascript">
                        function OnClientClicked(sender, args) {
                            var listbox = $find("<%=lstIPAddress.ClientID %>");
                            listbox.get_selectedItem().scrollIntoView();
                        }
                    </script>
                </telerik:RadCodeBlock>
        </telerik:RadAjaxPanel>
        </telerik:RadAjaxPanel>

     

     

     protected void RadIPSearch_Search(object sender, SearchBoxEventArgs e)
            {

                if (lstIPAddress.Items.Select(x => x.Text).ToList().Contains(e.Text))
                {
                    lstIPAddress.SelectedIndex = lstIPAddress.Items.Where(x => x.Text == e.Text).FirstOrDefault().Index;

                    // how to fire radlistbox to scroll to selected item here
                }
           
            }

     

     

  2. Captain America
    Captain America avatar
    5 posts
    Member since:
    Mar 2012

    Posted 11 Sep Link to this post

    No one help ?

    Thanks for anyone here to help

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Anton
    Admin
    Anton avatar
    61 posts

    Posted 14 Sep Link to this post

    Hi,

    Such scroll into view is supported only from the client-side by using the scrollIntoView function of the RadListBoxItem. As you are using RadAjaxPanel​​, you can take advantage of the ClientEvents-OnResponseEnd​:

    <script type="text/javascript">
                            function onResponseEnd(sender, args)
                                var listbox = $find("<%=RadListBox1.ClientID %>");
                                var item = listbox.get_selectedItem();
     
                                item.scrollIntoView();
                            }
                        </script>

    Regards,
    Anton
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  5. Captain America
    Captain America avatar
    5 posts
    Member since:
    Mar 2012

    Posted 14 Sep in reply to Anton Link to this post

    hi, i modify the code as bellow then the page seem hang, radsearchbox not work anymore, idk why.. !

     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1" ClientEvents-OnResponseEnd="onResponseEnd">

     

    ......

       <script type="text/javascript">
                    function onResponseEnd(sender, args)
                        var listbox = $find("<%=lstIPAddress.ClientID %>");
                            var item = listbox.get_selectedItem();
     
                            item.scrollIntoView();
                        }
                </script>

            </telerik:RadCodeBlock>

        </telerik:RadAjaxPanel>

     

  6. Anton
    Admin
    Anton avatar
    61 posts

    Posted 15 Sep Link to this post

    Hello,

    I'm sending you a sample web page working at my side.

    Regards,
    Anton
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017