Click here to Skip to main content
13,146,742 members (79,939 online)
Click here to Skip to main content
Add your own
alternative version

Stats

140.2K views
1.8K downloads
44 bookmarked
Posted 25 Jun 2008

Repeater within Gridview in C# ASP.NET 2.0

, 25 Jun 2008
Rate this:
Please Sign up or sign in to vote.
This article discusses binding a gridview/repeater control from a dataset using a stored procedure

Introduction

Inserting a repeater within gridview is an easy task, but binding the headline in gridview and having data items correspond to the particular headline into a repeater, is a little bit tricky. Following a requirement I was given, I had to bind company name as a headline and the top four news of the company as data items under the headline. Then the next company name, and the top four news of that respective company and so on. Like this:

image001.jpg

Here, I have used a repeater control to bind news while I am binding company name in gridview. We can also make the company name as a link button which, on clicking, will navigate to the corresponding page. For this we have to pass navigate the URL for a company dynamically. We can do this by writing code in the OnRowDataBound event of gridview. We can also make the news row as link.

Mechanism

Take a gridview control and set its AutoGenerateColumns="False". Put a label control within the grid to bind company name, so you can also use its BoundField. Now, within the same ItemTemplate, place a repeater control and put one more label control within this repeater control to bind news of respective company. If you are using a different ItemTemplate, then it will bind in another column, otherwise it will bind in the same column but in different rows as shown in the figure below. Now it is your choice, whether you are interested in binding in the same or a different column. Here, I have used a div tag, to separate company and their news rows. The div tag gives one more advantage. For example, we can apply CSS to a particular div for richer UI. The complete source code looks like this:

<div style="width:400px; font-family:Arial; font-size:small">
  <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

    Width="100%" GridLines="None">
    <Columns>
      <asp:TemplateField>
      <ItemTemplate>
        <div style="color:Blue;font-weight:bold">
          <asp:Label ID="Label1" runat="server" Text='<%#
          DataBinder.Eval(Container.DataItem,"compname") %>'></asp:Label>
        </div>
        <asp:Repeater ID="Repeater1" runat="server" DataSource='<%#DataBinder.Eval(
          Container, "DataItem.InnerVal") %>'>
        <ItemTemplate>
        <div style="padding-left:20px; padding-top:5px">
        <asp:Label ID="Label2" runat="server" Text='<%#
           DataBinder.Eval(Container.DataItem,"news") %>'></asp:Label>
        </div>
 
        </ItemTemplate>
        </asp:Repeater>
        <div style="text-align:right">
          <asp:HyperLink ID="link" runat="server">More</asp:HyperLink>
        </div>
        </ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
</div>

It is obvious; we have to write some code in the code behind to get the data from the database.

I have used a stored procedure that returns two tables, i.e. for company name and news section.

Now I am making a relation between these two tables in dataset, with the column 'compname'. And finally, binding the data in data controls. The code looks like this:

protected void Page_Load(object sender, EventArgs e)
{
    binddata();
}

// Function to bind data in data controls..
public void binddata()
{
    // your connection string here
    string str = "Data Source=VS-NAVINCHANDRA\\SQLEXPRESS;" +
         "Initial Catalog=dbNavin;Integrated Security=SSPI"; 
    SqlConnection con = new SqlConnection(str);
    DataSet ds = new DataSet();
    // name of your stored procedure,
    SqlDataAdapter da = new SqlDataAdapter("getCompNews", con); 
    da.Fill(ds);

    ds.Relations.Add("InnerVal",
        ds.Tables[0].Columns["compname"],
        // making a relation between two tables.
        ds.Tables[1].Columns["compname"]);  
    GridView1.DataSource = ds.Tables[0];
    GridView1.DataBind();
}

On clicking the ‘More’ link button, it should redirect to page which shows all the news of that particular company. So, we have to set NavigateUrl property for this control dynamically. To do this, write the code given below. As I have passed company name in query string, you can very easily access the respective company data from your table to display.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HyperLink lnkMore = (HyperLink)e.Row.FindControl("link");
        Label lbl=(Label)e.Row.FindControl("Label1");
        lnkMore.NavigateUrl = "~/Company.aspx?cmp="+lbl.Text;
    }
}

