EditCommandColumn Class
A special column type for the DataGrid control that contains the Edit command buttons for editing data items in each row.
For a list of all members of this type, see EditCommandColumn Members.
System.Object
System.Web.UI.WebControls.DataGridColumn
System.Web.UI.WebControls.EditCommandColumn
[Visual Basic] Public Class EditCommandColumn Inherits DataGridColumn [C#] public class EditCommandColumn : DataGridColumn [C++] public __gc class EditCommandColumn : public DataGridColumn [JScript] public class EditCommandColumn extends DataGridColumn
Thread Safety
Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.
Remarks
Use the EditCommandColumn class to create a special column for the DataGrid control that contains the Edit, Update, and Cancel command buttons for each data row in the grid. These buttons allow you to edit the values of a row in the DataGrid control.
If no row is selected, an Edit command button displays in the EditCommandColumn for each data row in the DataGrid control. When the Edit button for an item is clicked, the EditCommand event is raised and the Edit button is replaced with the Update and Cancel command buttons. You need to provide code to handle this event. A typical event handler sets the EditItemIndex property to the selected row and then rebinds the data to the DataGrid control.
Note You must provide values for the CancelText, EditText, and UpdateText properties. Otherwise, the associated command buttons will not appear in the EditCommandColumn.
The buttons in the EditCommandColumn can be set to display as hyperlinks or push buttons by setting the ButtonType property.
Clicking the Update or Cancel command button raises the UpdateCommand or CancelCommand event, respectively. You need to provide code to handle these events.
Note Validation on the page is not performed when a button in the EditCommandColumn is clicked, except for the Update command button.
A typical handler for the UpdateCommand event updates the data, sets the EditItemIndex property to -1 (to deselect the item), and then rebinds the data to the DataGrid control.
A typical handler for the CancelCommand event sets the EditItemIndex property to -1 (to deselect the item) and then rebinds the data to the DataGrid control.
CAUTION Text is not HTML encoded before it is displayed in the DataGrid control. This makes it possible to embed script within HTML tags in the text. Before updating any field in the DataGrid control, be sure to validate the value to reduce security vulnerabilities.
Example
[Visual Basic, C#] The following example demonstrates how to add an EditCommandColumn to a DataGrid control.
[Visual Basic] <%@ Page Language="VB" AutoEventWireup="True" %> <%@ Import Namespace="System.Data" %> <html> <script runat="server"> ' The Cart and CartView objects temporarily store the data source ' for the DataGrid control while the page is being processed. Dim Cart As DataTable = New DataTable() Dim CartView As DataView Sub Page_Load(sender As Object, e As EventArgs) ' With a database, use an select query to retrieve the data. Because ' the data source in this example is an in-memory DataTable, retrieve ' the data from session state if it exists; otherwise create the data ' source. GetSource() ' The DataGrid control maintains state between posts to the server; ' it only needs to be bound to a data source the first time the page ' is loaded or when the data source is updated. If Not IsPostBack Then BindGrid() End If End Sub Sub ItemsGrid_Edit(sender As Object, e As DataGridCommandEventArgs) ' Set the EditItemIndex property to the index of the item clicked ' in the DataGrid control to enable editing for that item. Be sure ' to rebind the DateGrid to the data source to refresh the control. ItemsGrid.EditItemIndex = e.Item.ItemIndex BindGrid() End Sub Sub ItemsGrid_Cancel(sender As Object, e As DataGridCommandEventArgs) ' Set the EditItemIndex property to -1 to exit editing mode. ' Be sure to rebind the DateGrid to the data source to refresh ' the control. ItemsGrid.EditItemIndex = -1 BindGrid() End Sub Sub ItemsGrid_Update(sender As Object, e As DataGridCommandEventArgs) ' Retrieve the text boxes that contain the values to update. ' For bound columns, the edited value is stored in a TextBox. ' The TextBox is the 0th control in a cell's Controls collection. ' Each cell in the Cells collection of a DataGrid item represents ' a column in the DataGrid control. Dim qtyText As TextBox = CType(e.Item.Cells(3).Controls(0), TextBox) Dim priceText As TextBox = CType(e.Item.Cells(4).Controls(0), TextBox) ' Retrieve the updated values. Dim item As String = e.Item.Cells(2).Text Dim qty As String = qtyText.Text Dim price As String = priceText.Text Dim dr As DataRow ' With a database, use an update command to update the data. ' Because the data source in this example is an in-memory ' DataTable, delete the old row and replace it with a new one. ' Remove the old entry and clear the row filter. CartView.RowFilter = "Item='" & item & "'" If CartView.Count > 0 Then CartView.Delete(0) End If CartView.RowFilter = "" ' *************************************************************** ' Insert data validation code here. Be sure to validate the ' values entered by the user before converting to the appropriate ' data types and updating the data source. ' *************************************************************** ' Add the new entry. dr = Cart.NewRow() dr(0) = Convert.ToInt32(qty) dr(1) = item ' If necessary, remove the '$' character from the price before ' converting it to a Double. If price.Chars(0) = "$" Then dr(2) = Convert.ToDouble(price.Substring(1)) Else dr(2) = Convert.ToDouble(price) End If Cart.Rows.Add(dr) ' Set the EditItemIndex property to -1 to exit editing mode. ' Be sure to rebind the DateGrid to the data source to refresh ' the control. ItemsGrid.EditItemIndex = -1 BindGrid() End Sub Sub BindGrid() ' Set the data source and bind to the Data Grid control. ItemsGrid.DataSource = CartView ItemsGrid.DataBind() End Sub Sub GetSource() ' For this example, the data source is a DataTable that is stored ' in session state. If the data source does not exist, create it; ' otherwise, load the data. If Session("ShoppingCart") Is Nothing Then ' Create the sample data. Dim dr As DataRow ' Define the columns of the table. Cart.Columns.Add(new DataColumn("Qty", GetType(Int32))) Cart.Columns.Add(new DataColumn("Item", GetType(String))) Cart.Columns.Add(new DataColumn("Price", GetType(Double))) ' Store the table in session state to persist its values ' between posts to the server. Session("ShoppingCart") = Cart ' Populate the DataTable with sample data. Dim i As Integer For i = 1 To 9 dr = Cart.NewRow() If (i Mod 2) <> 0 Then dr(0) = 2 Else dr(0) = 1 End If dr(1) = "Item " & i.ToString() dr(2) = (1.23 * (i + 1)) Cart.Rows.Add(dr) Next i Else ' Retrieve the sample data from session state. Cart = CType(Session("ShoppingCart"), DataTable) End If ' Create a DataView and specify the field to sort by. CartView = New DataView(Cart) CartView.Sort="Item" Return End Sub Sub ItemsGrid_Command(sender As Object, e As DataGridCommandEventArgs) Select (CType(e.CommandSource, LinkButton)).CommandName Case "Delete" DeleteItem(e) ' Add other cases here, if there are multiple ButtonColumns in ' the DataGrid control. Case Else ' Do nothing. End Select End Sub Sub DeleteItem(e As DataGridCommandEventArgs) ' e.Item is the table row where the command is raised. For bound ' columns, the value is stored in the Text property of a TableCell. Dim itemCell As TableCell = e.Item.Cells(2) Dim item As String = itemCell.Text ' Remove the selected item from the data source. CartView.RowFilter = "Item='" & item + "'" If CartView.Count > 0 Then CartView.Delete(0) End If CartView.RowFilter = "" ' Rebind the data source to refresh the DataGrid control. BindGrid() End Sub </script> <body> <form runat="server"> <h3>DataGrid Editing Example</h3> <asp:DataGrid id="ItemsGrid" BorderColor="black" BorderWidth="1" CellPadding="3" OnEditCommand="ItemsGrid_Edit" OnCancelCommand="ItemsGrid_Cancel" OnUpdateCommand="ItemsGrid_Update" OnItemCommand="ItemsGrid_Command" AutoGenerateColumns="false" runat="server"> <HeaderStyle BackColor="#aaaadd"> </HeaderStyle> <Columns> <asp:EditCommandColumn EditText="Edit" CancelText="Cancel" UpdateText="Update" HeaderText="Edit item"> <ItemStyle Wrap="False"> </ItemStyle> <HeaderStyle Wrap="False"> </HeaderStyle> </asp:EditCommandColumn> <asp:ButtonColumn HeaderText="Delete item" ButtonType="LinkButton" Text="Delete" CommandName="Delete"/> <asp:BoundColumn HeaderText="Item" ReadOnly="True" DataField="Item"/> <asp:BoundColumn HeaderText="Quantity" DataField="Qty"/> <asp:BoundColumn HeaderText="Price" DataField="Price" DataFormatString="{0:c}"/> </Columns> </asp:DataGrid> </form> </body> </html> [C#] <%@ Page Language="C#" AutoEventWireup="True" %> <%@ Import Namespace="System.Data" %> <html> <script runat="server"> // The Cart and CartView objects temporarily store the data source // for the DataGrid control while the page is being processed. DataTable Cart = new DataTable(); DataView CartView; void Page_Load(Object sender, EventArgs e) { // With a database, use an select query to retrieve the data. Because // the data source in this example is an in-memory DataTable, retrieve // the data from session state if it exists; otherwise, create the data // source. GetSource(); // The DataGrid control maintains state between posts to the server; // it only needs to be bound to a data source the first time the page // is loaded or when the data source is updated. if (!IsPostBack) { BindGrid(); } } void ItemsGrid_Edit(Object sender, DataGridCommandEventArgs e) { // Set the EditItemIndex property to the index of the item clicked // in the DataGrid control to enable editing for that item. Be sure // to rebind the DateGrid to the data source to refresh the control. ItemsGrid.EditItemIndex = e.Item.ItemIndex; BindGrid(); } void ItemsGrid_Cancel(Object sender, DataGridCommandEventArgs e) { // Set the EditItemIndex property to -1 to exit editing mode. // Be sure to rebind the DateGrid to the data source to refresh // the control. ItemsGrid.EditItemIndex = -1; BindGrid(); } void ItemsGrid_Update(Object sender, DataGridCommandEventArgs e) { // Retrieve the text boxes that contain the values to update. // For bound columns, the edited value is stored in a TextBox. // The TextBox is the 0th control in a cell's Controls collection. // Each cell in the Cells collection of a DataGrid item represents // a column in the DataGrid control. TextBox qtyText = (TextBox)e.Item.Cells[3].Controls[0]; TextBox priceText = (TextBox)e.Item.Cells[4].Controls[0]; // Retrieve the updated values. String item = e.Item.Cells[2].Text; String qty = qtyText.Text; String price = priceText.Text; DataRow dr; // With a database, use an update command to update the data. // Because the data source in this example is an in-memory // DataTable, delete the old row and replace it with a new one. // Remove the old entry and clear the row filter. CartView.RowFilter = "Item='" + item + "'"; if (CartView.Count > 0) { CartView.Delete(0); } CartView.RowFilter = ""; // *************************************************************** // Insert data validation code here. Be sure to validate the // values entered by the user before converting to the appropriate // data types and updating the data source. // *************************************************************** // Add the new entry. dr = Cart.NewRow(); dr[0] = Convert.ToInt32(qty); dr[1] = item; // If necessary, remove the '$' character from the price before // converting it to a Double. if(price[0] == '$') { dr[2] = Convert.ToDouble(price.Substring(1)); } else { dr[2] = Convert.ToDouble(price); } Cart.Rows.Add(dr); // Set the EditItemIndex property to -1 to exit editing mode. // Be sure to rebind the DateGrid to the data source to refresh // the control. ItemsGrid.EditItemIndex = -1; BindGrid(); } void BindGrid() { // Set the data source and bind to the Data Grid control. ItemsGrid.DataSource = CartView; ItemsGrid.DataBind(); } void GetSource() { // For this example, the data source is a DataTable that is stored // in session state. If the data source does not exist, create it; // otherwise, load the data. if (Session["ShoppingCart"] == null) { // Create the sample data. DataRow dr; // Define the columns of the table. Cart.Columns.Add(new DataColumn("Qty", typeof(Int32))); Cart.Columns.Add(new DataColumn("Item", typeof(String))); Cart.Columns.Add(new DataColumn("Price", typeof(Double))); // Store the table in session state to persist its values // between posts to the server. Session["ShoppingCart"] = Cart; // Populate the DataTable with sample data. for (int i = 1; i <= 9; i++) { dr = Cart.NewRow(); if (i % 2 != 0) { dr[0] = 2; } else { dr[0] = 1; } dr[1] = "Item " + i.ToString(); dr[2] = (1.23 * (i + 1)); Cart.Rows.Add(dr); } } else { // Retrieve the sample data from session state. Cart = (DataTable)Session["ShoppingCart"]; } // Create a DataView and specify the field to sort by. CartView = new DataView(Cart); CartView.Sort="Item"; return; } void ItemsGrid_Command(Object sender, DataGridCommandEventArgs e) { switch(((LinkButton)e.CommandSource).CommandName) { case "Delete": DeleteItem(e); break; // Add other cases here, if there are multiple ButtonColumns in // the DataGrid control. default: // Do nothing. break; } } void DeleteItem(DataGridCommandEventArgs e) { // e.Item is the table row where the command is raised. For bound // columns, the value is stored in the Text property of a TableCell. TableCell itemCell = e.Item.Cells[2]; string item = itemCell.Text; // Remove the selected item from the data source. CartView.RowFilter = "Item='" + item + "'"; if (CartView.Count > 0) { CartView.Delete(0); } CartView.RowFilter = ""; // Rebind the data source to refresh the DataGrid control. BindGrid(); } </script> <body> <form runat="server"> <h3>DataGrid Editing Example</h3> <asp:DataGrid id="ItemsGrid" BorderColor="black" BorderWidth="1" CellPadding="3" OnEditCommand="ItemsGrid_Edit" OnCancelCommand="ItemsGrid_Cancel" OnUpdateCommand="ItemsGrid_Update" OnItemCommand="ItemsGrid_Command" AutoGenerateColumns="false" runat="server"> <HeaderStyle BackColor="#aaaadd"> </HeaderStyle> <Columns> <asp:EditCommandColumn EditText="Edit" CancelText="Cancel" UpdateText="Update" HeaderText="Edit item"> <ItemStyle Wrap="False"> </ItemStyle> <HeaderStyle Wrap="False"> </HeaderStyle> </asp:EditCommandColumn> <asp:ButtonColumn HeaderText="Delete item" ButtonType="LinkButton" Text="Delete" CommandName="Delete"/> <asp:BoundColumn HeaderText="Item" ReadOnly="True" DataField="Item"/> <asp:BoundColumn HeaderText="Quantity" DataField="Qty"/> <asp:BoundColumn HeaderText="Price" DataField="Price" DataFormatString="{0:c}"/> </Columns> </asp:DataGrid> </form> </body> </html>
[C++, JScript] No example is available for C++ or JScript. To view a Visual Basic or C# example, click the Language Filter button
in the upper-left corner of the page.
Requirements
Namespace: System.Web.UI.WebControls
Platforms: Windows 2000, Windows XP Professional, Windows Server 2003 family
Assembly: System.Web (in System.Web.dll)
See Also
EditCommandColumn Members | System.Web.UI.WebControls Namespace | DataGrid | EditItemIndex | EditCommand | UpdateCommand | CancelCommand