I am not getting the point why this is happening.
I have a Gridview, inside that I have implemented a pagerTemplate. It is showing me the correct records which are coming from the database.
First of All, I took the logic of implementing the gridview pager part from here. And I implemented the same as described their.
Now the scenario which I came up with is that, When I change the dropdown selection, my gridview gets postback and all the Row of the grid gets disturbed. I dont know why this is happening.
See the code which I implemented:-
<asp:GridView ID="grdCSRPageData" runat="server" Width="100%" border="1" Style="border: 1px solid #E5E5E5;" CellPadding="3"
AutoGenerateColumns="False" OnDataBound="grdCSRPageData_DataBound" AllowPaging="true" CssClass="hoverTable" EmptyDataText="No Records Found"
OnPageIndexChanging="grdCSRPageData_PageIndexChanging" DataKeyNames="Id" OnRowDeleting="grdCSRPageData_RowDeleting"
PageSize="4" ShowFooter="true" OnRowEditing="grdCSRPageData_RowEditing" OnRowUpdating="grdCSRPageData_RowUpdating"
OnRowCancelingEdit="grdCSRPageData_RowCancelingEdit">
<AlternatingRowStyle CssClass="k-alt" BackColor="#f5f5f5" />
<Columns>
<asp:TemplateField HeaderText="Select" HeaderStyle-Width="5%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" AutoPostBack="false" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="page_title" HeaderText="Page Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="page_description" HeaderText="Page Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_title" HeaderText="Meta Title" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_keywords" HeaderText="Meta Keywords" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="meta_description" HeaderText="Meta Description" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:BoundField DataField="Active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td" />
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="15%" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="Delete" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Image" ItemStyle-Width="15" EditImageUrl="~/images/edit.png" ShowEditButton="True" ControlStyle-Width="15" ControlStyle-Height="15" CancelImageUrl="~/images/close.png" UpdateImageUrl="~/images/update.png">
<ControlStyle Height="20px" Width="20px"></ControlStyle>
</asp:CommandField>
</Columns>
<pagerstyle />
<pagerTemplate>
<table style="width:100%">
<tr>
<td>
<asp:label id="MessageLabel" Text="Select a page:" runat="server"/>
<asp:dropdownlist id="PageDropDownList" AutoPostBack="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged"
runat="server"/>
<td style="width:70%; text-align:right">
<asp:label id="CurrentPageLabel" runat="server"/>
</td>
</td>
</tr>
</table>
</pagerTemplate>
</asp:GridView>
The code is added with PagerTemplate. Also see my code behind as given their:-
Cs Code for the PagerTemplate:-
protected void grdCSRPageData_DataBound(object sender, EventArgs e)
{
GridViewRow pagerRow = grdCSRPageData.BottomPagerRow;
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
Label pageLabel = (Label)pagerRow.Cells[0].FindControl("CurrentPageLabel");
if (pageList != null)
{
for (int i = 0; i < grdCSRPageData.PageCount; i++)
{
int pageNumber = i + 1;
ListItem item = new ListItem(pageNumber.ToString());
if (i == grdCSRPageData.PageIndex)
{
item.Selected = true;
}
pageList.Items.Add(item);
}
}
if (pageLabel != null)
{
int currentPage = grdCSRPageData.PageIndex + 1;
pageLabel.Text = "Page " + currentPage.ToString() +
" of " + grdCSRPageData.PageCount.ToString();
}
}
protected void PageDropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow pagerRow = grdCSRPageData.BottomPagerRow;
DropDownList pagelist = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
grdCSRPageData.PageIndex = pagelist.SelectedIndex;
}
Please help. Any help would be appreciable
try changing the AutoPostBack="true" to false of your dropDownList and be sure to load data in Page_Load inside
if (!IsPostBack){
//bind gridview
}
update
try inserting your dropDownList (with AutoPostBack="true") and your GridView inside an UpdatePanel with "UpdateMode=Conditional" like this
<asp:UpdatePanel runat="server" ID="up1" UpdateMode="Conditional">
<ContentTemplate>
//put here gridview
<ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="PageDropDownList" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
update
try this solution with your code
aspx page
<asp:GridView ID="grdUser"
AllowPaging="true"
AutoGenerateColumns="False"
OnDataBound="grdUser_DataBound"
OnRowDeleting="grdUser_RowDeleting"
OnPreRender="PreRenderGrid"
runat="server"
Width="100%"
border="1"
DataKeyNames="Id"
PageSize="2"
OnPageIndexChanging="grdUser_PageIndexChanging"
EnableSortingAndPagingCallbacks="false"
CssClass="pagi" OnRowCommand="grdUser_RowCommand">
<Columns>
<asp:TemplateField HeaderText="Select" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:CheckBox ID="chkDelete" runat="server" />
</ItemTemplate>
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:TemplateField>
<asp:BoundField DataField="username" HeaderText="UserName" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="email" HeaderText="Email Id" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="usertype" HeaderText="UserType" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:BoundField>
<asp:BoundField DataField="active" HeaderText="Active" ItemStyle-Width="30" HeaderStyle-CssClass="k-grid td">
<HeaderStyle CssClass="k-grid td"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="Action" HeaderStyle-Width="5%" ItemStyle-Width="20" HeaderStyle-CssClass="k-grid td">
<ItemTemplate>
<asp:ImageButton ID="btnDelete" AlternateText="Delete" ImageUrl="~/images/delete.png" runat="server" Width="15" Height="15" CommandName="eEdit" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" OnClientClick="return confirm('Are you sure you want to delete this record?')" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="btnEdit" AlternateText="Edit" ImageUrl="~/images/edit.png" runat="server" Width="15" Height="15" CommandName="eEdit" CommandArgument='<%# Eval("Id") %>' CausesValidation="false" />
</ItemTemplate>
<HeaderStyle CssClass="k-grid td" Width="15%"></HeaderStyle>
<ItemStyle Width="30px"></ItemStyle>
</asp:TemplateField>
</Columns>
<PagerStyle ForeColor="#e3e3e3"
BackColor="#e3e3e3" CssClass="grid-pagi" />
<PagerTemplate>
<table runat="server" id="testTable1" style="width: 100%" class="k-grid td">
<tr>
<td class="col-md-7 pull-left">
<asp:Label ID="MessageLabel"
Text="Select a page:"
runat="server" />
<asp:LinkButton ID="FirstLB" runat="server" CommandName="Page" CommandArgument="First" ToolTip="First" CssClass="btn-pager btn-default"><<</asp:LinkButton>
<asp:LinkButton ID="PrevLB" runat="server" CommandName="Page" CommandArgument="Prev" ToolTip="Previous" CssClass="btn-pager btn-default"><</asp:LinkButton>
<asp:DropDownList runat="server" ID="PageDropDownList" AutoPostBack="true" EnableViewState="true" OnSelectedIndexChanged="PageDropDownList_SelectedIndexChanged" CssClass="selectpicker form-control-drp"></asp:DropDownList>
<asp:LinkButton ID="NextLB" runat="server" CommandName="Page" CommandArgument="Next" ToolTip="Next" CssClass="btn-pager btn-default">></asp:LinkButton>
<asp:LinkButton ID="LastLB" runat="server" CommandName="Page" CommandArgument="Last" ToolTip="Last" CssClass="btn-pager btn-default">>></asp:LinkButton>
</td>
<td class="col-md-3 pull-right">
<asp:Label ID="PageSizeLabel" runat="server" Text="Select Page Size: "></asp:Label>
<asp:DropDownList ID="ddlPageSize" runat="server" OnSelectedIndexChanged="ddlPageSize_SelectedIndexChanged" AutoPostBack="true" CssClass="selectpicker form-control-drp">
<%-- <asp:ListItem Value="0" Text="0" />--%>
<asp:ListItem Value="1" Text="1" />
<asp:ListItem Value="2" Text="2" />
<asp:ListItem Value="3" Text="3" />
</asp:DropDownList>
</td>
<td class="col-md-2">
<asp:Label ID="CurrentPageLabel" runat="server" />
</td>
</tr>
</table>
</PagerTemplate>
</asp:GridView>
code behind
protected void grdUser_DataBound(object sender, EventArgs e)
{
GridViewRow pagerRow = grdUser.BottomPagerRow;
DropDownList pageSizeList = (DropDownList)pagerRow.Cells[0].FindControl("ddlPageSize");
if (Context.Session["PageSize"] != null)
{
pageSizeList.SelectedValue = Context.Session["PageSize"].ToString();
}
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
Label pageLabel = (Label)pagerRow.Cells[0].FindControl("CurrentPageLabel");
if (pageList != null)
{
for (int i = 0; i < grdUser.PageCount; i++)
{
int pageNumber = i + 1;
ListItem item = new ListItem(pageNumber.ToString());
if (i == grdUser.PageIndex)
{
item.Selected = true;
}
pageList.Items.Add(item);
}
}
if (pageLabel != null)
{
int currentPage = grdUser.PageIndex + 1;
pageLabel.Text = "View " + currentPage.ToString() + " of " + grdUser.PageCount.ToString();
}
}
protected void ddlPageSize_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow pagerRow = grdUser.BottomPagerRow;
DropDownList pageSizeList = (DropDownList)pagerRow.Cells[0].FindControl("ddlPageSize");
//
grdUser.PageSize = Convert.ToInt32(pageSizeList.SelectedValue);
Context.Session["PageSize"] = pageSizeList.SelectedValue;
BindGrid();
}
protected void PageDropDownList_SelectedIndexChanged(object sender, EventArgs e)
{
GridViewRow pagerRow = grdUser.BottomPagerRow;
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");
grdUser.PageIndex = pageList.SelectedIndex;
BindGrid();
}
protected void PreRenderGrid(object sender, EventArgs e)
{
GridViewRow pagerRow = grdUser.BottomPagerRow;
DropDownList pageList = (DropDownList)pagerRow.Cells[0].FindControl("PageDropDownList");//error
Label pageLabel = (Label)pagerRow.Cells[0].FindControl("CurrentPageLabel");
if (pageList != null)
{
for (int i = 0; i < grdUser.PageCount; i++)
{
int pageNumber = i + 1;
ListItem item = new ListItem(pageNumber.ToString());
if (i == grdUser.PageIndex)
{
item.Selected = true;
}
pageList.Items.Add(item);
}
}
if (pageLabel != null)
{
int currentPage = grdUser.PageIndex + 1;
pageLabel.Text = "View " + currentPage.ToString() + " of " + grdUser.PageCount.ToString();
}
this.grdUser.Controls[0].Controls[this.grdUser.Controls[0].Controls.Count - 1].Visible = true;
BindGrid();
}