A script that implements the "edit" and "cancel" functions of the DataGrid

<SCRIPT language = "javascript">
Var selectRow = "";
Var selectObject;
Function EditCell (thisObject, type)
{
Var id = thisObject. id;
Var buttonID = "Button" + type;
Var row = id. replace (buttonID ,"");
If (type = 1 & selectRow. length> 0 & selectObject! = Null)
{
EditRow (selectRow, 2, selectObject );
SelectRow = "";
}
If (type = 1) {selectRow = row; selectObject = thisObject;} else {selectRow = ""; selectObject = null ;}
EditRow (row, type, thisObject );
}

Function EditRow (row, type, thisObject)
{
Var visible1 = "none ";
Var visible2 = "inline ";
If (type! = 1)
{
Visible1 = "inline ";
Visible2 = "none ";
}
Var buttonID = "Button" + type;
Var style;
Var I;
For (I = 1; I <8; I ++)
{
Var name1 = row + "Img" + I;
Document. all [name1]. getAttribute ("style"). display = visible1;
Name1 = row + "Text" + I;
Var name2 = row + "Checkbox" + I;
Document. all [name2]. getAttribute ("style"). display = visible2;
If (type! = 1)
{
If (document. all [name1]. value = 1)
Document. all [name2]. checked = true;
Else
Document. all [name2]. checked = false;
}
}

Var tdIndex = thisObject. parentElement. cellIndex;
If (type> 1) tdIndex = tdIndex-1;
ThisObject. parentElement. parentElement. cells [tdIndex]. getAttribute ("style"). display = visible2;

ThisObject. parentElement. colSpan = type;

Var name;
Name = row + buttonID;
Document. all [name]. getAttribute ("style"). display = "none ";

If (type = 1)
{
Document. all [name]. parentElement. parentElement. getAttribute ("style"). backgroundColor = "LightYellow ";
Name = row + "Button2 ";
Document. all [name]. getAttribute ("style"). display = "inline ";
}
Else
{
Document. all [name]. parentElement. parentElement. getAttribute ("style"). backgroundColor = "";
Name = row + "Button1 ";
Document. all [name]. getAttribute ("style"). display = "inline ";
}
}

</SCRIPT>
<Asp: datagrid id = "GridItem" runat = "server" cellPadding = "0" BorderStyle = "Solid" AutoGenerateColumns = "False"
Width = "100%" AllowPaging = "True">
<SelectedItemStyle BackColor = "LightYellow"> </SelectedItemStyle>
<EditItemStyle CssClass = "tdbg-dark" BackColor = "Ivory"> </EditItemStyle>
<ItemStyle HorizontalAlign = "Center" Height = "23px" CssClass = "tdbg"> </ItemStyle>
<HeaderStyle HorizontalAlign = "Center" Height = "25px" CssClass = "summary-title"> </HeaderStyle>
<Columns>
<Asp: BoundColumn DataField = "id" ReadOnly = "True" HeaderText = "Personnel id">
<HeaderStyle Width = "120px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: BoundColumn ReadOnly = "True" HeaderText = "name">
<HeaderStyle Width = "120px"> </HeaderStyle>
</Asp: BoundColumn>
<Asp: TemplateColumn HeaderText = "">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox1 "style =" DISPLAY: none "type =" checkbox "runat =" server ">
<INPUT id = "Text1" type = "text" runat = "server" style = "DISPLAY: none">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "query permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox2 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox2 ">
<INPUT id = "Text2" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text2">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "entry permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox3 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox3 ">
<INPUT id = "Text3" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text3">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "Modify permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox4 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox4 ">
<INPUT id = "Text4" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text4">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "delete permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox5 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox5 ">
<INPUT id = "Text5" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text5">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "Export Permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox6 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox6 ">
<INPUT id = "Text6" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text6">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: TemplateColumn HeaderText = "Import Permission">
<HeaderStyle Width = "60px"> </HeaderStyle>
<ItemTemplate>
<INPUT id =" Checkbox7 "style =" DISPLAY: none "type =" checkbox "runat =" server "NAME =" Checkbox7 ">
<INPUT id = "Text7" type = "text" runat = "server" style = "DISPLAY: none" NAME = "Text7">
</ItemTemplate>
</Asp: TemplateColumn>
<Asp: ButtonColumn Text = "save" HeaderText = "operation" CommandName = "cmdSave">
<ItemStyle Font-Size = "10pt"> </ItemStyle>
</Asp: ButtonColumn>
<Asp: TemplateColumn>
<ItemTemplate>
<INPUT id = "Button1" style = "cursor: hand; WIDTH: 35px; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
Onclick = "EditCell (this, 1);" type = "button" value = "edit" runat = "server"> <INPUT id = "Button2" style = "cursor: hand; DISPLAY: none; COLOR: blue; BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BACKGROUND-COLOR: transparent; TEXT-DECORATION: underline; BORDER-BOTTOM-STYLE: none"
Onclick = "EditCell (this, 2);" type = "button" value = "cancel" runat = "server">
</ItemTemplate>
</Asp: TemplateColumn>
</Columns>
<PagerStyle NextPageText = "Next" PrevPageText = "previous"> </PagerStyle>
</Asp: datagrid>