I need your help, I have a nested repeater parent (Repeater1) and child gridview (gvNewChild). Parent repeater is calling the record Id (FId) from parent table and child gridview is getting record Id (FId) on OnItemDataBound of parent repeater from child table, so both the parent and child table are different but linked with FId which is the same record Id number in both the table.
Now I am able to retrieve the data in both outer repeater and child gridview from both the table using their FId respectively. But I am wondering if there is a possibilities to give navigation in the child gridview instead of showing all the record at a time, so actually I want my child repeater to show only one record and to access other record I want to use next and previous navigation. Please guide me, below is the code:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="OnItemDataBound">
<ItemTemplate>
<u><b>
<asp:Label ID="Label7" class="HeadMasterTextBox" Width="" runat="server" Text='<%# Eval("NTitle") %>'></asp:Label>
</b></u>
<asp:Label ID="lblDetails" class="HeadMasterTextBox" Width="" runat="server" Text='<%# Eval("NDetails") %>'></asp:Label>
<asp:Panel ID="pnlOrders" runat="server" Style="display: block;">
GridView ID="gvNewChild" runat="server" DataKeyNames="FId" AutoGenerateColumns="false"
CssClass="tableWall" HeaderStyle-BorderColor="#ffffff" GridLines="None" Visible="true"
AllowPaging="true" PageSize="1" OnPageIndexChanging="gvNewChild_PageIndexChanging" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<table border="0" width="100%" align="center" class="">
<tr>
<td align="center" colspan="2">
<!-- <asp:ImageButton runat="server" ID="imgData" class="imgwall" ImageUrl='<%# Eval("ImageName") %>'
CommandName='<%# Eval("FId") %>' CommandArgument='<%# Eval("ImageName") %>' />
-->
<asp:Image ID="Image1" runat="server" ImageUrl='<%# "data:image/jpg;base64," + Convert.ToBase64String((byte[])Eval("BData")) %>'
Height="180px" Width="200px" />
<br />
<asp:Label ID="Label1" runat="server" Visible="true" Text='<%# Eval("ImageName") %>'></asp:Label>
</td>
</tr>
<tr>
<td style="vertical-align: top;" align="center">
<asp:Label ID="lblFId" runat="server" Visible="false" Text='<%# Eval("FId") %>'></asp:Label>
<asp:TextBox ID="txt_GFId" AutoPostBack="true" runat="server" Visible="true" Text='<%# Eval("FId") %>'></asp:TextBox>
<br />
<asp:LinkButton Text="" ID="lnkFIdCount" class="tableAdminTextBox" CommandArgument='<%# Eval("FId") %>'
runat="server" CommandName="Select" />
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle BackColor="#ffffff" ForeColor="#333333" />
</asp:GridView>
<asp:HiddenField ID="hfFId" runat="server" Value='<%# Eval("FId") %>' />
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
Below is the source:
if (!IsPostBack)
{
Repeater1.DataSource = GetData("select *from News order by (Id) desc");
Repeater1.DataBind();
}
private static DataTable GetData(string query)
{
string strConnString = ConfigurationManager.ConnectionStrings["BHCONNECTION"].ConnectionString;
using (SqlConnection con = new SqlConnection(strConnString))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = query;
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.Connection = con;
sda.SelectCommand = cmd;
using (DataSet ds = new DataSet())
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
}
protected void OnItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
string FId = (e.Item.FindControl("hfFId") as HiddenField).Value;
Repeater rptOrders = e.Item.FindControl("rptOrders") as Repeater;
rptOrders.DataSource = GetData(string.Format("select * from NewsPic where FId='{0}'", FId));
rptOrders.DataBind();
}
}
protected void gvNewChild_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
GridView gvNewChild = (sender as GridView);
gvNewChild.PageIndex = e.NewPageIndex;
gvNewChild.DataBind();
}
Take a look at quick example:
HTML-Markup:
<asp:Repeater ID="Repeater1" runat="server" OnItemDataBound="Repeater1_ItemDataBound">
<ItemTemplate>
<asp:Label ID="lblFID" runat="server" Text='<%# Eval("FID") %>'></asp:Label>
<!-- Your other controls -->
<asp:GridView ID="GridView1" runat="server" AllowPaging="true" PageSize="1"
AutoGenerateColumns="false" OnPageIndexChanging="GridView1_PageIndexChanging" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Label ID="lblFID" runat="server" Text='<%# Eval("FID") %>'></asp:Label>
<!-- Your other controls -->
</ItemTemplate>
</asp:TemplateField>
</Columns>
<PagerStyle HorizontalAlign="Right" CssClass="pagination-ys" />
</asp:GridView>
</ItemTemplate>
</asp:Repeater>
Code-Behind:
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item ||
e.Item.ItemType == ListItemType.AlternatingItem)
{
string FId = (e.Item.FindControl("FID") as Label).Text;
GridView GridView1 = e.Item.FindControl("GridView1") as GridView;
// select data from parent Table
GridView1.DataSource =
GetData(string.Format("select * from ParentTable where FId='{0}'", FId));
GridView1.DataBind();
}
}
protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
// get repeater item where clicked
RepeaterItem item = ((GridView)sender).Parent as RepeaterItem;
string FId = ((Label)Repeater1.Items[item.ItemIndex].FindControl("FID")).Text;
// get gridview from Repeater
GridView GridView1 = (sender as GridView);
GridView1.PageIndex = e.NewPageIndex;
// select data from child table
GridView1.DataSource =
GetData(string.Format("select * from ChildTable where FId='{0}'", FId));
GridView1.DataBind();
}
Paging Style:
.pagination-ys {
//display: inline-block;
padding-left: 0;
margin: 20px 0;
border-radius: 4px;
}
.pagination-ys table > tbody > tr > td {
display: inline;
}
.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
color: #dd4814;
background-color: #ffffff;
border: 1px solid #dddddd;
margin-left: -1px;
}
.pagination-ys table > tbody > tr > td > span {
position: relative;
float: left;
padding: 8px 12px;
line-height: 1.42857143;
text-decoration: none;
margin-left: -1px;
z-index: 2;
color: #aea79f;
background-color: #f5f5f5;
border-color: #dddddd;
cursor: default;
}
.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
margin-left: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
}
.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
border-bottom-right-radius: 4px;
border-top-right-radius: 4px;
}
.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
color: #97310e;
background-color: #eeeeee;
border-color: #dddddd;
}