Firing Javascript after RadSearchBox OnSearch event

[Captain America]

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

 

 

[Captain America]

No one help ?

Thanks for anyone here to help

[Anton]

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

[Captain America]

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>

 

[Anton]

Hello,

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

Regards,
Anton
Telerik by Progress