Use checkbox to edit the gridview

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 );

}

</Script>

Source codePackage download

Take a look at the effect in the following animation.