Load Grid view data on scroll down - c#

Hii I am using a grid with more than 1000 rows (from database). I was using Paging. a new requirement is to remove paging and show only 50 records at first load and then when user scrolls the page down and reaches to bottom of grid, show next 50 records and so on.. I really dont have any idea about it can any one plz help .... I am using VB.net with 4.0 framework.
following is my code to display grid
<%# Page Language="VB" MasterPageFile="~/MasterPage/abc.master" AutoEventWireup="false" CodeFile="TM.aspx.vb" Inherits="TM" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderMain" runat="server" ID="ctn">
<div>
<asp:GridView ID="gvGrid" runat="server" Visible="false" AutoGenerateColumns="False" BorderStyle="Solid" BorderWidth="1px" BorderColor="#6495ED" BackColor="White" HeaderStyle-BackColor="#6495ED">
<AlternatingRowStyle BackColor="#DDEEFF" />
<Columns >
<asp:TemplateField HeaderStyle-Width="10px">
<HeaderTemplate><asp:CheckBox ID="Chk_All_ALert" runat="server" onClick="checkboxAll_click('gvGrid',this.checked,'chk_Alert');"></asp:CheckBox></HeaderTemplate>
<ItemTemplate>
<input type="checkbox" runat="server" id="chk_Alert" value=<%#Eval("UniqueID")%> onclick="CheckUncheck_All('gv_AlertHistory',this.checked,'gvGrid','chk_Alert');"/>
<%--<input type="hidden" id="hdnIDAlert" value=<%#Eval("SchoolID")%> runat="server"/>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Wrap="false">
<HeaderTemplate>Date/Time</HeaderTemplate>
<ItemTemplate><%#DisplayTime(Eval("SentDate"))%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Email Subject</HeaderTemplate>
<ItemTemplate><%#Eval("Subject")%></ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>Email Text</HeaderTemplate>
<ItemTemplate><%#GetAlertGridMessage(Eval("Message"))%></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</asp:Content>

you should use 'Jscroll' or follow this example this may be helpful to you
http://aspsnippets.com/Articles/Load-data-while-Scrolling-Page-down-with-jQuery-AJAX-and-ASPNet.aspx

Related

ASP.Net gridview editing - finding a control on a multipage grid view

I have a gridview that has a textbox in one of cells in my aspx file.
After clicking the edit link in the row, I am able to get the control programatically in the rowdatabound event with this:
e.Row.FindControl("controlPlaceholder");
Using the edit index from the edit event works as well.
However, the control is only enabled on the first page of the gridview. On any other page, FindControl() returns null.
What could be the reason for this? Are there any potential solutions to this issue? I've looked for a solution but haven't had any luck with finding someone who has this particular problem.
Markup:
<asp:Panel ID="pnlAccountAssignment" runat="server" CssClass="clsDataPanel" meta:resourcekey="pnlAccountAssignmentResource1">
<asp:GridView ID="gvAccountAssignment" runat="server" AutoGenerateColumns="False"
AllowPaging="true" PageSize="25" OnRowDataBound="gvAccountAssignment_RowDataBound"
OnRowCancelingEdit="gvAccountAssignment_RowCancelingEdit" OnRowEditing="gvAccountAssignment_RowEditing"
OnRowUpdating="gvAccountAssignment_RowUpdating" OnPageIndexChanging="gvAccountAssignment_PageIndexChanging"
OnSorting="gvAccountAssignment_Sorting" AllowSorting="True" meta:resourcekey="gvAccountAssignmentResource1">
<RowStyle BackColor="White" ForeColor="Black" />
<HeaderStyle CssClass="clsGrayBkgCell" HorizontalAlign="Center" VerticalAlign="Bottom" />
<Columns>
...Other Columns...
<asp:TemplateField meta:resourcekey="TemplateFieldResource8">
<ItemStyle CssClass="clsNumber" HorizontalAlign="Left" VerticalAlign="Top" />
<EditItemTemplate>
<asp:TextBox ID="column13PlaceHolder" runat="server" CssClass="clsNormalLabel">
</asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="lblprevMonth" runat="server" CssClass="clsNormalLabel"></asp:Label>
</ItemTemplate>
<HeaderTemplate>
<asp:LinkButton runat="server" ID="hypSortGLBal" OnClick="hypSortGLBal_Click"></asp:LinkButton>
</HeaderTemplate>
</asp:TemplateField>
...Other Columns...
</Columns>
<PagerStyle HorizontalAlign="Center" VerticalAlign="Middle" />
</asp:GridView>
<asp:HiddenField ID="hdnPrepPopulated" runat="server" />
</asp:Panel>

