Filtering RadListBox in Load on Demand scenarios

1 posts, 0 answers
  1. Ivan
    Ivan avatar
    2 posts
    Member since:
    Jun 2014

    Posted 03 Sep 2015 Link to this post

    Requirements

    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#​



    PROJECT DESCRIPTION 
    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">
        <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>

    Code-behind:

    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();
        }
    }

Back to Top