Introduction

A Grid View is a graphical control element that presents a tabular view of data. A Grid View is used to represent a list of data items by binding data fields to columns and displaying columns. A typical Grid View supports features like click, drag and drop, in place edit and so on.

Here I explain step-by-step how to retrieve data in a Grid View.

Step 1

Start Visual Studio.

Visual Studio Start Page

Step 2

Select the project from the File menu.

Creating New Project

Step 3

Choose web and select ASP.NET Web Application.

Creating Asp.Net Web Application

Step 4

Now add an empty project template for creating the ASP.NET Web Application.

Selecting Project Template

Step 5

Select the project located in the menu bar and choose ADD NEW ITEM and select WEB PAGE and provide a meaningful name.

Creating Web Form

Place the following code in your web form page:

  1. <asp:GridView ID="grid1" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333" GridLines="None" >
  2. <AlternatingRowStyle BackColor="White" />
  3. <columns>
  4. <asp:TemplateField HeaderText="EmployeeID">
  5. <ItemTemplate>
  6. <asp:Label ID="LblCompanyId" runat="server" Text='<%#Bind("c_id") %>'></asp:Label>
  7. </ItemTemplate>
  8. </asp:TemplateField>
  9. <asp:TemplateField HeaderText="Name">
  10. <ItemTemplate>
  11. <asp:Label ID="LblCompanyName" runat="server" Text='<%#Bind("c_name") %>'></asp:Label>
  12. </ItemTemplate>
  13. </asp:TemplateField>
  14. <asp:TemplateField HeaderText="Address">
  15. <ItemTemplate>
  16. <asp:Label ID="LblCompanyAddress" runat="server" Text='<%#Bind("c_address") %>'></asp:Label>
  17. </ItemTemplate>
  18. </asp:TemplateField>
  19. <asp:TemplateField HeaderText="Phone">
  20. <ItemTemplate>
  21. <asp:Label ID="Label3" runat="server" Text='<%#Bind("c_mobile") %>'></asp:Label>
  22. </ItemTemplate>
  23. </asp:TemplateField>
  24. <asp:TemplateField HeaderText="Date Time">
  25. <ItemTemplate>
  26. <asp:Label ID="LblDate" runat="server" Text='<%#Bind("Date") %>'></asp:Label>
  27. </ItemTemplate>
  28. </asp:TemplateField>
  29. </columns>
  30. <EditRowStyle BackColor="#2461BF" />
  31. <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  32. <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
  33. <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
  34. <RowStyle BackColor="#EFF3FB" />
  35. <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
  36. <SortedAscendingCellStyle BackColor="#F5F7FB" />
  37. <SortedAscendingHeaderStyle BackColor="#6D95E1" />
  38. <SortedDescendingCellStyle BackColor="#E9EBEF" />
  39. <SortedDescendingHeaderStyle BackColor="#4870BE" />
  40. </asp:GridView>

This function is used to fetch data from the company table and display it on the Grid View. It fills in the data in a DataTable object and binds it to a GridView control using the DataSource property. In the end, the code calls the GridView. DataBind method to apply the binding.

Code

  1. public partial class Asp : System.Web.UI.Page
  2. {
  3. SqlConnection con;
  4. public Asp()
  5. {
  6. con = new SqlConnection("Your Connection String");
  7. }
  8. protected void Page_Load(object sender, EventArgs e)
  9. {
  10. if (!IsPostBack)
  11. {
  12. DisplayRecord();
  13. }
  14. }
  15. public DataTable DisplayRecord()
  16. {
  17. SqlDataAdapter Adp = new SqlDataAdapter("select * from company", con);
  18. DataTable Dt = new DataTable();
  19. Adp.Fill(Dt);
  20. grid1.DataSource = Dt;
  21. grid1.DataBind();
  22. return Dt;
  23. }
  24. }

Output

GridView in Asp.Net