<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LOD.aspx.cs" Inherits="ListBox_LOD" %>
<!DOCTYPE html>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" ScriptMode="Release" OutputCompression="Forced" />
<telerik:RadAjaxManager ID="RadAjaxManagerStaff" runat="server" EnableViewState="true">
<ClientEvents OnResponseEnd="StaffResponseEnd" />
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="txtStaffName">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="hdnStaffResponse" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<asp:TextBox ID="txtStaffName" runat="server" OnTextChanged="txtStaffName_TextChanged" onkeyup="txtStaffName_OnKeyUp(this);"></asp:TextBox>
<asp:HiddenField id="hdnStaffResponse" runat="server" />
<telerik:RadListBox Skin="Vista" runat="server" ID="RadListBoxStaffSource" Sort="Ascending" TabIndex="1"
Height="200px" Width="300px" AllowReorder="false"
AllowDelete="false" SelectionMode="Multiple" AllowTransferDuplicates="false" EnableLoadOnDemand="true" DataSourceID="SqlDataSource1" DataKeyField="ProductID"
DataTextField="ProductName" DataValueField="ProductID">
</telerik:RadListBox>
<telerik:RadCodeBlock ID="CodeBlock" runat="server">
<script type="text/javascript">
function txtStaffName_OnKeyUp(sender) {
var ajax = $find("<% =RadAjaxManagerStaff.ClientID %>");
ajax.ajaxRequestWithTarget("<% =txtStaffName.ClientID %>", '');
}
function StaffResponseEnd(sender, eventArgs) {
var listBox = $find("<% =RadListBoxStaffSource.ClientID %>");
var response = document.getElementById("<%= hdnStaffResponse.ClientID %>");
var itemIndex = response.value;
var pager = listBox._pager;
var pageIndex = Math.floor(itemIndex / pager.get_pagerData().pageSize);
var item = listBox.get_items().getItem(itemIndex);
listBox.clearSelection();
if (item) {
item.scrollIntoView();
item.set_selected(true);
return;
}
var handler = function() {
item = listBox.get_items().getItem(itemIndex);
setTimeout(function() {
item.scrollIntoView();
item.set_selected(true);
}, 10);
listBox.remove_itemsRequested(handler);
};
listBox.add_itemsRequested(handler);
pager.load(pageIndex);
}
</script>
</telerik:RadCodeBlock>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
ProviderName="System.Data.SqlClient"
SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] ORDER By ProductName"></asp:SqlDataSource>
</div>
</form>
</body>
</html>