Repeater control in asp.net - Part 60

Suggested Videos 
Part 57 - Export gridview to excel
Part 58 - Export gridview to pdf
Part 59 - Generate pdf document from gridview data and store on web server



In this video we will discuss about 
1. The similarities and differences between gridview and repeater controls
2. When to use gridview control over repeater and viceversa



Similarities:
1. Just like gridview, a repeater is also a data-bound control. 
2. To bind data, you use DataSource property and invoke DataBind() method.
3. The following 3 events are supported by both the controls
     a) ItemCommand
     b) ItemCreated
     c) ItemDataBound

Differences:
1. By default, a repeater control will not render anything if templates are not specified, but where as with GridView control, the data from the underlying data source will be rendered in a tabular format.
2. GridView is more suitable and designed for displaying data in a tabular format, where as Repeater is used when you want to have complete control over how you want the data to be rendered. For example, if I want the data from tblEmployee table to be rendered as shown below, then repeater is a better control. But please remember, it is also possible to do the same thing with GridView using Template fields.


3. By default, the repeater control does not offer editing, paging and sorting capabilities, but where as a gridview control does. However, with a bit of effort and code it is possible to implement these features using a repeater control.

When do you use gridview control over repeater and vice versa?
A repeater is a very light weight control, and if you want to have the complete control over how the data is rendered, and if you don't want editing, paging or sorting capabilities, then repeater should be your choice. On the other hand if you want the data to be displayed in a tabular format and you also need editing, paging and sorting capabilities, then gridview should be your choice. 

For sql script to create and populate tblEmployee table, please refer to Part 30 by clicking here.

Webform1.aspx HTML used in the demo
<table>
<tr>
<td>
    <asp:GridView ID="GridView1" ShowHeader="false" 
        GridLines="None" AutoGenerateColumns="false"
        runat="server">
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <table style="border: 1px solid #A55129; 
                        background-color: #FFF7E7">
                        <tr>
                            <td style="width: 200px">
                                <asp:Image ID="imgEmployee" 
                                    ImageUrl='<%# Eval("PhotoPath")%>' 
                                    runat="server" />
                            </td>
                            <td style="width: 200px">
                                <table>
                                    <tr>
                                        <td>
                                            <b>Id:</b>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblId" 
                                            runat="server" 
                                            Text='<%#Eval("EmployeeId") %>'>
                                            </asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <b>Name:</b>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblName" 
                                            runat="server" 
                                            Text='<%#Eval("Name") %>'>
                                            </asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <b>Gender:</b>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblGender" 
                                            runat="server" 
                                            Text='<%#Eval("Gender") %>'>
                                            </asp:Label>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <b>City:</b>
                                        </td>
                                        <td>
                                            <asp:Label ID="lblCity" 
                                            runat="server" 
                                            Text='<%#Eval("City") %>'>
                                            </asp:Label>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</td>
<td>
    <asp:Repeater ID="Repeater1" runat="server">
        <ItemTemplate>
            <table style="border: 1px solid #A55129; 
                background-color: #FFF7E7">
                <tr>
                    <td style="width: 200px">
                        <asp:Image ID="imgEmployee" 
                        ImageUrl='<%# Eval("PhotoPath")%>' 
                        runat="server" />
                    </td>
                    <td style="width: 200px">
                        <table>
                            <tr>
                                <td>
                                    <b>Id:</b>
                                </td>
                                <td>
                                    <asp:Label ID="lblId" 
                                    runat="server" 
                                    Text='<%#Eval("EmployeeId") %>'>
                                    </asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Name:</b>
                                </td>
                                <td>
                                    <asp:Label ID="lblName" 
                                    runat="server" 
                                    Text='<%#Eval("Name") %>'>
                                    </asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>Gender:</b>
                                </td>
                                <td>
                                    <asp:Label ID="lblGender" 
                                    runat="server" 
                                    Text='<%#Eval("Gender") %>'>
                                    </asp:Label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <b>City:</b>
                                </td>
                                <td>
                                    <asp:Label ID="lblCity" 
                                    runat="server" 
                                    Text='<%#Eval("City") %>'>
                                    </asp:Label>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </ItemTemplate>
        <SeparatorTemplate>
            <asp:Image ID="Image1" 
            ImageUrl="~/Images/1x1PixelImage.png" 
            runat="server" />
        </SeparatorTemplate>
    </asp:Repeater>
</td>
</tr>
</table>

WebForm1.aspx.cs code:
protected void Page_Load(object sender, EventArgs e)
{
    DataSet ds = GetData();

    GridView1.DataSource = ds;
    GridView1.DataBind();

    Repeater1.DataSource = ds;
    Repeater1.DataBind();
}
private DataSet GetData()
{
    string CS = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
    using (SqlConnection con = new SqlConnection(CS))
    {
        SqlDataAdapter da = new SqlDataAdapter("Select * from tblEmployee", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        return ds;
    }
}