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>

Changes are applied several times

Hello,

Here is the situation: a control that isoutside the UpdatePanel passes its changes to the server through a hidden field. A button that isinside the UpdatePanel causes partial posts back. When a full post back occurs the changes that are made to the control are applied as many times as the partial post back was triggered.

Looks like the update panel actually grabbing all of the hidden fields on the page and brings them to the server (which sounds ok) and modified ViewState is fed back to the client (that should not happen, I think) and then reused for next posts.

Is there a way to around that?

Thanks!

Alex

i dont know if i got you correctly .....but why dont you destroy the value of the hidden filed once your work is done...this way it wont go back

Change WatermarkText in VB code behind

I would like to be able to change the WatermarkText in my VB.NET code.

<atlasToolkit:TextBoxWatermarkExtender ID="txtWMEAddress1" runat="server">
<atlasToolkit:TextBoxWatermarkProperties TargetControlID="txtAddress1" WatermarkText="test" WatermarkCssClass="WaterMark" />
</atlasToolkit:TextBoxWatermarkExtender>

Your help is appreciated.

Thank you

it's really as easy as saying:

txtWMEAddress1.WatermarkText =

"Text from code behind"

I tried that before I put up the original posting.

There is no direct property of a TextBoxWatermarkExtender called"WatermarkText".

There is a separate tag called TextBoxWatermarkProperties, but does not have an ID or a runat to access it from the code behind.

The syntax should be (I think) txtWMEFirstName.<access TextBoxWatermarkProperties>.WatermarkText = "My text"

<atlasToolkit:TextBoxWatermarkExtender ID="txtWMEFirstName" runat="server">
<atlasToolkit:TextBoxWatermarkProperties TargetControlID="txtFirstName" WatermarkText="First Name" WatermarkCssClass="WaterMark" />
</atlasToolkit:TextBoxWatermarkExtender>

How should I be doing this?

Thank you very much.

Your code seem to be using pre-beta code of ASP.NET Ajax. Is there any reason why you are still using that version. In the current version of ASP.NET Ajax there is no separate TextBoxWatermarkProperties, instead TextBoxWatermarkExtender has the WaterMarkText property.

Change className with AnimationExtender

I have been trying to use ScriptAction to change the class

<ajaxToolkit:AnimationExtender ID="webAni" runat="server" TargetControlID="webBut">
<Animations>
<OnClick>
<Sequence>
<ScriptAction Script="document.getElementById('webBut').className='servSel';" />
<StyleAction AnimationTarget="infoHolder" Attribute="display" Value="block" />
</Sequence>
</OnClick>
</Animations>
</ajaxToolkit:AnimationExtender>

This does not work.

I also tried <ScriptAction Script="alert(document.getElementById('webBut').className);" /> to see if it returns name of class. No box appears. Oh and also tried using $get('webBut').className='servSel';

Any ideas? What am i doing wrong?

Rick

I figured it out. The page has a masterpage and the id was changed.

Certain events not firing on server (but they are in dev)

I have a small web app that uses an update panel. Its asyncpostback event fires and updates a session variable. In the process, the pageload event fires and repopulates the elements within my update panel. This works in my dev environment, but doesn't work when I publish the site to my website.

The session variable is updated like it should via asyncpostback, but the pageload event isn't fired. Thus my chart within the updatepanel isn't redrawn. I have ajax installed on the server and the appropriate dll's are in the bin folder.

Any idea why this is happening?

The only thing I can think of is there are differences in your web.config file.

