can we change the color of selected row in datagrid? The row is selected using checkbox. Something like we always do when delete mails in our email, where we click on the checkbox, then the row selected wil change to another color.. can datagrid do the same thing??yes it is possible in data gridi found some examples on net about highlighting the selected rows. Below are the codes..
<script>
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
}
}
}
}
function HighlightRow(chkB){
var xState=chkB.checked;
if(xState){
chkB.parentElement.parentElement.style.backgroundColor='lightblue';
}
else{
chkB.parentElement.parentElement.style.backgroundColor='ghostwhite';
chkB.parentElement.parentElement.style.color='black';
}
}
</script>
At the datagrid
===========
<HeaderTemplate>
<INPUT id="Checkbox1" onclick="SelectAll(this)" type="checkbox" name="Checkbox1" runat="server">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="SelectCheckBox" onclick="HighlightRow(this)" runat="server" OnCheckedChanged="changecolor_CheckedChanged" AutoPostBack="false"></asp:CheckBox>
</ItemTemplate>
Code behind
=========
Public Sub changecolor_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim chkTemp As CheckBox = CType(sender, CheckBox)
Dim dgi As DataGridItem
dgi = CType(chkTemp.Parent.Parent, DataGridItem)
If (chkTemp.Checked) Then
dgi.BackColor = DG1.SelectedItemStyle.BackColor
Else
dgi.BackColor = DG1.ItemStyle.BackColor
dgi.ForeColor = DG1.ItemStyle.ForeColor
End If
End Sub
This wil only highlight the selected row(s) at the ItemTemplate. How if i select the checkbox at the HeaderTemplate, it wont highlight the rows (which suppose to highlight all the rows at the datagrid).. how to do that?no one can help me..?you can do one thing you can change color of all the cells of that particular row
it will take some time to repaint the page,,,,,,,,,hm.. i don get you.. can you explain further? the problem i'm having now is if i select the checkbox at the heardertemplate, it cant highlights all the rows at the datagrid. But if i select the checkbox at the itemtemplate, then the selected row(s) wil get highlighted..no one can help me..?
Try this link;
Table Rollover (<!-- m --><a class="postlink" href="http://jdgsoftco.no-ip.com/tableRoll.htm">http://jdgsoftco.no-ip.com/tableRoll.htm</a><!-- m -->)i just modify ur javascript function "SelectAll" and this will give u wat u want.
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
document.forms[0].elements.parentElement.parentElement.style.backgroundColor = 'LightBlue'
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
document.forms[0].elements.parentElement.parentElement.style.backgroundColor = 'White'
}
}
}
}
Have phun
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
i found some examples on net about highlighting the selected rows. Below are the codes..
<script>
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
}
}
}
}
function HighlightRow(chkB){
var xState=chkB.checked;
if(xState){
chkB.parentElement.parentElement.style.backgroundColor='lightblue';
}
else{
chkB.parentElement.parentElement.style.backgroundColor='ghostwhite';
chkB.parentElement.parentElement.style.color='black';
}
}
</script>
At the datagrid
===========
<HeaderTemplate>
<INPUT id="Checkbox1" onclick="SelectAll(this)" type="checkbox" name="Checkbox1" runat="server">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="SelectCheckBox" onclick="HighlightRow(this)" runat="server" OnCheckedChanged="changecolor_CheckedChanged" AutoPostBack="false"></asp:CheckBox>
</ItemTemplate>
Code behind
=========
Public Sub changecolor_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim chkTemp As CheckBox = CType(sender, CheckBox)
Dim dgi As DataGridItem
dgi = CType(chkTemp.Parent.Parent, DataGridItem)
If (chkTemp.Checked) Then
dgi.BackColor = DG1.SelectedItemStyle.BackColor
Else
dgi.BackColor = DG1.ItemStyle.BackColor
dgi.ForeColor = DG1.ItemStyle.ForeColor
End If
End Sub
This wil only highlight the selected row(s) at the ItemTemplate. How if i select the checkbox at the HeaderTemplate, it wont highlight the rows (which suppose to highlight all the rows at the datagrid).. how to do that?
<script>
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
}
}
}
}
function HighlightRow(chkB){
var xState=chkB.checked;
if(xState){
chkB.parentElement.parentElement.style.backgroundColor='lightblue';
}
else{
chkB.parentElement.parentElement.style.backgroundColor='ghostwhite';
chkB.parentElement.parentElement.style.color='black';
}
}
</script>
At the datagrid
===========
<HeaderTemplate>
<INPUT id="Checkbox1" onclick="SelectAll(this)" type="checkbox" name="Checkbox1" runat="server">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="SelectCheckBox" onclick="HighlightRow(this)" runat="server" OnCheckedChanged="changecolor_CheckedChanged" AutoPostBack="false"></asp:CheckBox>
</ItemTemplate>
Code behind
=========
Public Sub changecolor_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim chkTemp As CheckBox = CType(sender, CheckBox)
Dim dgi As DataGridItem
dgi = CType(chkTemp.Parent.Parent, DataGridItem)
If (chkTemp.Checked) Then
dgi.BackColor = DG1.SelectedItemStyle.BackColor
Else
dgi.BackColor = DG1.ItemStyle.BackColor
dgi.ForeColor = DG1.ItemStyle.ForeColor
End If
End Sub
This wil only highlight the selected row(s) at the ItemTemplate. How if i select the checkbox at the HeaderTemplate, it wont highlight the rows (which suppose to highlight all the rows at the datagrid).. how to do that?no one can help me..?you can do one thing you can change color of all the cells of that particular row
it will take some time to repaint the page,,,,,,,,,hm.. i don get you.. can you explain further? the problem i'm having now is if i select the checkbox at the heardertemplate, it cant highlights all the rows at the datagrid. But if i select the checkbox at the itemtemplate, then the selected row(s) wil get highlighted..no one can help me..?
Try this link;
Table Rollover (<!-- m --><a class="postlink" href="http://jdgsoftco.no-ip.com/tableRoll.htm">http://jdgsoftco.no-ip.com/tableRoll.htm</a><!-- m -->)i just modify ur javascript function "SelectAll" and this will give u wat u want.
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
document.forms[0].elements.parentElement.parentElement.style.backgroundColor = 'LightBlue'
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
document.forms[0].elements.parentElement.parentElement.style.backgroundColor = 'White'
}
}
}
}
Have phun
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
i found some examples on net about highlighting the selected rows. Below are the codes..
<script>
function SelectAll(CheckBoxControl){
if(CheckBoxControl.checked == true){
var i;
for (i=0; i < document.forms[0].elements.length; i++){
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = true;
}
}
}
else{
var i;
for (i=0; i < document.forms[0].elements.length; i++) {
if ((document.forms[0].elements.type == 'checkbox') && (document.forms[0].elements.name.indexOf('DG1') > -1)){
document.forms[0].elements.checked = false;
}
}
}
}
function HighlightRow(chkB){
var xState=chkB.checked;
if(xState){
chkB.parentElement.parentElement.style.backgroundColor='lightblue';
}
else{
chkB.parentElement.parentElement.style.backgroundColor='ghostwhite';
chkB.parentElement.parentElement.style.color='black';
}
}
</script>
At the datagrid
===========
<HeaderTemplate>
<INPUT id="Checkbox1" onclick="SelectAll(this)" type="checkbox" name="Checkbox1" runat="server">
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox id="SelectCheckBox" onclick="HighlightRow(this)" runat="server" OnCheckedChanged="changecolor_CheckedChanged" AutoPostBack="false"></asp:CheckBox>
</ItemTemplate>
Code behind
=========
Public Sub changecolor_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs)
Dim chkTemp As CheckBox = CType(sender, CheckBox)
Dim dgi As DataGridItem
dgi = CType(chkTemp.Parent.Parent, DataGridItem)
If (chkTemp.Checked) Then
dgi.BackColor = DG1.SelectedItemStyle.BackColor
Else
dgi.BackColor = DG1.ItemStyle.BackColor
dgi.ForeColor = DG1.ItemStyle.ForeColor
End If
End Sub
This wil only highlight the selected row(s) at the ItemTemplate. How if i select the checkbox at the HeaderTemplate, it wont highlight the rows (which suppose to highlight all the rows at the datagrid).. how to do that?