Introduction to ASP.NET Datagrid
When we want to display any scrollable table with data, at this time we can use asp.net framework’s Datagrid control. It will take data from JSON or web services and display it in a tabular format. By using Datagrid control, more attractive and enhanced UI can be made. It has more power than the default gridview control of ASP.NET web forms. It will display either of two, it may be the single table or maybe the hierarchical relationship between the set of tables.
ASP.NET Datagrid control has rich features, which include many functionalities like editing, filtering, grouping, paging, data binding with adaptor sand many more.
Syntax:
<asp:DataGrid ID="Grid" runat="server" >
<Columns>
<asp:BoundColumn HeaderText="EmpId" DataField="EmpId"> </asp:BoundColumn>
</Columns>
</asp:DataGrid>
Here Header text is used to provide the text of the header and provide its value.
Runat is set as “server” as this is on the server-side.
How ASP.NET Datagrid is created?
Let us have a look and understand the Datagrid in ASP.NET with the help of snippets. Let us see how we can create an asp.net Datagrid.
Step 1: Open a visual studio. Now create a new empty form. Refer to the below snippet for the same.
Step 2: Go to the toolbox, you will find DataGrid here, select it and drag the DataGrid control to the new empty form.
Step 3: After dragging this Data grid, it will look like the below image. It will provide us a table contain rows and columns.
This form contains the source code at the backend
Examples of ASP.NET Datagrid
We can have better understating with the help of an example. So let us take an example to display the table-containing name of an employee, its employee id and contact number. Here we will show you two examples one with ASP.NET DataGrid Example with Data Table and another one with ASP.NET DataGrid Example with Database.
1. ASP.NET DataGrid Example with DataBase
Below code is for DataGridExample.aspx
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="DataGridExample.aspx.cs" Inherits="AdoNetExample.DataGridExample" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
<asp:DataGrid ID="DataGrid1" runat="server">
</asp:DataGrid>
</form>
</body>
</html>
Now for database connectivity below is the DataGridExample.aspx.cs code.
using System;
using System.Data;
using System.Data.SqlClient;
namespace AdoNetExample
{
public partial class DataGridExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
using (SqlConnection con = new SqlConnection("data source=.; database=employee; integrated security=SSPI"))
{
SqlDataAdapter sde = new SqlDataAdapter("Select * from Employee", con);
DataSet ds = new DataSet();
sde.Fill(ds);
DataGrid1.DataSource = ds;
DataGrid1.DataBind();
}
}
}
}
The database will contain the Employee record that we want to display using DataGrid Control. This table will contain Employee name, employee ID and contact number.
In this example, the database is used as a data source to display it on the Datagrid.
Output:
We will get below output which will contain the details of the employee table
2. ASP.NET DataGrid Example with Data Table
This example of Datagrid with data table will use the data table to bind data to the Datagrid control.
Code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGridExample2.aspx.cs" Inherits="DataGridExample.DataGridExample2" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>This is an example of DataGrid with DataTable records </p>
<asp:DataGrid ID="DataGrid1" runat="server">
</asp:DataGrid>
</div>
</form>
</body>
</html>
Code Behind
using System;
using System.Data;
namespace DataGridExample
{
public partial class DataGridExample : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
DataTable table = new DataTable();
table.Columns.Add("Employee Name");
table.Columns.Add("Employee ID");
table.Columns.Add("Contact Number");
table.Rows.Add("Madhu kumari", "11223344", "9168661234");
table.Rows.Add("neha singh", "12345098", "9168661235");
table.Rows.Add("shreya singh", "12340987", "9182082020");
table.Rows.Add("nitin patil", "12098765", "9109724272");
table.Rows.Add("mihir patil", "10098765", "9109024272");
DataGrid1.DataSource = table;
DataGrid1.DataBind();
}
}
Output:
We can see our output is just black and white and it’s too simple. We can make it more good by using its properties. These properties allow us to improve the grid’s look and feel.
There are some important features and properties of Datagrid, let us discuss it one by one:
- We can set properties individually at <asp:datagrid> level, or we can do it by group related properties together on the item basis one by one.
- Datagrid is more convenient and then gridview in asp.net.
- The data grid has more column types than the grid view.
- We can change the text-color of a cell, background color, mouse over action.
- ForeColor property is used to change the forecolor of the cell.
- If we want to set a particular background column’s header color, then we can use the headerstyle-backcolor attribute at the root level.
Example:
<asp:DataGrid runat=”server” id= “grid” headerstyle-backcolor= “blue”>
- Also, we can define the <HeaderStyle> child node inside the <asp:DataGrid> declaration and we can set its attribute which is BackColor.
Example:
<asp:DataGrid runat=”server” id=”grid”>
<HeaderStyle BackColor=”Blue”>
</asp:DataGrid>
- Binding Data to the gid is very important.it is composed of the number of data-bindable coloumns.
- By setting the AutoGenerateColumns property to false we can change the behavior. The grid will display columns explicitly which are listed in the columns collection.
- We bind the columns by using tag <columns> in the body of <asp:datagrid> which is server control.
<asp:datagrid runat= “server” id=”grid”>
…
<coloumn>
<asp:boundcolumn runat=”server”>
Datafield=”quantityperunit”
HeaderText="Packaging" />
<asp:boundcolumn runat="server"
DataField="unitprice"
HeaderText="Price"
DataFormatString="{0:c}">
<itemstyle width="100px"
horizontalalign="left" />
</asp:boundcolumn>
/columns>
</asp:datagrid>
- AllowPaging property is used to enable the paging in DataGrid. This property needs to set as true.
- If we want to control the page size, we can use the PageSize property which will control the maximum number of rows that each page must contain.
- The default value for pageSize is set to 10.
- If the page index gets changed, the control files the PageIndexChanged event to the application.
- DataGrid provides PageIndexChanged property due to which programmer easily switches to the new page when the user clicks.
Conclusion
In this article, we have gone through the Datagrid control. I hope you all have a better understanding of how we create Datagrid control and use it. Data grid web server control is a data-bound grip and it is multi-column. we saw that it has many features and very helpful in displaying the scrollable table.
Recommended Articles
This is a guide to ASP.NET Datagrid. Here we discuss How ASP.NET Datagrid is created along with respective examples in detail. You may also have a look at the following articles to learn more –
