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.

Code:

// 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

Code:

<!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.

HTML Code:

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

Thread: Tick checkbox within Gridview where Rows background color is Blue

Thread Tools

Search Thread

Tick checkbox within Gridview where Rows background color is Blue

Bookmarks

Bookmarks

Posting Permissions