Filtering RadListBox in Load on Demand scenarios

Thread is closed for posting
3 posts, 0 answers
  1. 19FB4BF5-3435-4EE8-A7FD-7A77627DE532
    19FB4BF5-3435-4EE8-A7FD-7A77627DE532 avatar
    2 posts
    Member since:
    Jun 2014

    Posted 03 Sep 2015 Link to this post


    Telerik Product and Version

    UI for ASP.NET AJAX 2015 Q3​

    Supported Browsers and Platforms

    Components/Widgets used (JS frameworks, etc.)

    .NET 3.5/4.0/4.5  C#​

    This sample demonstrates how ​you can filter the RadListBox when it is loaded on demand.The ListBox is bound to the Northwind database (not included in the attached .zip).

     Markup and Javascript:

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LOD.aspx.cs" Inherits="ListBox_LOD" %>
    <!DOCTYPE html>
    <head id="Head1" runat="server">
        <form id="form1" runat="server">
            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" ScriptMode="Release" OutputCompression="Forced" />
            <telerik:RadAjaxManager ID="RadAjaxManagerStaff" runat="server" EnableViewState="true">
            <ClientEvents OnResponseEnd="StaffResponseEnd" />
                <telerik:AjaxSetting AjaxControlID="txtStaffName">
                        <telerik:AjaxUpdatedControl ControlID="hdnStaffResponse" />
            <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: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);
                    if (item) {
                    var handler = function() {
                        item = listBox.get_items().getItem(itemIndex);
                        setTimeout(function() {
                        }, 10);
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                SelectCommand="SELECT [ProductID], [ProductName] FROM [Products] ORDER By ProductName"></asp:SqlDataSource>


    using System;
    using System.Collections.Generic;
    using System.Data;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    public partial class ListBox_LOD : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
        protected void txtStaffName_TextChanged(object sender, EventArgs e)
            DataSourceSelectArguments sa = new DataSourceSelectArguments();
            DataView SourceStaff = (DataView)this.SqlDataSource1.Select(sa);
            DataTable table = SourceStaff.ToTable();
            DataRow[] dr = table.Select("ProductName like '" + txtStaffName.Text + "%'");
            hdnStaffResponse.Value = table.Rows.IndexOf(dr[0]).ToString();

  2. rishi mathur
    rishi mathur avatar
    4 posts
    Member since:
    Feb 2016

    Posted 14 Nov 2019 in reply to 19FB4BF5-3435-4EE8-A7FD-7A77627DE532 Link to this post

    Your approach is good but i have a scenario in which i want to perform search but this textchange event will not help because in textchange event works when user change focus from that textbox to another which means user first finish typing then press enter than search will be performed.
    I want to perform search simultaneously as the user type for large number of records.

    Please suggest some solution
  3. 73AB4FDB-9F60-4E95-94E8-05C89D609656
    73AB4FDB-9F60-4E95-94E8-05C89D609656 avatar
    912 posts
    Member since:
    Apr 2022

    Posted 19 Nov 2019 Link to this post

    Hello Rishi,

    The event that is used in the snippet of the original post is the KEYUP, which is triggered without pressing enter or losing focus.

    <asp:TextBox ID="txtStaffName" runat="server" OnTextChanged="txtStaffName_TextChanged" onkeyup="txtStaffName_OnKeyUp(this);"></asp:TextBox>

    function txtStaffName_OnKeyUp(sender) {
          var ajax = $find("<% =RadAjaxManagerStaff.ClientID %>");
         ajax.ajaxRequestWithTarget("<% =txtStaffName.ClientID %>", '');

    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.