As I've mentioned, because I've used a stored procedure you must create a stored procedure that returns tables. If you don't want to create it, just copy and paste the stored procedure given below and compile it. Make sure that your database contains all tables and respective columns.

Create Procedure [dbo].[getCompNews]

as 
begin
create table #Temp
(
compname varchar(50),
news varchar(150)
)

Insert into #Temp
select a.compname, b.news from Company as a

inner join CompNews as b on a.CompId=b.CompId order by compname


Select distinct compname from #Temp
select * from #Temp
end
drop table #Temp

Here I am using a stored procedure instead of using a direct SQL query. Of course a stored procedure is much better than a query, so I recommend going for the stored procedure.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Navin Pandit
Software Developer (Senior)
India India
Save paper, save tree. Stop global warming.
http://www.navinpandit.blogspot.in/p/global-warming.html

You may also be interested in...

Comments and Discussions

 
Questioncan you tell how to use select many row in repeater with check-box and then update all at one Pin
irfanansari4-Apr-14 12:53
groupirfanansari4-Apr-14 12:53 
AnswerRe: can you tell how to use select many row in repeater with check-box and then update all at one Pin
Navin Pandit10-Apr-14 4:17
memberNavin Pandit10-Apr-14 4:17 
GeneralMy vote of 5 Pin
Kanasz Robert25-Sep-12 22:39
mvpKanasz Robert25-Sep-12 22:39 
GeneralRe: My vote of 5 Pin
Navin Pandit23-Dec-12 19:16
memberNavin Pandit23-Dec-12 19:16 
QuestionDatabase Pin
Eid Shkhaidem23-Aug-11 4:05
memberEid Shkhaidem23-Aug-11 4:05 
AnswerRe: Database Pin
Navin C. Pandit23-Aug-11 19:16
memberNavin C. Pandit23-Aug-11 19:16 
GeneralMy vote of 5 Pin
vai_rajput10-Apr-11 19:52
membervai_rajput10-Apr-11 19:52 
GeneralRe: My vote of 5 Pin
Navin C. Pandit10-Apr-11 20:03
memberNavin C. Pandit10-Apr-11 20:03 
GeneralGood Article Pin
zubairy14-Apr-10 6:53
memberzubairy14-Apr-10 6:53 
GeneralRe: Good Article Pin
Navin C. Pandit17-Aug-11 19:17
memberNavin C. Pandit17-Aug-11 19:17 
Generalrepeater on new row Pin
david weinstein17-Dec-09 7:11
memberdavid weinstein17-Dec-09 7:11 
GeneralRe: repeater on new row [modified] Pin
Navin C. Pandit20-Dec-09 17:17
memberNavin C. Pandit20-Dec-09 17:17 
GeneralCollapsiblePanel in the grid View Pin
Member 282442931-Oct-09 19:49
memberMember 282442931-Oct-09 19:49 
GeneralRe: CollapsiblePanel in the grid View Pin
Navin C. Pandit1-Nov-09 22:26
memberNavin C. Pandit1-Nov-09 22:26 
GeneralVery Helpful Pin
dav0idz15-Apr-09 15:47
memberdav0idz15-Apr-09 15:47 
GeneralRe: Very Helpful Pin
Navin C. Pandit23-Apr-09 19:14
memberNavin C. Pandit23-Apr-09 19:14 
QuestionHow do you display just the first 3 results ? Pin
Mayuresh802-Nov-08 15:20
memberMayuresh802-Nov-08 15:20 
AnswerRe: How do you display just the first 3 results ? Pin
Navin C. Pandit19-Nov-08 20:30
memberNavin C. Pandit19-Nov-08 20:30 
GeneralGood article Pin
Rajib Ahmed26-Jun-08 16:41
memberRajib Ahmed26-Jun-08 16:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.170915.1 | Last Updated 25 Jun 2008
Article Copyright 2008 by Navin Pandit
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid