User1856827690 posted
Hi Yijing Sun,
Thank you for your response,
Please find the sample code block below:
1. First we are making the ajax call to our usercontrol where the grid is present:
<script type="text/javascript">
var pageIndex = 1;
var pageCount;
$(function () {
//Remove the original GridView header
$("[id$=EmpGrid] tr").eq(0).remove();
});
//Load GridView Rows when DIV is scrolled
$("#dvGrid").on("scroll", function (e) {
var $o = $(e.currentTarget);
if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) {
GetRecords();
}
});
//Function to make AJAX call to the Web Method
function GetRecords() {
pageIndex++;
if (pageIndex == 2 || pageIndex <= pageCount) {
//Show Loader
if ($("[id$=EmpGrid] .loader").length == 0) {
var row = $("[id$=EmpGrid] tr").eq(0).clone(true);
row.addClass("loader");
row.children().remove();
row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" src="103.gif" /></td>');
$("[id$=EmpGrid]").append(row);
}
$.ajax({
type: "POST",
url: "EmployeeGrid.aspx/GetEmp",
data: '{pageIndex: ' + pageIndex + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
}
}
//Function to recieve XML response append rows to GridView
function OnSuccess(response) {
var xmlDoc = $.parseXML(response.d);
var xml = $(xmlDoc);
pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text());
var employees = xml.find("Employees");
$("[id$=EmpGrid] .loader").remove();
customers.each(function () {
var customer = $(this);
var row = $("[id$=EmpGrid] tr").eq(0).clone(true);
$(".data", table).html(employees.find("empdata").text());
$(".name", table).html(employees.find("name").text());
$(".email", table).html(employees.find("email").text());
$(".number", table).html(employees.find("number").text());
$(".edit", table).html(employees.find("icon").text());
$("[id$=EmpGrid]").append(row);
});
//Hide Loader
$("#loader").hide();
}
</script>
2. Gridview is desinged on usercontrol as follows which have rowcommand and rowdatabound events as well:
div id="dvGrid" runat="server">
<asp:GridView ID="EmpGrid" runat="server" OnRowCommand="EmpGrid_RowCommand" OnRowDataBound="EmpGrid_RowDataBound" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField ItemStyle-CssClass="data">
<ItemTemplate>
<asp:LinkButton ID="EmpData" runat="server" Text="EmployeeDetails" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CssClass="empdata"
CommandName="ViewEmployeeDetails" ></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="EmployeeName" HeaderText="Name" ItemStyle-CssClass="name"/>
<asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-CssClass="email" />
<asp:BoundField DataField="ContactNumber" HeaderText="ContactNumber" ItemStyle-CssClass="number" />
<asp:TemplateField ItemStyle-CssClass="edit">
<ItemTemplate>
<asp:ImageButton ID="EditEmp" runat="server" CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="EditEmployeeDetails" CssClass="icon"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
3. Ajax call is made to the webmethod below,and Then from our Usercontrol.cs page webmethod we are calling our parent page method where we are binding the gridview:
[WebMethod]
public static string GetEmp(int pageIndex)
{
//Added to similate delay so that we see the loader working
//Must be removed when moving to production
System.Threading.Thread.Sleep(2000);
EmpUserControl b1 = new EmpUserControl();
string list = b1.GetEmployeesPageWise(pageIndex, 5).GetXml();
return list;
}
4. Then The control goes to the parent page .
public DataSet GetEmployeesPageWise(int pageIndex, int pageSize)
{
string name = txtName.Text;
string constring = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constring))
{
using (SqlCommand cmd = new SqlCommand("[GetEmployeesPageWise]"))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
cmd.Parameters.AddWithValue("@PageSize", pageSize);
cmd.Parameters.AddWithValue("@Name", name);
cmd.Parameters.Add("@PageCount", SqlDbType.Int, 4).Direction = ParameterDirection.Output;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
sda.Fill(ds, "Employees");
DataTable dt = new DataTable("PageCount");
dt.Columns.Add("PageCount");
dt.Rows.Add();
dt.Rows[0][0] = cmd.Parameters["@PageCount"].Value;
ds.Tables.Add(dt);
return ds;
}
}
}
}
}
but as soon as it enters the parent page code behind it gives us error"Object refernce not set to instance of the object"
Also if we manage to bind rows on scroll by hard coding the variables even then the gridevents does not fire.
