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 2016 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 2016 Link to this post

    No one help ?

    Thanks for anyone here to help

  3. Anton
    Admin
    Anton avatar
    81 posts

    Posted 14 Sep 2016 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.
  4. Captain America
    Captain America avatar
    5 posts
    Member since:
    Mar 2012

    Posted 14 Sep 2016 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>

     

  5. Anton
    Admin
    Anton avatar
    81 posts

    Posted 15 Sep 2016 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