Edit GridView Using CheckBoxes
Sometime back I wrote a post about how to convert the whole GridView control into the edit mode with a single button click. You can check out the post here. One gentleman posted that how he can edit only the selected rows. This selection is based on selecting the Checkboxes which resides inside the GridView control.
First, lets see the GridView code:
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="editMode(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Category Name">
<ItemTemplate>
<asp:TextBox ID="txtCategoryName" BorderWidth="0px" CssClass="textbox" runat="server"
Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now, let's check out the JavaScript code which is used to enable and disable the Textboxes inside the row.
<
script language="javascript" type="text/javascript"> disableGridViewTextBoxes();
// make all the input elements hidden
function
disableGridViewTextBoxes()
{
var
gvControl = document.getElementById(
"gvCategories");
var
inputElements = gvControl.getElementsByTagName(
"INPUT");
for
(i=0;i<inputElements.length;i++)
{
if(isTextBox(inputElements[i]))
{
inputElements[i].disabled = true;
}
}
}
function
isTextBox(obj)
{
return obj.type == 'text';
}
function
editMode(obj)
{
var rowObject = obj.parentElement.parentElement;
var inputElements = getElementsByTagName(rowObject,"INPUT");
if(obj.checked)
{
showElements(inputElements,"INPUT","text");
}
else
{
hideElements(inputElements,"text");
}
}
function
showElements(list, tagName,type)
{
for(i=0;i<list.length;i++)
{
if(isTypeOf(list[i],"text"))
{
list[i].disabled = false;
list[i].focus();
list[i].select();
}
}
}
function
isTypeOf(obj,type)
{
return obj.type == type;
}
function
hideElements(list, type)
{
for(i=0; i<list.length;i++)
{
if(isTypeOf(list[i],type))
{
list[i].disabled = true;
}
}
}
function
getElementsByTagName(obj,tagName)
{
return obj.getElementsByTagName(tagName);
}
Take a look at the effect in the following animation.