How to set gridview template fields in right side?

I have a gridview with template fields.Now all template fields are showing in the left side of gridview. How can I set it to the right side? My gridview is
<asp:GridView ID="GridView1" BorderWidth="1px" CellSpacing="18" CellPadding="10" runat="server">
<Columns >
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton4" runat="server">Single OT</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="LinkButton4" runat="server">Double OT</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
And also binding a query with this gridview. My Query is
qry="select OT from OverTime where EmpCode=#EmpCode"
dr=conn.query(qry);
GridView1.DataSource = dr;
GridView1.DataBind();
Youcan use the ItemStyle-HorizontalAlign attribute:
<asp:TemplateField ItemStyle-HorizontalAlign="Right">
For particular Template Column you can add ItemStyle tag like,
<asp:TemplateColumn>
<ItemStyle HorizontalAlign="Right" Width="150px"></ItemStyle>
</asp:TemplateColumn>
so that the content within that particular Template Column gets aligned towards right
Hope this helps!!

grid posts back when checkbox is checked

I have this grid set up.... it all works totally fine... except one issue...
<asp:GridView runat="server"
ID="grdFacetsAssigned"
AllowPaging="false"
AllowSorting="True"
DataKeyNames="lngSystemFacet"
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
CssClass="table_scroll"
AutoGenerateColumns="False" GridLines="None"
ShowHeader="false" Width="500px"
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"
ShowFooter="false" PagerSettings-Visible="false"
DataSourceID="SM_spStateUpdateReport_FacetAssignList"
OnRowCreated="grdFacetsAssigned_RowCreated">
<RowStyle CssClass="table_row" />
<Columns>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbllngSystemFacetID" runat="server"
Text='<%# Eval("lngSystemFacetID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="strSystemSystemFacet" SortExpression="strSystemSystemFacet"
ItemStyle-Width="50%" />
<asp:TemplateField ItemStyle-Width="30%" ItemStyle-HorizontalAlign="Center"
SortExpression="bolAssigned">
<ItemTemplate>
<asp:CheckBox ID="chkFacetAssigned" runat="server"
OnClientClick="alert(this.checked);"
OnCheckedChanged="chkFacetAssigned_CheckedChanged"
AutoPostBack="True" Checked='<%# Eval("bolAssigned") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="intOrder"
HeaderText="Display Order" ItemStyle-Width="20%">
<ItemTemplate>
<asp:Label ID="lblAssignedFacetOrder" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'></asp:Label>
<asp:TextBox ID="txtAssignedFacetOrder" runat="server"
CssClass="gridview_input"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'
Visible="False"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle CssClass="table_selected_row" />
<AlternatingRowStyle CssClass="table_alternating_row" />
<EmptyDataRowStyle CssClass="table_empty" />
<EmptyDataTemplate>
No Data
</EmptyDataTemplate>
</asp:GridView>
When you click the chkFacetAssigned checkbox the appropriate event fires. The code works well from there. What happens though is when the checkbox is checked... if the row is not selected there are two postbacks that happen. The first postback is from the grid and the second postback is from the checkbox. Both postbacks cause the chkFacetAssigned_CheckedChanged event to be called- resulting in code running twice that should only run once. I should note that if the row is already selected (the row the checkbox is on) you do not see this extra postback. Someone please help.
There are no other event handlers registered or anything like this.
First line of your code. Remove the following.
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
Second Line
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"
What I did for this was a workaround in the checkbox event handler...
if (Page.Request.Params["__EVENTTARGET"].IndexOf("chkFacetAssigned") < 1)
{
return;
}
This ensures that the event is ignored unless it is responding to a postback that was initiated by the checkbox and not the grid.

