Edit a separate cell in the GridView for a mouse click

Original address: http://www.codeproject.com/aspnet/EditGridviewCells.asp
[original source DOWNLOAD]
[translator changed after source download]

Introduction
ASP. NET's GridView control allows you to edit the data row by setting its Editindex property, at which point the entire data row is in edit mode. If you use the DropDownList control in some columns of edititemtemplate, you may not want the entire data row to be in edit mode. Because, if each DropDownList control has many options, all the options for loading all the DropDownList controls at a time can cause the page to perform slowly.

Additionally, editing for each individual cell is better than editing the entire row of data if the editing mode of your data row requires more space. Here, I'll demonstrate how to implement such a feature and how to handle event validation (validation). The


edits a separate GridView cell.


The GridView I am demonstrating has an invisible Asp:buttonfield control, which is in the first column of the GridView named "Singleclick". It is used to add a click event to the data row of the GridView.
< Columns >                 &NBSP
     < asp:buttonfield  Text = "Singleclick"  commandname = "Singleclick"  visible = "False"  />
</Columns >

The ItemTemplate of each of the other columns has a visible label control and an invisible TextBox or DropDownList control. For convenience, we call the label a display control, a TextBox or DropDownList as an edit control.
< Asp:templatefield HeaderText = "Task" >
< ItemTemplate >
< Asp:label ID = "Descriptionlabel" runat = "server" Text = ' <%# Eval ("Description")% > ' > </asp:label & Gt
< Asp:textbox ID = "Description" runat = "server" Text = ' <%# Eval ("Description")% > ' width= ' 175px "visible=" f Alse "> </asp:textbox >
</ItemTemplate >
</Asp:templatefield >

The idea here is to display the data with a display control, set the display control's Visible property to False and set the edit control's Visible property to True when the display control contained in the cell is clicked. There is no use of edititemtemplat here.

Loops within the RowDataBound event to increase the Click event for each cell in each data row. Use the index of the cell in the data row as the event argument, so that when the click event is triggered by the cell, we can see exactly which cell was clicked.
protected void GridView1_RowDataBound (object sender, GridViewRowEventArgs e)
{
if (E.row.rowtype = = Datacontrolrowtype.datarow)
{
Get the LinkButton control from the first cell
LinkButton _singleclickbutton = (LinkButton) e.row.cells[0]. Controls[0];
Returns a String representing the JavaScript call to the postback function that contains the ID and event arguments of the target control
String _jssingle = Clientscript.getpostbackclienthyperlink (_singleclickbutton, "");

Add an event to each editable cell
for (int columnindex = _firsteditcellindex; columnindex < e.row.cells.count; columnindex++)
{
To increase the column index as an event parameter
String js = _jssingle.insert (_jssingle.length-2, columnindex.tostring ());
Add onclick event to cell
E.row.cells[columnindex]. attributes["onclick"] = JS;
Add pointer style to cell when mouse over
E.row.cells[columnindex]. attributes["style"] + = "cursor:pointer;cursor:hand;";
}
}
}

Read the command arguments and event arguments within the Rowcommand event. This will tell us the index of the selected row and column.
int _rowindex = Int. Parse (E.commandargument.tostring ());
int _columnindex = Int. Parse (request.form["__eventargument"]);

Because you know the index of the selected row and column, you can set a separate cell to edit mode by setting the display control's visible to false and editing the control's visible to true. Then remove the clicked event for the selected cell by clearing the cell's properties.
    //  Get the display control for the selected cell and set it not visible
    control _ displaycontrol  =  _gridview.rows[_rowindex]. Cells[_columnindex]. controls[1]; 
    _displayControl.Visible  =   false;
    /  Get the edited control of the selected cell and set it to visible
    Control _editControl  =  _gridview.rows[_rowindex]. Cells[_columnindex]. controls[3];
    _editControl.Visible  =   true;
    //  Clear selected cell properties to remove Click event
    _gridview.rows[_rowindex]. Cells[_columnindex]. Attributes.clear ();

Some of the code below is used to set focus to the edit control after the postback server, and if the edit control is DropDownList, its selectedvalue is set to display the value of the control, if the edit control is a textbox, So in order to be ready for editing, the text will be selected.
    //  set focus to selected edit Control
     Clientscript.registerstartupscript (GetType (),  "SetFocus",  
          "<script>document.getelementbyid" ("  +  _editControl.ClientID  +  "). Focus ( );</script> ");
    //  If the edit control is DropDownList
    //  SelectedValue set to display the value of the control
     if   (_editcontrol  is  DropDownList  & &  _displayControl  is  label