Using control in DataGrid is a need in project. But the main task is that how we will design control with DataGrid. Here in this article I am showing that how we can use control like as Button, TextBox in DataGrid. First of all design these button, textbox or other control. Let see this by a simple programme.
Here I am using a DataGrid to show some record. Here phone number, I am showing in a TextBox, and I also used a edit button on click the value of corresponding TextBox will update.
The aspx code for this is:
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Control(Button , TextBox) In a DataGrid</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataGrid ID="gridedit" runat="server" Width="440px" OnItemCommand="Grid_ItemCommand"
DataKeyField="id" BorderStyle="Ridge" GridLines="None" BorderWidth="2px" BorderColor="White" BackColor="White"
AllowSorting="True" PagerStyle-HorizontalAlign="Center" HorizontalAlign="Left" OnPageIndexChanged="gridedit_PageIndexChanged"
Height="267px" PageSize=5 AllowPaging="true" AutoGenerateColumns="false" SelectedItemStyle-Width="100px">
<FooterStyle ForeColor="Black" BackColor="#C6C3C6"></FooterStyle>
<HeaderStyle Font-Bold="True" ForeColor="#FFFFFF" BackColor="#A53A6A"></HeaderStyle>
<FooterStyle BackColor="beige" />
<PagerStyle Font-Bold="true" Mode=NumericPages Font-Underline="true"/>
<Columns>
<asp:BoundColumn DataField=id HeaderText="ID" Visible="false">
<ItemStyle BackColor="graytext" />
<HeaderStyle BackColor="graytext" />
</asp:BoundColumn>
<asp:BoundColumn DataField=name HeaderText="Name">
<ItemStyle BackColor=GhostWhite />
</asp:BoundColumn>
<asp:BoundColumn DataField=F_name HeaderText="F_Name">
<ItemStyle BackColor=GhostWhite />
</asp:BoundColumn>
<asp:BoundColumn DataField=l_name HeaderText="L_Name">
<ItemStyle BackColor=GhostWhite />
</asp:BoundColumn>
<asp:BoundColumn DataField=City HeaderText="City">
<ItemStyle BackColor=GhostWhite />
</asp:BoundColumn>
<asp:BoundColumn DataField=State HeaderText="State">
<ItemStyle BackColor=GhostWhite />
</asp:BoundColumn>
<asp:TemplateColumn HeaderText="Phone"><ItemStyle BackColor=GhostWhite />
<ItemTemplate>
<asp:TextBox ID="txtPhone" runat="server" Width="81px" Text='<%#DataBinder.Eval(Container.DataItem,"Phoneno")%>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemTemplate>
<asp:Button ID="btn_Phoneupdate" CommandName="Update" runat="server" Text="Edit" />
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</div>
</form>
</body>
</html>
The aspx.cs code is:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlDataAdapter da;
DataSet ds = new DataSet();
SqlConnection con;
SqlCommand cmd = new SqlCommand();
string connect = "Data Source=MCN0100;Initial Catalog=RecordEdit; uid=sa; Pwd=";
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
Binddata();
}
}
//Here we Bind the data
public void Binddata()
{
con = new SqlConnection(connect);
cmd.CommandText = "select * from record order by id Asc";
cmd.Connection = con;
da = new SqlDataAdapter(cmd);
da.Fill(ds);
con.Open();
cmd.ExecuteNonQuery();
gridedit.DataSource = ds;
gridedit.DataBind();
con.Close();
}
// For Paging
public void gridedit_PageIndexChanged(object source, DataGridPageChangedEventArgs e)
{
gridedit.CurrentPageIndex = e.NewPageIndex;
Binddata();
}
public void Grid_ItemCommand(object source, DataGridCommandEventArgs e)
{
if (e.CommandName == "Update")
{
con = new SqlConnection(connect);
cmd.CommandText = "Update record set Phoneno=@Phoneno where id=@id";
TextBox txt=(TextBox)e.Item.Cells[6].FindControl("txtPhone");
cmd.Parameters.Add("@Phoneno", SqlDbType.NVarChar).Value =Int64.Parse(txt.Text);
cmd.Parameters.Add("@id", SqlDbType.Int).Value = gridedit.DataKeys[e.Item.ItemIndex];
cmd.Connection = con;
cmd.Connection.Open();
cmd.ExecuteNonQuery();
cmd.Connection.Close();
gridedit.EditItemIndex = -1;
Binddata();
}
}
}
When user run the application then the window will become look like as:
Figure 1.
If I edit the phone number.
Figure 2.