Link to home
Start Free TrialLog in
Avatar of FastEddie___
FastEddie___

asked on

Checkbox and Background Color Change within a Datagrid.

I have seen a few articles on how to change the background color of a row within a datagrid by clicking a button but I need to do the opposite.

I would like to highlight the background of a row and put a checkmark in the checkbox within the row of a datagrid when the user clicks on any of the cells within that row.

Can anybody give me some direction on how to accomplish this?

I would like to use CSS and JS if possible. The datagrid I have is being populated by a database call.

Here is some code I have so far.

the javascript function for the checkbox:
---------------------------------------------------------------------------
function SelectAllCheckboxes(spanChk)
{
      // Added as ASPX uses SPAN for checkbox
      var oItem = spanChk.children;
      var theBox=(spanChk.type=="checkbox")?spanChk:spanChk.children.item[0];
      xState=theBox.checked;

      elm=theBox.form.elements;
      for(i=0;i<elm.length;i++)
      if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)
      {
            if(elm[i].checked!=xState)
            elm[i].click();
      }
}                  
------------------------------------------------------------------------------------------

the datagrid in html:
-------------------------------------------------------------------------------
<asp:datagrid id="dgCustomFindResults" runat="server" EnableViewState="True" AutoGenerateColumns="True"
      ShowHeader="True" Font-Name="Arial" Font-Size="8pt" HorizontalAlign="Left" Width="900">
      <Columns>
            <asp:TemplateColumn HeaderText="">
                  <HeaderTemplate>
                        <asp:CheckBox onclick="javascript:SelectAllCheckboxes(this);" id="chkAll" runat="server"></asp:CheckBox>
                  </HeaderTemplate>
                  <ItemTemplate>
                        <asp:CheckBox ID="myCheckbox" EnableViewState="False" AutoPostBack="False" Runat="server" />
                  </ItemTemplate>
            </asp:TemplateColumn>
      </Columns>
</asp:datagrid>
----------------------------------------------------------------------------------


the SQL to get data:
--------------------------------------------------------------------------------------------------
      SqlDataAdapter da = new SqlDataAdapter ( cmdObj ) ;
      DataSet dsMLS = new DataSet("MLS");
      da.SelectCommand.CommandTimeout = 0;
      da.Fill(dsMLS, "MLS");
      dgCustomFindResults.DataSource =  dsMLS.Tables["MLS"].DefaultView;
      dgCustomFindResults.DataBind();
---------------------------------------------------------------------------------------------------

I add a checkbox at the first column and get the results like so:

       -----------------------------------------------------------------------------------------
       chkbox |  account_number  | date_sold  | county_name  | sale_price  |   etc...
       -------------------------------------------------------------------------------------------
 
I would like the ablility to have the user click on any cell and then to highlight that row and also
put a check mark in the checkbox.

The row should stay highlighted as long as the checkbox is checked. If the row is clicked again
then the checkbox should be unchecked and the highlight should disappear.

There is no need for a postback since I want to keep the data the same.

Please let me know if someone can help with a solution.

-Eddie


ASKER CERTIFIED SOLUTION
Avatar of Agarici
Agarici
Flag of Romania image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial