If we wish to restrict the information that appears within our GridView, we
can select the columns we want to display by making a few simple modifications.
One of the properties available to GridView is AutoGenerateColumns, which
is set to True by default. If we want to name the columns that our GridView displays
manually, we must set this property to False.
If we set this property to False and test it in the browser, we’ll find that
the grid doesn’t display any more. The reason for this is simple: as the GridView
can’t generate its own column headers, we must manually specify the columns that
we want displayed.
Notice that each column that we want to display is created using a BoundField
control inside a set of <Columns> and </Columns> tags. Each BoundField control
has a DataField property, which specifies the name of the column, and a HeaderText
property, which sets the name of the column as we want to display it to the user.
We’ve already made quite a few changes to the display of our GridView. The next
step will be to allow users to select any of the rows in the GridView so they can
view more information about the listed employees.
We can create several types of columns in a GridView in addition to the BoundField
columns we’ve already seen. For instance, we could create a ButtonField column,
which displays a button in each row. Here’s a complete list of column controls and
their descriptions:
1) BoundField
The BoundField provides flexibility in presentation by
allowing we to specify which columns will appear within the GridView.
When the grid enters edit mode, this field renders itself as an editable text box.
2) ButtonField
Use the ButtonField to display a clickable button for each row within the
GridView. When it’s clicked, the button triggers a configurable event that we
can handle within our code to respond to the user’s action. A button can trigger
the following event types: Cancel, Delete, Edit, Select, and Update.
3) CheckBoxField
The CheckBoxField displays a checkbox in each row, allowing we to easily
present Boolean data in the display.
4) CommandField
The CommandField column automatically generates a ButtonField in our grid.
The actions performed by these buttons depend on the grid’s current state. For
example, if CommandField is set to generate Edit buttons, it will display an Edit
button when the grid is in non-editable mode, and will display Update and
Cancel buttons when the grid is being edited.
5) HyperLinkField
Use the HyperLinkField to display a clickable link within the GridView. This
link simply acts as a hyperlink to a URL; it raises no server-side events.
6) ImageField
This control displays an image inside our grid.
7) TemplateField
Use the TemplateField to display markup within the GridView.
Code: GridView04.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridView04.aspx.cs"
Inherits="LearnAsp.Net.ControlDemo.GridView.GridView04" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>
Employee Details</h1>
<asp:GridView ID="grid" runat="server" AutoGenerateColumns="false"
CellPadding="4" OnSelectedIndexChanged="grid_SelectedIndexChanged"
ForeColor="#333333">
<Columns>
<asp:BoundField DataField="empno" HeaderText="Employee ID" />
<asp:BoundField DataField="ename" HeaderText="Name" />
<asp:TemplateField HeaderText="Designation">
<HeaderStyle Width="60px" HorizontalAlign="Center" />
<ItemTemplate >
<asp:Label ID="lblDesig" Text='<%#Eval("job")%>' runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="sal" HeaderText="Salary" />
<asp:ButtonField CommandName="Select" Text="Select" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<EditRowStyle BackColor="#999999" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
<br />
<asp:Label ID="lblSelectRow" runat="server" />
</div>
</form>
</body>
</html>
Code: GridView04.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.OracleClient;
using System.Data;
using System.Configuration;
namespace LearnAsp.Net.ControlDemo.GridView
{
public partial class GridView04 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
GridBind();
}
protected void GridBind()
{
String query = " select * from emp ";
OracleConnection objConn;
OracleCommand objCmd;
// Retrieve Details from the DB
string strConn = ConfigurationManager.ConnectionStrings["LearnAsp"].ToString();
objConn = new OracleConnection(strConn);
objCmd = new OracleCommand(query, objConn);
DataTable dtOfficerList = new DataTable();
objConn.Open();
OracleDataAdapter oda = new OracleDataAdapter(objCmd);
oda.Fill(dtOfficerList);
objConn.Close();
if (dtOfficerList.Rows.Count > 0)
{
grid.DataSource = dtOfficerList;
grid.DataBind();
}
else
{
grid.DataSource = null;
grid.DataBind();
}
}
protected void grid_SelectedIndexChanged(object sender, EventArgs e)
{
int selectedRowIndex;
selectedRowIndex = grid.SelectedIndex;
GridViewRow row = grid.Rows[selectedRowIndex];
string name = row.Cells[1].Text;
lblSelectRow.Text = "You selected " + name + ".";
}
}
}
Output:
No comments:
Post a Comment
Please do not enter any spam link in the comment box.