Know About Web Technologies: Gridview

Sunday, November 22, 2015

Gridview in asp.net

Grid View Control:

It is used for data binding in tabular format.

<asp:gridview ID="Gridview1" runat="server">

<asp:BoundField DataField="" HeaderText ="" />

<asp:TemplateField>

</asp:TemplateField>

</Columns>

</asp:gridview>

There are multiple section in Gridview in <Columns> section:

<asp:BoundField />

<asp:TemplateField />

<asp:ButtonField />

<asp:CheckBoxField />

<asp:HyperLinkField />

<asp:CommandField />

<asp:ImageField />

1. In BoundField, We provide column name in DataField. We set header display text in HeaderText.

Example:

<asp:BoundField DataField="EmpName" HeaderText="Employee Name"

FooterStyle-Font-Bold="true"

ItemStyle-HorizontalAlign="right"

HeaderStyle-HorizontalAlign="right"

HeaderStyle-Width="300"

FooterText ="Employee Name"/>

2. Template Field is used for display column in customised way. In TemplateField, We can set any numbers of controls. It has three main section-

a. <HeaderTemplate></HeaderTemplate>

In HeaderTemplate, we can do all custom setting for header.

For header style for a particular column we use <HeaderStyle />

b. <ItemTemplate></ItemTemplate>

In ItemTemplate, we can do all setting related to the data shown.

For item style for a particular column we use <ItemStyle />

c. <FooterTemplate></FooterTemplate>

In FooterTemplate, We can do all setting that will come in footer of the table (Gridview).

Example :

<asp:TemplateField>

<HeaderTemplate>Address</HeaderTemplate>

<asp:Label ID="lblAddress" runat="server" Text='<%# Bind("Address") %>'></asp:Label>

</ItemTemplate>

<FooterTemplate>Address</FooterTemplate>

</asp:TemplateField>

Note 1 : Footer will shown only if we have set ShowFooter="true" in Gridview properties.

Note 2 : AllowPaging="true" is used to show paging in gridview. Set PageSize="10" value for change default PageSize (10) in Gridview properties.

Note 3 : Set AutoGenerateColumns="false" , when we want to define gridview columns in customised way.

Note 4 : For databind in a control in design (.aspx) page we use following method Eval, Bind method. Note the "<%# ....... %>" it is used for databind in design page.

Example:

<asp:Label ID="lblAddress" runat="server" Text='<%# Eval("Address") %>' ></asp:Label>

<asp:Label ID="lblAddress" runat="server" Text='<%# Bind("Address") %>' ></asp:Label>

Sunday, January 18, 2015

paging in asp.net gridview

Paging in asp.net gridview:

Question: How to bind gridview in asp.net and apply paging.

Answer: Here is an example of how to bind gridview.

Create a website and add a page. Suppose there is Default.aspx and its code behind page is Default.aspx.cs

In Default.aspx page add a gridview control and suppose its id is “grdEmployeeList”.

See below code:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

<asp:GridView ID="grdEmployeeList" runat="server" BackColor="White" AutoGenerateColumns="False"

BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3" AllowPaging="True" PageSize="5"

EnableModelValidation="True" GridLines="Vertical" PagerSettings-Position="Bottom"

onpageindexchanging="grdEmployeeList_PageIndexChanging">

<asp:BoundField DataField="EMP_ID" HeaderText="Employee ID" />

<asp:BoundField DataField="EMP_NAME" HeaderText="Employee Name" />

<asp:BoundField DataField="DEPARTMENT_NAME" HeaderText="Department Name" />

<asp:BoundField DataField="SALARY" HeaderText="Salary" />

<asp:BoundField DataField="JOINING_DATE" HeaderText="Joining Date" />

</Columns>

</asp:GridView>

</div>

</form>

</body>

</html>

Here paging will be shown by AllowPaging="True" and PageSize="5". Default pagesize is 10. You can change page size whatever you want. Onpageindexchanging event is used for applying paging the gridview.

In Default.aspx.cs page write following page.

using System;

using System.Data;

using System.Data.SqlClient;

using System.Web.UI;

using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page

{

SqlConnection conn = new SqlConnection(@"Data Source=SHASHI-PC\SQLSERVER2008;Initial Catalog=TestDB;User ID=testdb_user;Password=testdb_pass");

//change connection string as per your choice like Data Source , Database name (Initial Catalog), User ID and password of database.

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

BindEmplyeeList();//bind gridview on pageload for employee list

}

protected void grdEmployeeList_PageIndexChanging(object sender, GridViewPageEventArgs e)

{

if (e.NewPageIndex >= 0)

{

grdEmployeeList.PageIndex = e.NewPageIndex;//change pageindex of the grid

BindEmplyeeList();

}

//bind gridview from database

private void BindEmplyeeList()

{

SqlDataAdapter sda = new SqlDataAdapter("Select EMP_ID , EMP_NAME , DEPARTMENT_NAME, SALARY, JOINING_DATE From MST_EMPLOYEE_MASTER", conn);

DataTable dtEmp = new DataTable();

sda.Fill(dtEmp);

grdEmployeeList.DataSource = dtEmp;

grdEmployeeList.DataBind();

}

Result:

=================================================================

Hope you have enjoyed with this article. Please write your comments for it.

=================================================================