Callback Combo on Scroll down

You can grab the external JavaScript file representing the jQuery library need for this sample from either of these URLs  – 
http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

You have to create two folders as images : to hold the images 1.)dropdown_arrow.gif  2.) spinner.gif and the second folder will be as js : to hold the jquery file.

Onto the code …


CallbackAsyncHandler.ashx : It has all logics to fetch records from database on the bahalf of parameters defined on user control.  It receives all parameter using query string.

<%@ WebHandler Language=”VB” Class=”CallbackAsyncHandler” %>


Imports System.Web
Imports System.Text
Imports System.Data
Imports System.Data.SqlClient


Public Class CallbackAsyncHandler
Implements IHttpHandler


Public Sub ProcessRequest(context As HttpContext) Implements IHttpHandler.ProcessRequest
        Dim Condition As String = Convert.ToString(context.Request.QueryString(“Condition”)).Replace(“#”, “+”)
        Dim CCondition As String = Convert.ToString(context.Request.QueryString(“CCondition”)).Replace(“#”, “+”)
        Dim ValueField As String = Convert.ToString(context.Request.QueryString(“ValueField”)).Replace(“#”, “+”)
        Dim TextField As String = Convert.ToString(context.Request.QueryString(“TextField”)).Replace(“#”, “+”)
        Dim TableName As String = Convert.ToString(context.Request.QueryString(“TableName”)).Replace(“#”, “+”)
        Dim BunchSize As Integer = Convert.ToString(context.Request.QueryString(“BunchSize”)).Replace(“#”, “+”)
        Dim OrderBy As String = Convert.ToString(context.Request.QueryString(“OrderBy”)).Replace(“#”, “+”)
        
        If OrderBy = 1 Then
            OrderBy = ValueField
        Else
            OrderBy = TextField
        End If


        context.Response.Write(PrepareDataSet(Condition, ValueField, TextField, TableName, BunchSize, CCondition, OrderBy))
End Sub


    Private Function PrepareDataSet(ByVal Condition As String, ByVal ValueField As String, ByVal TextField As String, _
                                    ByVal TableName As String, ByVal BunchSize As Integer, ByVal CCondition As String, ByVal OrderBy As String) As String
        
        ‘New SqlConnection(“Data Source=pankajpareek;Initial Catalog=T480;User ID=sa;Password=redtray”)
        Dim conn As System.Data.SqlClient.SqlConnection = New SqlConnection(System.Configuration.ConfigurationManager.AppSettings(“connection”))
        Dim strSql As String = “Select TOP ” & BunchSize & ” ” & ValueField & “,” _
                            & TextField & ” From ” & TableName & ” Where 1=1 ” & CCondition & Condition & ” Order by ” & OrderBy
        Dim da As SqlDataAdapter = New System.Data.SqlClient.SqlDataAdapter(strSql, conn)
        Dim dt As New DataTable
        da.Fill(dt)


        Return BuildRows(dt)
    End Function


Private Function BuildRows(dt As System.Data.DataTable) As String
Dim sb As New StringBuilder()
Dim dr As System.Data.DataRow
If dt.Rows.Count > 0 Then
For i As Integer = 0 To dt.Rows.Count – 1
sb.Append(“<tr class=’mouseOut’ onmouseover=’mouseOver(this)’ onmouseout=’mouseOut(this)’ onclick=’Select(this)’ ctype=’CallbackCombo’>”)
dr = dt.Rows(i)
For j As Integer = 0 To dt.Columns.Count – 1
If j = 0 Then
sb.Append(“<td class=’displayNone’>” & Convert.ToString(dr(j)) & “</td>”)
Else
sb.Append(“<td>” & Convert.ToString(dr(j)) & “</td>”)
End If
Next
sb.Append(“</tr>”)
Next
End If
Return sb.ToString()
End Function


Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property
End Class

CallbackCombo.ascx : It keeps all the design & javacript logic. On Vb side it has all property & variables used to define Callback Combo dynamically.

Design View

<%@ Control Language=”VB” AutoEventWireup=”false” CodeFile=”CallbackCombo.ascx.vb”
    Inherits=”CallbackCombo_CallbackCombo” %>
<asp:Literal ID=”Literal1″ runat=”server”>
</asp:Literal>


<script type=”text/javascript”>
        var prev = 0;
        var ValueField=”<%=ValueField %>”;
        var TextField=”<%=TextField %>”;
        var TableName=”<%=TableName %>”;
        var BunchSize=”<%=BunchSize %>”;
        var OrderBy=”<%=OrderBy %>”;
        var CCondition=”<%=Condition %>”;
        var FolderPath=”<%=FolderPath %>”;
        var DefaultText=”<%=DefaultText %>”;
        var DefaultValue=”<%=DefaultValue %>”;
        
        $(document).ready(
            function() 
            {
                $(“.divProgress”).hide();
                $(“#ImgDropDown”).attr(“src”, FolderPath + “/images/dropdown_arrow.gif”);
                $(“#imgProgress”).attr(“src”, FolderPath + “/images/spinner.gif”);
                
                $(document).click
                (
                    function()
                    {
                        var obj=window.event.srcElement;
                        if($(obj).attr(“ctype”)!=”CallbackCombo”)
                        {
                            ComboListShow=0;
                            $(“#divList”).slideUp(“fast”);
                        }                       
                    }
                )


                $(“#divList”).scroll
                (
                    function() 
                    {
                        if ($(“#tblList”)[0].clientHeight – this.scrollTop == $(this)[0].clientHeight) 
                        {
                            var LastId = $(“#tblList tr:last”).children(“td:first”).html();
                            var trLast = $(“#tblList tr:last”);
                            if (parseInt(LastId, 10) > parseInt(prev, 10)) 
                            {
                                prev = LastId;
                                appendData(” And ” + TextField + ” like ‘” + $(“#” + “<%=txtInput.ClientId %>”).val() + “%’ And ” + ValueField + “>” + LastId);
                            }
                        }
                    }
                );
            }
        );
        function appendData(condition)
        {
            $(“.divProgress”).ajaxStart(function() {
                 $(this).show();
            });
             $(“.divProgress”).ajaxStop(function() {
                 $(this).hide();
            });
            $.post(FolderPath + “/CallbackAsyncHandler.ashx?ValueField=” + escape(ValueField) + “&TextField=” + escape(TextField) + “&TableName=” + escape(TableName)
                                            + “&BunchSize=” + escape(BunchSize) + “&CCondition=” + escape(CCondition) + “&OrderBy=” + escape(OrderBy) 
                                            + “&Condition=” + escape(condition), function(data) {
                 if (data != null && data!=””) 
                 {
                    if($(‘#tblList tr’).length<=0 && DefaultText!=””)
                    {
                        var Temp=”<tr class=’mouseOut’ onmouseover=’mouseOver(this)’ onmouseout=’mouseOut(this)’ onclick=’Select(this)’ ctype=’CallbackCombo’>”;
                        if(DefaultValue!=””)
                        {
                            Temp=Temp + “<td class=’displayNone’>” + DefaultValue + “</td>”
                        }
                        else
                        {
                            Temp=Temp + “<td class=’displayNone’>” + DefaultText + “</td>”
                        }
                        Temp=Temp + “<td>” + DefaultText +  “</td>”;
                        Temp=Temp + “</tr>”
                        $(“#tblList”).append(Temp);
                    }
                    $(“#tblList”).append(data);
                }
            });
        }
</script>


<script type=”text/javascript”>
        var ComboListShow=0;
        function ShowList()
        {
            if(ComboListShow==1)
            {
                ComboListShow=0;
                $(“#divList”).slideUp(“fast”);
            }
            else
            {
                var UserIdLast = 0;                
                if($(‘#tblList tr’).length<=0)
                {
                    appendData(” And ” + TextField + ” like ‘” + $(“#” + “<%=txtInput.ClientId %>”).val() + “%’ And ” + ValueField + “>0”);
                }
                $(“#divList”).slideDown(“fast”);
                if ($(“#tblList tr.trselect”).length>0)
                {
                    //$(“#divList”).animate({ scrollTop: $(“#tblList tr.trselect”)[0].offsetTop-(14*17) }, “slow”)
                    $(“#divList”).scrollTop($(“#tblList tr.trselect”)[0].offsetTop-(14*17))
                }
                ComboListShow=1;
            }
        }
        function filter()
        {
            prev=0;
            $(“#tblList tr”).remove();
            $(“#” + “<%=hdnValue.ClientId %>”).val(‘0’);
            appendData(” And ” + TextField + ” like ‘” + $(“#” + “<%=txtInput.ClientId %>”).val() + “%’ And ” + ValueField + “>0”);
            $(“#divList”).slideDown(“fast”);
            ComboListShow=1;
        }
        function RemoveCallbackComboRow()
        {
            $(“#tblList tr”).remove();
            $(“#” + “<%=txtInput.ClientId %>”).val(”);
            $(“#” + “<%=hdnValue.ClientId %>”).val(‘0’);
        }
</script>


<style type=”text/css”>
    .dvInput
    {
        border: solid 1px #8AA8FF;
        width: 200px;
        height: 20px;
    }
    .ImgDropDown
    {
        vertical-align: middle;
        width: 13px;
        height: 13px;
        float: right;
        margin-top: 3px;
        cursor: pointer;
    }
    .txtInput
    {
        width: 185px;
        border: none 0px #8AA8FF;
        height: 18px;
    }
    .divList
    {
        height: 200px;
        border: solid 1px #8AA8FF;
        border-top: solid 0px #8AA8FF;
        width: 200px;
        text-align: left;
        overflow-y: auto;
        overflow-x: auto;
    }
    .displayNone
    {
        display: none;
    }
    .divProgress
    {
        width: 100%; /*background-color: red;
            color: white;*/
    }
    .trmouseOver
    {
        background-color: Blue;
        color: White;
    }
    .trmouseOut
    {
        background-color: White;
        color: Black;
    }
    .trselect
    {
        background-color: Blue;
        color: White;
    }
</style>


<script type=”text/javascript” language=”javascript”>
        function mouseOver(Row)
        {
            $(“#tblList tr.trmouseOver”).removeClass(“trmouseOver”).addClass(“trmouseOut”);
            $(Row).removeClass(“trmouseOut”).addClass(“trmouseOver”);
        }
        function mouseOut(Row)
        {
            $(Row).removeClass(“trmouseOver”).addClass(“trmouseOut”);
        }
        function Select(Row)
        {
            $(“#” + “<%=txtInput.ClientId %>”).val($(Row).children(“td:last”).html());
            $(“#” + “<%=hdnValue.ClientId %>”).val($(Row).children(“td:first”).html());
            $(“#tblList tr”).removeClass(“trselect”).addClass(“trmouseOut”);
            $(Row).removeClass(“trmouseOut”).removeClass(“trmouseOver”).addClass(“trselect”);
        }
</script>


<div id=”CallbackCombo” runat=”server” style=”width: auto; height: auto;”>
    <div id=”dvInput” class=”dvInput” ctype=’CallbackCombo’>
        <img id=”ImgDropDown” alt=”” src=”images/dropdown_arrow.gif” class=”ImgDropDown”
            onclick=”ShowList()” ctype=’CallbackCombo’ />
        <asp:TextBox ID=”txtInput” runat=”server” CssClass=”txtInput” ctype=’CallbackCombo’
            onkeyup=”filter()”></asp:TextBox>
        <asp:HiddenField ID=”hdnValue” runat=”server” />
    </div>
    <div class=”divList” id=”divList” style=”display: none; position: absolute; z-index: 1000;
        background-color: White;” ctype=’CallbackCombo’>
        <table id=”tblList” style=”width: 90%; font-family: Arial; font-size: 12px;” ctype=’CallbackCombo’>
        </table>
        <div id=”loading” class=”divProgress” style=”width: 100%”>
            <center>
                <img src=”images/spinner.gif” id=”imgProgress” border=”0″></center>
        </div>
    </div>
</div>

Code View : 
Partial Class CallbackCombo_CallbackCombo
    Inherits System.Web.UI.UserControl


    Private _ValueField As String
    Private _TextField As String
    Private _TableName As String
    Private _BunchSize As Integer
    Private _FolderPath As String
    Private _Condition As String
    Private _OrderBy As OrderByType
    Private _DefaultText As String
    Private _DefaultValue As String


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Literal1.Text = “<script src='” & FolderPath & “/js/jquery-1.2.6.min.js’ type=’text/javascript’></script>”
    End Sub


    Public Property DefaultValue() As String
        Get
            Return _DefaultValue
        End Get
        Set(ByVal value As String)
            _DefaultValue = value
        End Set
    End Property


    Public Property DefaultText() As String
        Get
            Return _DefaultText
        End Get
        Set(ByVal value As String)
            _DefaultText = value
        End Set
    End Property


    Public Property ValueField() As String
        Get
            Return _ValueField
        End Get
        Set(ByVal value As String)
            _ValueField = value
        End Set
    End Property


    Public Property TextField() As String
        Get
            Return _TextField
        End Get
        Set(ByVal value As String)
            _TextField = value
        End Set
    End Property


    Public Property TableName() As String
        Get
            Return _TableName
        End Get
        Set(ByVal value As String)
            _TableName = value
        End Set
    End Property


    Public Property BunchSize() As Integer
        Get
            Return _BunchSize
        End Get
        Set(ByVal value As Integer)
            _BunchSize = value
        End Set
    End Property


    Public Property FolderPath() As String
        Get
            Return _FolderPath
        End Get
        Set(ByVal value As String)
            _FolderPath = value
        End Set
    End Property


    Public Property OrderBy() As OrderByType
        Get
            Return _OrderBy
        End Get
        Set(ByVal value As OrderByType)
            _OrderBy = value
        End Set
    End Property


    Public Property Condition() As String
        Get
            Return _Condition
        End Get
        Set(ByVal value As String)
            _Condition = value
        End Set
    End Property


    Public ReadOnly Property SelectedText() As String
        Get
            Return txtInput.Text
        End Get
    End Property


    Public ReadOnly Property SelectedValue() As String
        Get
            Return hdnValue.Value
        End Get
    End Property


    Public Enum OrderByType
        TextField = 0
        ValueField = 1
    End Enum


End Class

References : 
Load Content While Scrolling With jQuery
Implementing infinite scrolling with jQuery


Leave a Reply

Your email address will not be published. Required fields are marked *