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
No comments:
Post a Comment