Wednesday, 13 August 2014

DataBinding in GridView

In this Article, We are going to see a simple example of DataBinding in GridView. For Demonstration, I have created a database (named EmployeeDB) in which We have a table named Employee.

Let's Begin:
1) Drop GridView Control from the toolbox and set AutoGenerateColumns to false
2) Add Columns Collection (tag) which manage the collection of Column fields.
3) Inside Columns tag, Add column field (BoundField) which displays the value of a field in a data source.
4) Set the DataField property to the name of column in table for binding to the BoundField object and Set HeaderText value for Displaying it on the GridView's Header. 
5) We can also adjust the appearance of the Header and Row in a GridView using <HeaderStyle> element and <RowStyle> element.

Default.aspx Coding:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CellPadding="6">
            <Columns>
                <asp:BoundField DataField="Id" HeaderText="Employee ID" />
                <asp:BoundField DataField="First Name" HeaderText="First Name" />
                <asp:BoundField DataField="Last Name" HeaderText="Last Name" />
                <asp:BoundField DataField="City" HeaderText="City" />
            </Columns>
            <HeaderStyle BackColor="#0066cc" Font-Bold="true" ForeColor="White" />
            <RowStyle BackColor="#bfdfff" ForeColor="Black" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

In this Example, I am using ADO.NET for Binding the data to GridView. For this We have to add System.Data and System.Data.SqlClient namespace in the namespace declaration.

Default.aspx.cs Code:
using System;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!IsPostBack)
        {
            ShowData();
        }
    }
    //getting Connection String from Web.config file
    string cs = ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString;
    //Method for DataBinding
    protected void ShowData()
    {
        DataTable dt = new DataTable();
        SqlConnection con = new SqlConnection(cs);
        SqlDataAdapter adapt = new SqlDataAdapter("select * from Employee",con);
        con.Open();
        adapt.Fill(dt);
        con.Close();
        if(dt.Rows.Count>0)
        {
            GridView1.DataSource = dt;
            GridView1.DataBind();
        }
    }
}
Final Preview:
Hope you like it. Thanks.
[Download Source Code from Google Drive]

2 comments:

  1. I've tried your code, but in the if clause, if database is empty, the grid is empty too. removing the if clause, even if the database is empty, it will show columns headers, that's fine to me.

    ReplyDelete
    Replies
    1. Yes, you can remove if clause, if you want to show gridview's column header even if the database is empty

      Delete

Subscribe Now

Popular Posts

Contact us

Name

Email *

Message *

Subscribe us on YouTube

Like us on Facebook

Follow us on Google+