Changing Background color of grid row when row checkbox selected

What option should I choose:

1) Write java script for this

2) Write server code and have grid in UpdatePanel

?

Not clear what the best guidline would be. I am already using update panel for that grid.

I guess the best solution should be if I have defined this background color in CSS.. I guess I could use java script to change the class name dynamicly and have that class defined in CSS. Not sure how to do it...

Here's some sample code I use in my custom ajaxed gridview control...

May or not work for you but should give you some idea..

 protectedvirtualvoid GridView_RowDataBound(Object s,GridViewRowEventArgs e)
{
if (e.Row.RowType ==DataControlRowType.DataRow )
{
//Note: Here is where we change the button submit so that

//our IPostBackHandler can properly handle AJAX requests.

int editID = (int)DataBinder.Eval(e.Row.DataItem,"id");

e.Row.Attributes.Add("onMouseOver","SetNewColor(this);");

e.Row.Attributes.Add("onMouseOut","SetOldColor(this);");

e.Row.Attributes.Add("onDblClick", Page.ClientScript.GetPostBackEventReference(this, e.Row.RowIndex.ToString()));

e.Row.Attributes.Add("onKeyDown","if( event.keyCode == 13 ) " + Page.ClientScript.GetPostBackEventReference(this,"KEYDOWN" +"$" + e.Row.DataItemIndex.ToString()));

Here is the code for adding it to the script manager on the prerender() phase

protected override void OnPreRender(EventArgs e) {string script = @." var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; }"; ScriptManager.RegisterClientScriptBlock(this,typeof(Page),"ToggleScript", script,true);

Here is the aspx / ascx .Net code to use if you do not wanna do the PreRender event...

<script language="javascript" type="text/javascript"> var _oldColor; function SetNewColor(source) { _oldColor = source.style.backgroundColor; source.style.backgroundColor = '#00ff00';} function SetOldColor(source) { source.style.backgroundColor = _oldColor; } </script>

That should set you on the right direction....at least...

I have tried your aproach, I have created very similar code, but in my code I want to change ackground colour when the checkbox is chcked... It changes the color, but than it does not reverse it back to the old color... Any idea?

function highLight(CheckBoxObj){

var _oldColor;

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

OK, I almost figured this out. My _OldColor variable needs to be global, outside of the function of course. OK, it seems to be working for one chcekbox at the time, but when multiple checkboxes are selected it doe not work. My guess would be I need to put the saved value to the array, but not sure how to do it...

var _oldColor;

function highLight(CheckBoxObj){

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

In fact I suspect you may have the same problem happening in yourcode as you also do not put it (old color) into an array...

I was merely interested in just showing it highlighted for editing not necessarily for the checkboxes although that would be a nice feature to incorporate...

here some SAMPLE CODE to bite your teeth into - its out of the ajaxtoolkit... shows how to at least work with the arrays:

disableTab :function()

var i = 0;

var tagElements;

var tagElementsInPopUp =new Array();

this._saveTabIndexes.clear();

//Save all popup's tag in tagElementsInPopUp

for (var j = 0; j <this._tagWithTabIndex.length; j++) {

tagElements =this._foregroundElement.getElementsByTagName(this._tagWithTabIndex[j]);

for (var k = 0 ; k < tagElements.length; k++) {

tagElementsInPopUp[i] = tagElements[k];

i++;

}

}

Its from the ModalBehavior.js if you need to examine it a bit more...

Also some of the checkboxes can be initially checked as I keep track of those checked if user changes the pages... I used some code for this, I found on the web...

Thank you very much, the problem is how to get an index of the curren checkbox in the function (I am new to js):

function highLight(CheckBoxObj){

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

//{

////elm[i].click();

//if(elm[i].checked!=xState)

//elm[i].click();

if (CheckBoxObj.checked ==true) {

_oldColor = CheckBoxObj.parentElement.parentElement.style.backgroundColor;

CheckBoxObj.parentElement.parentElement.style.backgroundColor ='#D6DEEC';

//'#88AAFF';

}

else

{

CheckBoxObj.parentElement.parentElement.style.backgroundColor = _oldColor;

}

This is my checkbox declaration (onclick works somehow, even not recognized by VS editor...):

<ItemTemplate>

<asp:CheckBoxid="chkActive"onclick="javascript:highLight(this);"runat="server"></asp:CheckBox>

</ItemTemplate>

Chanage button visibility if the button is outside of the UpdatePanel

Hello everyone,

Here is my scenario, and my problem.

I have a grid inside an UpdatePanel_1. The grid is populated after a Search button inside another UpdatePanel_0 is clicked (this is actually an user control and UpdatePanel_0 is inside the user control). This works fine.

I want to provide an Export button which exports the data from the grid to Excel, but want to show it only if the grid has any records.

If I add the button to UpdatePanel_1 the visibility toggling works fine, but when I click on the button I get the nasty message:

"Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed. Common causes for this error are when the response is modified by calls to Response.Write(), Response filters, HTTP modules, or trace is enabled... "

And of course, I am using Response.Write for the Export of the grid to Excel.

If I put the Export button out of UpdatePanel_1, the Export works fine, but I cannot find a way to toggle the visiblity of the button. I set the visibility in the code behind when the grid has some records, but it doesn't seem to work (probably because the button is outside of the UpdatePanel_1).

What should I do to make the Exprot work and the button to appear only when I want it?

Thank you!

You could add the button to the UpdatePanelGridView and add an async trigger for the gridview databind event. So on databind, if gridview is empty your button will not show.

Hi Denis,

Thank you for your reply.

Setting the visibility of the button is not a problem when the button is inside the UpdatePanel. The problem in this case is that Export to Excel, which has to happen when the user pushes the button, doesn't work because of the error mentioned above (and the reason for the error is the Response.Write statement in the function below).

If I put the button out of the UpdatePanel, the Export to Excel works, but I have no control over the button's visibility, because it depends on the GridView records, which is inside an UpdatePanel.

Here is the function I use for the Export:

Public Sub ExportGridToExcel(ByVal grvBusinessAs GridView,ByVal pageAs Page,ByVal fileNameAs String)If grvBusiness.Rows.Count.ToString + 1 < 65536Then Dim twAs New StringWriter()Dim hwAs New System.Web.UI.HtmlTextWriter(tw)Dim frmAs HtmlForm =New HtmlForm() page.Response.ContentType ="application/vnd.ms-excel" page.Response.AddHeader("content-disposition","attachment;filename=" & fileName &".xls") page.Response.Charset ="" page.EnableViewState =False page.Controls.Add(frm) frm.Controls.Add(grvBusiness) frm.RenderControl(hw) page.Response.Write(tw.ToString()) page.Response.End()End If End Sub

I am still new to AJAX so little things like this are not easy to solve.