The web.config goes along with the publish (I've even manually copied the file over)

hello.

that is strange because the load event will always fire during a postback. have you tried hosting the app in IIS in your development environment?

Yeah I knew the web.config file went though with the Publish, but I wans't sure if you were using the Publish option in Visual Studio or if you were manually publishing it by copying the dll and aspx files. I had a few ideas as to what might be causing the problem but I keep throwing those ideas out because it is working in your test environment. At this point, I can only take guesses. I dont think AJAX.net is the problem because your session is getting updated aysnc. Since all the code is the same in both environments, that ww know of, I would next try to figure out what is different. Are the dll files different in any way, specifically the ajax dll's. Also try manually deploying the site. I have had some publshing problems with Visual Studio 2005 when publishing to ftp (The host I was using had users experieincing problems with the publish not publishing correctly.) Although the problem I and my host had was more to deal with Visual Studio stopming over some security permssions.. dont ask me how, it just did.

I have manually copied the files to the server as well (it is sitting right next to my desktop on the same domain).

hum...well, not sure on the response your chart is returning from the server. there shoudln't be any problems with it since you're seeing it work on the dev machine. anyway, how about using fiddler to see the response returned from the server ?

fiddler.. hmmm... thats a new one on me. I'll check it out.

it's an http proxy. really good to see the contents sent to and from the browser:

http://www.fiddlertool.com/

It is weird, Have you fixed it?

No, not yet. It's strange that the async call works but the page load isn't firing.

Cause a JavaScript Function to run after update (update panel postback)

Hello,

I ran into a problem that im not sure if the Atlas framework addresses.

I need to fire off a javascript function (which is decided server side)on a postback. To do this I am going to be using a hidden input field.(since I already have one on the form I use to send information forserver use.) From the server side, I can place the function names intothe hidden input field. But I can't cause them to run, on each postback.

I suppose that is confusing, let me try something simpler.

1. I fire off a postback in javascript - This is done using the__dopostback() and the server side fires off its if statements and doesits functions based on what has been placed into my hidden input field.(this is all good so far) (if I had to I could use the body's on formload ability to fire off the javascript functions I desire, but thatwont work for the next step, and is really ugly)

2. I include Atlas to make my postback not refresh the whole page. This is done by using UpdatePanels.

3. On the server side I need to somehow tell it to run certainjavascript functions when that postback finishes loading. (so like onpartial page load)

How do I do step 3?<script type="text/javascript">
function AfterPostback()
{
alert("This is where we check the hidden input and run the functions.");
}

function PageRequestManagerPropertyChanged(sender, args)
{
if (args.get_propertyName() == "inPostBack")
{
if (!$object("_PageRequestManager").get_inPostBack())
AfterPostback();
}
}

function pageLoad()
{
$object("_PageRequestManager").propertyChanged.add(PageRequestManagerPropertyChanged);
}
</script
<div>
<atlas:ScriptManagerEnablePartialRendering="true" ID="ScriptManager1" runat="server">
</atlas:ScriptManager>
<atlas:UpdatePanel runat="server" Mode="Conditional" ID="UpdatePanel1">
<ContentTemplate>
<%= DateTime.Now.ToLongTimeString() %>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="UpdateTime" EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
<asp:Button ID="UpdateTime" runat="server" Text="Update Time" />
</div
Thats the solution I rigged up.
Hi,

Thanks for posting your solution. It works very well and solves a whole bunch of missing stuff with AtlasPanels. One problem dough. I had to move the call to JS function pageLoad() to the end of the html file part instead of putting it to body onload event.
Another option for doing this is theUpdateProgressSignup extension.

Catch a Sys.WebForms.PageRequestManagerServerErrorException that occurs when server is dow

Hello,

I have an ajax timer control that updates an update panel every couple of seconds. When/if the server is down, there is an error message in a popup that says

"Sys.WebForms.PageRequestManagerServerErrorException: An unknown error ocurred while processing the request
on the server. The status code reutrned from the server was: 12029"

Basically I want to be able to catch this exception so that the popup does not continue to occur.

Is this possible?

Thanks in advance.

Take a look at the following posts on my blog:

http://fredrik.nsquared2.com/viewpost.aspx?PostID=395&showfeedback=true

http://fredrik.nsquared2.com/viewpost.aspx?PostID=394&showfeedback=true

You can also use the PageRequestManager, for example (This code should be located on the client):

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args)
{
if (args.get_error() != undefined)
{
var errorMessage;
if (args.get_response().get_statusCode() == '200')
{
errorMessage = args.get_error().message;
}
else
{
errorMessage = 'An unspecified error occurred. ';
}
args.set_errorHandled(true);
alert(errorMessage);
}
}

That's just what I needed. Thank you.

CascadingDropDownList fireEvent onchange not working when parent selection changed

I changed the included sample test page to remove the autopostback from theDropDownList3 dropdown (for color). I also removed the server side onselectedindxchanged eventhandler. I wanted to give the feedback to the user all from the client side. For that effect I added the following javascript code at the end of the page:

 <script type="text/javascript">$addHandler($get('<%=DropDownList3.ClientID%>'), "change", ProvideFeedback);function ProvideFeedback(eventElement){var makeDropdown = $get('<%=DropDownList1.ClientID%>');var modelDropdown = $get('<%=DropDownList2.ClientID%>');var colorDropdown = $get('<%=DropDownList3.ClientID%>');if(colorDropdown.selectedIndex == 0){alert("Please make all your selections");}else{alert('You selected ' + makeDropdown.options[makeDropdown.selectedIndex].text + ' - ' + modelDropdown.options[modelDropdown.selectedIndex].text + ' - ' + colorDropdown.options[colorDropdown.selectedIndex].text);}} </script>

It works just fine when I change the values in the color dropdown; I get the feedback. But I am also expecting to get the feedback when I change the make or model dropdown as the onchage is internally fired for color dropdown. But I never see that handled. Everytime I change values of make or model I never get the feedback.

Why is that? What am I missing?

Thanks.

Bumping up. Could someone please respond to this thread.

Ifthis.get_element().fireEvent('onchange'); is not producing the effect I am looking for what is it for?

Thanks.

Hi Nkv321,

CascadingDropDown will compare the selected value when its onchange event is fired. If no changes , there will no further actions , so it won't call the WebService.

I hope this helps.

Best regards,

Jonathan

It's not about changing the selected value and calling the web service. It's about when the parent value changes -- child drop down items get rebound -- and then an event is fired indicating that the child dropdown value has changed.

My question is what can that event be used for? How can it be used? I tried to use it in the sample that I put forth earlier but it was not executing. For example how can I add/attach a hanlder in the page to this event?

Thanks

Hi Nkv321,

I think you can attach a Javascript to the CascadingDropDown's add_selectionChanged or add_populated. For example:

function pageLoad(){$find("CascadingDropDown's BehaviorID"). add_selectionChanged(onSelectionChanged); }

function onSelectionChanged(){//your codes here.}

add_selectionChanged //Add an event handler for the selectionChanged event

add_populated //Add an event handler for the populated event

I Hope this help.

Best regards,

Jonathan

CascadingDropDown Method error 500

I have a couple of CascadingDropDown controls on an ASP.NET page and am filling them from a code behind function that makes a call to a SQL Server 2005 database. My problem is that sometimes I receive a 'Method error 500' when filling the second dropdownlist based on a parent control. I am concatenating three fields together and I can mix and match 2 of them, but when I use all three, I consistently get the error.

Example "Select StoreCode + ' ' + City + ' ' State as Name From Table".

Is there a data size limit with using this control?

Also, I am able to bind the same data to a dropdownlist not used in AJAX.

Thanks in Advanced,

Marc

I am encountering a similar problem with some CascadingDropDowns that help define someone's location. Whn I gt tothe City level, sometimes I get a 'Method Error 500' and sometimes I do not.

Your question "Is there a data size limit with using this control?" got me experimenting, and my results suggested that indeed there was a correlation between the error and the amount of data being returned.

So I installed IEInspector and fond that indeed, requests that return a lot of data are creating a problem. This is one of the responses I am getting:

{"Message":"Maximum length exceeded.","StackTrace":" at System.Web.Script.Services.RestHandler.InvokeMethod(HttpContext context, WebServiceMethodData methodData, IDictionary`2 rawParams)\r\n

at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}

My next step is to use Reflctr to look at the code for System.Web.Script.Services.RestHandler.InvokeMethod and see what I discover.

Thanks for the data length suggestion!

Ken, thanks for the investigative work. Can you please keep me updated as to what you find?

I too will continue to debug this issue and will report any findings to this thread.

Thanks in advance,

Marc

Eureka!

Stepping thru the AJAX source code was tiring but informative.

In any event, here is my solution (if your underlying issue is different, YMMV).

I was hitting a size limit in the JSON conversion stuff, which fortunately can be customized without recompiling the code.

When returning custom objects (like the arrays returned by the CascadingDropDown web methods), the objects are serialized using object names, including their namespace. While my collections were only a few thousand items in length, the unfortunate choice of the long-winded namespace 'AjaxControlToolkit' and class name 'CascadingDropDownNameValue' results in ridiculous object bloat and blows out the default JSON string size by adding the long object name to every single object.

For example, a single City in my array of around 4000 of them is being returned like this:

"__type":"AjaxControlToolkit.CascadingDropDownNameValue","name":"Abanda","value":"2728903","isDefaultValue":false},{"

IMHO it would be much more efficient (and give us programmers less gray hairs!) if shorter names were used, like:

"__type":"AjaxCT.CDDNV","n":"Abanda","v":"2728903","def":false},{"

Or even better, instead of returning an array of objects, return a single object (thus avoiding the namespace.classname overhead in each array element) that contains a string with the data in it. That is exactly what I did in my earlier implementation using Michael Schwartz's AJAX.NET and my own custom code.

In any event, adding the following to my Web.Config solved my issues (so far):

<

system.web.extensions>
<scripting>
<webServices>
<jsonSerializationmaxJsonLength="5000000" />
</webServices>
</scripting>
</system.web.extensions>This link describes Web.Config settings for AJAX:

http://ajax.asp.net/docs/ConfiguringASPNETAJAX.aspx#microsoftweb

This forum thread was also helpful:

http://forums.asp.net/thread/1634922.aspx