I am creating a wall using a UserControl ( which is a nested GridView) i want to load the rows of the GridView on scrolling down just like facebook. I am trying to implement this method..
Click MeClick here The example seems to read the last row's first column to get the last row which is loaded and to fetch next bunch of rows. I added a bound field to my UserControl's GridView but i guess i am not able to read the right value since i am getting error "Input string was not in a correct format." at ..
protected void btnGetMoreRecords_Click(object sender, EventArgs e)
{
dt = dbo.FetchNextProducts(Convert.ToInt32(hiddenLastProductID.Value), 14, 42);
Its Convert.ToInt32(hiddenLastProductID.Value where i am getting the error.
and this is my aspx code of the usercontrol..
<asp:ScriptManager ID="sm1" runat="server">
<Scripts>
<asp:ScriptReference Path="~/ScriptsScroll/jquery-1.4.1.js" />
</Scripts>
</asp:ScriptManager>
<div id="divProducts" style="height:700px;overflow-x:hidden;overflow-y: scroll;">
<table cellpadding="0" cellspacing="1" border="0">
<tr>
<td align="left">
<asp:GridView ID="GridViewUserScraps" ItemStyle-VerticalAlign="Top" AutoGenerateColumns="False"
GridLines="None" Width="100%" ShowHeader="False" runat="server" AlternatingRowStyle-BackColor="#A5A5A5"
CellPadding="4" ForeColor="#333333" DataKeyNames="ScrapId" OnRowCommand="GridViewRowCommand">
<Columns>
<asp:BoundField DataField="id" />
<asp:TemplateField>
<FooterTemplate>
<asp:LinkButton ID="LinkButton1" runat="server">Load More</asp:LinkButton>
</FooterTemplate>
<ItemTemplate>
<table align="left" cellpadding="1" cellspacing="2">
<tr>
<td>
<a href='<%#getUserHREF(Container.DataItem)%>'>
<img align="middle" src='<%#getSRC(Container.DataItem)%>' border="0" width="50px" /></a>
</td>
<td>
</td>
</tr>
</table>
<div align="justify">
<b>
<%#DataBinder.Eval(Container.DataItem,"firstname")%>
</b>
<br />
<%#DataBinder.Eval(Container.DataItem, "Message")%>
<br />
<asp:Image ID="Image" runat="server" ImageUrl='<%# Eval("url") %>' style="max-width:500px;" />
</div>
<span class="SmallBlackText">Posted On: </span>
<asp:Label ID="lblSendDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"SendDate")%>'></asp:Label>
</span>
<br />
<%-- <asp:LinkButton ID="lnklike" runat="server"
CommandArgument="<%# ((GridViewRow) Container).RowIndex %>"
CommandName="LikeCmd">Like</asp:LinkButton>
<asp:LinkButton ID="lnkunlike" runat="server">unlike</asp:LinkButton>--%>
<asp:ImageButton ID="lnklike" runat="server" ImageUrl="~/Images/thumbsup.png" Height="20px"
Width="20px" CommandName="like" CommandArgument='<%# Eval("ScrapId")%>' />
<asp:UpdatePanel runat="server" ID="UpdatePanel" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnklike" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Controls_GetUserScraps.abc((int)Eval("ScrapId")) %>' />
</ContentTemplate>
</asp:UpdatePanel>
<%--<asp:Label ID="Label1" runat="server" Text='<%# WebPageName.StaticMethodName((int)Eval("ScrapId")) %>' />--%>
<asp:ImageButton ID="lnkunlike" runat="server" CommandArgument='<%# Eval("ScrapId")%>'
CommandName="unlike" Height="20px" ImageUrl="~/Images/thumbsdown.png" Width="20px" />
<asp:UpdatePanel runat="server" ID="UpdatePanel2" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="lnkunlike" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Controls_GetUserScraps.xyz((int)Eval("ScrapId")) %>'></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:LinkButton ID="lnkcomment" runat="server">Comment</asp:LinkButton>
<asp:LinkButton ID="lnkviewall" runat="server" CommandName="viewall" CommandArgument='<%# Eval("ScrapId")%>'>View All</asp:LinkButton>
<br />
<asp:Panel ID="Pnlchildgrid" runat="server">
<asp:GridView ID="childgrid" runat="server" AutoGenerateColumns="False" OnRowCommand="childgrid_RowCommand"
Style="width: 450px; float: right;">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table align="left" cellpadding="1" cellspacing="2">
<tr>
<td>
<a href='<%#getUserHREF(Container.DataItem)%>'>
<img align="middle" src='<%#getSRC(Container.DataItem)%>' border="0" width="30px" /></a>
</td>
<td>
</td>
</tr>
</table>
<div align="justify">
<b>
<%#DataBinder.Eval(Container.DataItem, "firstname")%></b><br />
<%#DataBinder.Eval(Container.DataItem, "commentmsg")%>
<br />
</div>
<span class="SmallBlackText">Posted On: </span>
<asp:Label ID="lblSendDate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"SendDate")%>'></asp:Label>
</span>
<br />
<asp:ImageButton ID="lnklike" runat="server" Height="20" Width="20" CommandName="childlike"
CommandArgument='<%# Eval("commentid")%>' ImageUrl="~/Images/thumbsup.png" />
<asp:Label ID="Label1" runat="server" Text='<%# Controls_GetUserScraps.abc1((int)Eval("commentid")) %>' />
<asp:ImageButton ID="lnkunlike" runat="server" CommandArgument='<%# Eval("commentid")%>'
CommandName="childunlike" Height="20" ImageUrl="~/Images/thumbsdown.png" Width="20" />
<asp:Label ID="Label2" runat="server" Text='<%# Controls_GetUserScraps.xyz1((int)Eval("commentid")) %>'></asp:Label>
<%-- <asp:LinkButton ID="lnkcomment" runat="server">Comment11111</asp:LinkButton>--%>
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="txtcomment" runat="server" Width="500px" ></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Comment" CommandName="comment" CommandArgument='<%# Eval("ScrapId")%>' />
</asp:Panel>
</asp:Panel>
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#EFF3FB" />
<FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#2461BF" />
<AlternatingRowStyle BackColor="White" />
</asp:GridView>
</td>
</tr>
<tr>
<td align="left">
</td>
</tr>
</table>
</div>
<div><asp:HiddenField runat="server" ID="hiddenLastProductID" />
<asp:Button runat="server" Text="Get More records" ID="btnGetMoreRecords"
onclick="btnGetMoreRecords_Click" />
</div>
<div id="divProgress" style="margin-top: -50px;margin-left:150px;z-index:-999">
<img src="../loading.gif" width="100" height="100" alt="" />
</div>
<div>
</div>
<script type="text/javascript">
var previousProductId = 0;
//Max records to display at a time in the grid.
var maxRecordsToDisplay = 30;
$(document).ready(function () {
//initially hide the loading gif
$("#divProgress").hide();
//initially hide the button
$("#btnGetMoreRecords").hide();
//Attach function to the scroll event of the div
$("#divProducts").scroll(function () {
var scrolltop = $('#divProducts').attr('scrollTop');
var scrollheight = $('#divProducts').attr('scrollHeight');
var windowheight = $('#divProducts').attr('clientHeight');
var scrolloffset = 20;
if (scrolltop >= (scrollheight - (windowheight + scrolloffset))) {
//User has scrolled to the end of the grid. Load new data..
$("#divProgress").ajaxStart(function () {
$(this).show();
});
$("#divProgress").ajaxStop(function () {
$(this).hide();
});
BindNewData();
}
});
});
function BindNewData() {
//
var lastProductId = $("#<%=GridViewUserScraps.ClientID %> tr:last").children("td:first").html();
//get last table row in order to append the new products
var lastRow = $("#<%=GridViewUserScraps.ClientID %> tr:last");
//Fetch records only when the no. of records displayed in the grid are less than limit.
if (GetRowsCount() < maxRecordsToDisplay) {
if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10)) {
previousProductId = lastProductId;
$.post("FetchRecordsHandler.ashx?lastProductId=" + lastProductId, function (data) {
if (data != null) {
//append new products rows to last row in the gridview.
lastRow.after(data);
}
});
}
}
else {
//Set value of last product id in hidden field so that we can access it from code behind.
$("#hiddenLastProductID").val(lastProductId);
//Check If there is more records in the database
if (parseInt(lastProductId, 10) > parseInt(previousProductId, 10))
$("#btnGetMoreRecords").show();
}
}
function GetRowsCount() {
//Count no. of rows except header row in the grid.
//var rowCount = $('#GridView1 tr').length - 1;
var rowCount = $('[id*=GridViewUserScraps] tr');
return rowCount;
}
</script>
Submit an article or tip