Sorting of Gridview data

I have A Grid view and I want to sort the Gridview .I tried severel methods from google and they are not working in my side.
my gridvie code is like
<asp:GridView ID="gridviewShopData" runat="server" DataSourceID="SqlDataSource1" Width="100%"
AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
CssClass="contactList grid" PageSize="30" ShowHeaderWhenEmpty="true">
<Columns>
<asp:TemplateField HeaderText="Fornavn">
<ItemTemplate>
<%# Eval("Fornavn") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Efternavn">
<ItemTemplate>
<%# Eval("Efternavn") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Medarbejder nummer">
<ItemTemplate>
<%# Eval("Medarbejder nummer") %>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Varenummer">
<ItemTemplate>
<%# Eval("Varenummer") %>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<AlternatingRowStyle CssClass="altrow" />
<PagerSettings FirstPageText="First" LastPageText="Last" PageButtonCount="50" />
<EmptyDataTemplate>
There is no data available to display!
</EmptyDataTemplate>
<PagerStyle CssClass="pager" />
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" SelectCommand="SELECT firstName as 'Fornavn',lastName as 'Efternavn',employeeNumber as 'Medarbejder nummer',productID as 'Varenummer' FROM sydShopOrder where shopID=#pageid">
<SelectParameters><asp:QueryStringParameter Name="pageid" QueryStringField="id"/></SelectParameters>
</asp:SqlDataSource>
how to make it possible anyone help.
set SortExpression in template field and try
<asp:TemplateField HeaderText="Fornavn" SortExpression="Fornavn">
<ItemTemplate>
<%# Eval("Fornavn") %>
</ItemTemplate>
</asp:TemplateField>
do this for all that columns which you want to sort

How to define number of rows of GridView at runtime in code behind using C#

I need to develop such a program in which the GridView's rows should be decided at run time.
i.e. I have a table in database called dealer capacity.
Dealer_ID Capacity
D0001 5
Now when the Dealer D00001 is selected from combo box the number of rows in grid view should be 5. I want to use the template field also.
My code for GridView is:
<asp:GridView ID="grdlicence" runat="server" DataKeyNames="Version_id" GridLines="None" BorderStyle="Solid" AutoGenerateColumns="false" AllowSorting="true"
CssClass="mGrid table"
PagerStyle-CssClass="pgr"
AlternatingRowStyle-CssClass="alt" >
<Columns>
<asp:BoundField DataField="Version_name" ItemStyle-CssClass="uppercase" ItemStyle-Width="150px" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:BoundField DataField="Version_id" Visible="false" HeaderText="Version" HeaderStyle-HorizontalAlign="Left" />
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<center><asp:TextBox ID="txtprice" CssClass="alignments TextStyle" MaxLength="5" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Licence Id">
<ItemTemplate>
<center><asp:TextBox ID="txtlicenceid" CssClass="alignments uppercase" runat="server" ></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Purchase Date">
<ItemTemplate>
<center><asp:TextBox ID="txtpurchasedate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Expiry Date">
<ItemTemplate>
<center><asp:TextBox ID="txtexpirydate" onfocus="showCalendarControl(this);" CssClass="alignments TextStyle" runat="server"></asp:TextBox></center>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Upload File">
<ItemTemplate>
<center><asp:FileUpload ID="fileUpload" runat="server" /></center>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
You need to define PageSize for your GridView and remember to set AllowPaging to true for the GridView
GridView.PageSize Property
Gets or sets the number of records to display on a page in a GridView
control.
The default is 10.
You may see this article: GridView Paging Sample in ASP.NET
You can use the linq Take() and pass the number as parameter.
Updated according to the comment, use following code.
grdlicence.DataSourse= ds.Take(5);
grdlicence.DataBind();

Categories