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(spanCh k)
{
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox=(spanChk.type=="che ckbox")?sp anChk:span Chk.childr en.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:Select AllCheckbo xes(this); " id="chkAll" runat="server"></asp:Check Box>
</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.CommandTi meout = 0;
da.Fill(dsMLS, "MLS");
dgCustomFindResults.DataSo urce = dsMLS.Tables["MLS"].Defaul tView;
dgCustomFindResults.DataBi nd();
-------------------------- ---------- ---------- ---------- ---------- ---------- ---------- ---------- ---
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
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(spanCh
{
// Added as ASPX uses SPAN for checkbox
var oItem = spanChk.children;
var theBox=(spanChk.type=="che
xState=theBox.checked;
elm=theBox.form.elements;
for(i=0;i<elm.length;i++)
if(elm[i].type=="checkbox"
{
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:Select
</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.CommandTi
da.Fill(dsMLS, "MLS");
dgCustomFindResults.DataSo
dgCustomFindResults.DataBi
--------------------------
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.