Tick checkbox within Gridview where Rows background color is Blue [Archive]

View Full Version : Tick checkbox within Gridview where Rows background color is Blue

skamranj

03-07-2011, 12:13 PM

Hi Everyone,

I have a gridview control with a checkbox control in each row of data.

based on some database value some of the rows in the gridview have a Blue background color.

I need a button using javascript to TICK the checkbox in the all the rows where the background color of the row is BLUE.

is it possible to modify the following Javascript to do the required function on a button click.

// toggle state of the checkbox between selected and not selected!
function toggleCheckBoxes(gvId, isChecked)
{
var checkboxes = getCheckBoxesFrom(document.getElementById(gvId));

for (i = 0; i <= checkboxes.length - 1; i++)
{

checkboxes[i].checked = isChecked;

}

}
// get all the checkboxes from the container control
function getCheckBoxesFrom(gv)
{
var checkboxesArray = new Array();
var inputElements = gv.getElementsByTagName("input");
//var inputElements = gv.getElementsById("chkAll");

if (inputElements.length == 0) null;

for (i = 0; i <= inputElements.length -1; i++)
{
if (isCheckBox(inputElements[i]))
{
if (inputElements[i].disabled == false)
{
checkboxesArray.push(inputElements[i]);
}
}

}

return checkboxesArray;
}
// checks if the elements is a checkbox or not
function isCheckBox(element)
{
return element.type == "checkbox";
}

vwphillips

03-07-2011, 02:37 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.blue {
background-Color:blue;
}

/*]]>*/
</style></head>

<body>
<table id="tst" border="1">
<tr>
<td width="100" ><input type="checkbox" name="" /></td>
</tr>
<tr>
<td><input type="checkbox" name="" /></td>
</tr>
<tr class="blue" >
<td><input type="checkbox" name="" /></td>
</tr>
<tr>
<td><input type="checkbox" name="" /></td>
</tr>
<tr class="blue" >
<td><input type="checkbox" name="" /></td>
</tr>
</table>
<script type="text/javascript">
/*<![CDATA[*/

function Test(id,hex,rgb){
var rows=document.getElementById(id).rows,z0=0,rowcolor;
for (;z0<rows.length;z0++){
rowcolor=zxcSV(rows[z0],'background-Color')
if (rowcolor==hex||rowcolor==rgb){
rows[z0].getElementsByTagName('INPUT')[0].checked='checked';
}
}
}

function zxcSV(obj,par){
if (obj.currentStyle) return obj.currentStyle[par.replace(/-/g,'')];
return document.defaultView.getComputedStyle(obj,null).getPropertyValue(par.toLowerCase());
}

Test('tst','blue','rgb(0, 0, 255)')
/*]]>*/
</script></body>

</html>

skamranj

03-08-2011, 04:57 AM

Hi vwphillips,

I tried your code.

I am getting Object required error when i run the script.

I am calling the function on button onClick event.

My gridview that i need to pass as the parameter is within an

ajaxToolkit:Accordion controls Content section.

the Accordion control is within an UpdatePanle.

I think the script is unable to find the clientID of the gridview within the UpdatePanel.

the button that is calling the function is also in the same update panel.

<input type="button" value="Select all Blue Lines" onClick="Test('gvNC','PowderBlue','rgb(0, 0, 255)')" />