Calling JavaScript Function From C#

Dear Team

i am using VS2005 ASP.NET 2.0 C# JavaScript AJAX
i want on timer tick in side uodate panel to call javascript Function()
so how can i do that.

thank you

I would very much like to know how to do that too.

I have a ModalPopup containing SimpleViewer, and I need to set the path to an xml file when the user clicks an imagebutton, but as there is no postback going on I can't add that path or whatever it might be to the JavaScript block.

So I relaly need for the JavaScript block to be "loaded" and executed when the user clicks one of many buttons and then load the javascript based on that.

This is a great resource on using a TimerControl with an UpdatePanel:

http://ajax.asp.net/docs/tutorials/IntroToTimerControl.aspx

However if you want to execute a JavaScript function before/during/after an UpdatePanel is refreshed you will need to explore the PageRequestManagerClass:

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageRequestManagerClass/default.aspx

You can add the following Javascript to a page:

<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoaded);
function pageLoaded(sender, args) {
if (args.get_panelsUpdated().length > 0){
alert('a panel was just updated!');
// doSomeFunction();
}
}
</script>

Cheers,
Al

calling external javascript functions/ library from within an update panel

I have an application with a large number of javaScript functions that reside in external .js files. User controls that reference these files work perfectly.

When usercontrols inside updatepanels call the external javascript functions and libraries, they fail with 'object not found' errors.

I tested using the scriptmanager.registerclientscriptblock by adding a concatenated string with a simple function and it worked. But this is a bad way to do things both from a debugging standpoint as well as ease of code. There must be a better way?

Dim scriptTextAsString

scriptText = _

"function prepareToClose() {"

& _

"alert('prepare to close');"

& _

"test();"

& _

" }"

System.Web.UI.ScriptManager.RegisterClientScriptBlock(

Me.btnLoad,Me.GetType(),"prepare_close", scriptTextTrue)

btnLoad.Attributes.Add(

"onCLick","prepareToClose(); return false;")

What is the best way to do this?

Unless someone has a better solution, here is what I did. Basically, I load the external file into a string and use the rgisterScriptBlock...everything works well and there is still just 1 instance of the scripts for easy maintenance and other non-ajax pages can use them. Here is the code for anyone interested.:

System.Web.UI.ScriptManager.RegisterClientScriptBlock(Me.btnClose, Me.GetType(), "objectives", regLongScript("objectives.js"), True)

...

Private Function regLongScript(ByVal incoming_name As String) As String
Dim objStreamReader As IO.StreamReader
Try
Dim file_name As String = ""
file_name = Request.PhysicalApplicationPath & "a\js_scripts\" & incoming_name
objStreamReader = File.OpenText(file_name)
Return objStreamReader.ReadToEnd()

Catch ex As Exception
Return ""
Finally
objStreamReader.Close()
End Try
End Function

Here's how I've been doing it:

ScriptManager.RegisterStartupScript(

UpdatePanelTest,

UpdatePanelTest.GetType(),

"keyValue",

"alert('test')",

true);

Here's how I've been doing it:

ScriptManager.RegisterStartupScript(

UpdatePanelTest,

UpdatePanelTest.GetType(),

"keyValue",

"alert('test');",

true);

Calling Clinet Function from Code Behind (Inside Ajax Update panel)

Hi,

Can anyone please provide information on how I can do this:

I have a GridView control inside an Ajax Update panel and have wired the Selected IndexChanged action to call a Client side Javascript function (ViewReceipt()). Unfortunately it doesn't seem to work except if I take the control outside the update panel.

Have posted my code below..

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("ViewReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
}

Regards..

Peter.

Hi,

Found some posts on this and tried to add the recommended code but still getting a syntax error, hope someone can help out..

code behind:

protected void rgvInv_SelectedIndexChanged(object sender, EventArgs e)
{
// Now execute the client-side stuff...
StringBuilder sbScript = new StringBuilder();
sbScript.Append("\n<script language=\"JavaScript\" type=\"text/javascript\">\n");
sbScript.Append("<!--\n");
sbScript.Append("EditReceipt();\n");
sbScript.Append("// -->\n");
sbScript.Append("</script>\n");
//this.RegisterStartupScript("ClientSideCall", sbScript.ToString());
//ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.GetType(), "ClientSideCall", sbScript.ToString(), true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), true);

}

Javascript Function:

function EditReceipt()
{
var manager = GetRadWindowManager();
var rwEntry = manager.GetWindowByName("rwReceipt");
}

Regards..

Peter.

Hi Peter,

The problem with your code is that you should specify the last parameter to false in RegisterStartupScript method.

This parameter indicates that <script> tag will be added automatically to wrap the sbScript. Since you've done that manually, so false should be used.

Like this:

ScriptManager.RegisterStartupScript(this, this.GetType(), "ClientSideCall", sbScript.ToString(), false);

Hope this helps.

Hi Peter,

Give full definition of EditScript() function then only I can help to you.

Regards,

Aru

Raymond,

Thanks for the information, I have already implemented a work around by moving the grid outside of the update panel. I'm using a telerik grid which has inbuilt AJAX and there are some clientside events which can be hooked into that has given me the functionality I require, anyway thanks for the information I can use it else where later.

Regards..

Peter

Calling a web service in a javascript causes page reload

Hey guys,

Here is what is happening. I have a user control in which I have an update panel with a button and some label. On click of that button, I call a javascript function which in turn calls a web service. The web service does get called and everything works nicely, but the whole page is being refreshed. The moment the javascript calls a web service, the refresh of the whole page occurs (when in turn nothing should happen besides the web service called).

Do I have something misconfigured that causes the script manager to do the whole page refresh on a web service call? I have the same structure in another control, and that one doesn't cause the page refresh.

If anyone has experienced this and have a solution for it, I would love to hear it.

Thanks!

Are you using Server Button Control(<asp:Button/>) of usual html button(<input type="button"> ?

I'm assuming you have something like:

<asp:Button ... OnClientClick="CallMyWebService()" />

or

<input type="button" ... onclick="CallMyWebService()" />

Try making it "CallMyWebService(); return false;"... the "return false" tells the browser not to continue handling the event (by submitting the form, for example). If that's not it, you might try showing us your code.

Calling a web service from an update panel

I am running through the tutorial on calling a web service from an update panel. I have a web site project and a separate web service project that contains the service that I'm trying to call. When I click the button that should make the call to the web service I get a javascript error that my web service is not defined. I am thinking that there is something wrong with the proxy that is getting created. So, I set the inlinescript property to true to see the .js that is getting generated. However, when I do this I get an error that : "The virtual path maps to another application which is not allowed". Does my web service file need to actually be in the same project as my website? This doesn't seem to make much sense because I have multiple web sites that call the same web service. What am I doing wrong here?

Thanks in advance

Hi Igouch,

Take a look at this:

http://ajax.asp.net/docs/mref/P_System_Web_UI_ServiceReference_Path.aspx

when you want to refer to a webservice that you have not in the same solution as your webproject you could use a bridge file to make it possible. otherwise if you want to complete the tutorial build the webservice in the same solution as the webproject. then you are able to set a direct reference to your webservice.

Hope it helps.

Right now I do have the web service in the same solution - but not the same project. Does the web service have to be in the same project as the web application? I am not familiar with doing this as we have always had a separate project for every web service that we've developed. Even though they are in the same solution I still am getting the message that the virtual path maps to a different application which is not allowed.

Calling a Script in UpdatePanel

I am having a problem calling javascript from within an update panel.

Here is what I have set up:

When you select a given index on a dropdownlist, the updatepanel is populated with a custom control I built that loads a wysiwyg editor (widgeditor). The editor requires a javascript call to initialize, but the script (which is registered within the UpdatePanel's control collection), does not fire. In fact, no scripts will fire...

I tried using RegisterStartupScript, RegisterLoadScript, and adding a script via a ScriptManagerProxy.

Any thoughts? I feel there must be a way to accomplish this.

Thanks!

Ben

hehe, from the department of answering my own questions:

I found my big lead here - using the ScriptManager.RegisterScriptBlock:

http://forums.asp.net/2/1550428/ShowThread.aspx

...and updated it using the ScriptManager.RegisterStartupScript ... which made everything work lovely.

I figured there was a good answer to this problem.

Ben

Calling __doPostBack causing full postback :-(

Ok, if I capture an event on the client, for example, a click event on a textbox that is inside an update panel, and in that event I call __doPostBack I get a full postback.

However, if I add a button and call it's click event, I get the partial page update I want. So I guess the question is how to invoke a partial page update via script?

Thanks ... Ed

Make sure the appropriate trigger has been set up for the UpdatePanel. You can also set the TextBox to have AutoPostBack="true" which will add a __doPostBack to the onchange event handler.

Of course if you absolutely need to trigger a button click from JavaScript you can do something similar to this:

<

htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Untitled Page</title>
<scriptlanguage=javascript>
function SemiHacky(){
__doPostBack('Button1','');
}
</script>
</head>
<body>
<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server">
</asp:ScriptManager>
<asp:UpdatePanelID="UpdatePanel1"runat="server">
<Triggers><asp:AsyncPostBackTriggerControlID=Button1EventName="Click"/></Triggers>
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
<asp:ButtonID="Button1"runat="server"Text="Button"/>
<br/><br/>
<ahref="javascript:SemiHacky();">Click here</a> to execute some JavaScript and submit the Button1 button via JavaScript.
</form>
</body>
</html>

The code behind is just setting the Label text to the current time so you can see the PostBack occur:

Label1.Text =DateTime.Now.ToString();

Cheers,
Al

Hi,

I did exactly as you suggested, but to no avail.

I am trying to launch a modal dialog and I have tried the following variations, some of which seem to work correctly, except that once the modal dialog is display and I try to dismiss it via a server

side mydlg.close() I get an error stating "The control 'dlgDivTasks' already has a data item registered."

These are the individual calls that I have tried. I should point out that if I just to a plain __doPostBack("","") I get a full postback and no error when I try to dismiss the dialog.

_doPostBack('Button1','');
__doPostBack("","");
Sys.WebForms.PageRequestManager.getInstance()._doPostBack("","");
document.forms[0].ctl00_ContentPlaceHolderContent_Button1.click();
$find("DlgTasksBehavior").show();

Thanks ... Ed

Hi Ed,

Have you had any luck using the OnOkScript property of the ModalPupupExtender? One way that I use the modal popup is I have an Ok and Cancel button but they may be named differently based on user actions (ie. Cancel may be labelled as Close). I then use the OnOkScript to execute some client JavaScript which then uses a web service to pass the data back to the server for some processing.

OkControlID="btnOk"OnOkScript="modalOkScript()"CancelControlID="btnCancel"

function

modalOkScript(){
//TODO: Add some web service call to take care of my data processing requirements
}

When the Web Service completes, the onSuccess JavaScript function for the webservice in my OnOkScript function changes the 'Cancel' button text to 'Close.

function

onSuccessModalOkScript(result){
$get('btnOk').disabled =true;
$get('btnCancel').value ='Close';
}

Then it's finished and the Modal closes via client side when the user is ready.

Al

Looks like my copy / paste made the JavaScript functions look odd.

Hi, thanks for the reply.

Wouldn't what you suggest be kinda limiting? I wouldn't have access to the various data and controls on the page unless I passed a mountain of parameters the the service call. Seems to me I should just be able to do an async update via the update panel so I can use my server side code to get the job done.

The thing that is a mystery to me is why it is doing a full post back in the first place.I have everything working perfectly it's just the damned blink!

Thanks ... Ed

I have just had a similar situation myself whereby a full postback was occuring whenever I called __doPostBack. Trick is that you have to specifiy the actual client ID in the EventTarget parameter

i.e. _doPostBack('', ''); will NOT work where as _doPostBack('ctl00_textBox1', ''); WILL work. Obviously thats just an example so replace ctl00_textBox1 with your actual clientID value

So my code became:

textJobRef.Attributes.Add("onkeyup","javascript:setTimeout('__doPostBack(\'" + textJobRef.ClientID +"\', \'\')', 0)")

I dont think the timeout is required, but .NET does it so it must be for a reason! :)

Callbacks in association with Update panel

I've got a Gridview that I've customized with buttons that do callbacks to get context menus and insert stuff in the main Gridview table.

If I put the entire Gridview in an update panel, what is the likelihood that these little custom callbacks will still work? Rephrased: is it a known feature of update panels that they will interfere with, override, or otherwise mess up such callbacks? Or do update panels just respond to submits, or have some other property, that would indicate that they would not interfere with such callbacks?

Any guidance on this would be appreciated ( I hope to have better luck testing this for myself soon.)

Thanks!

hello.

if i'm not mistaken, the scriptmanager intercepts form submission only...

Thanks for the post. That's good news. I'll keep my fingers crossed for the test.

Agradecimento!

Callback (ICallbackEventHandler) and Atlas. Can they work together ?

I am new in Atlas. It seems very simple to use (Update Panel). However, I have several composite controls that use theICallbackEventHandler. When I mix them with Atlas UpdatePanel they do not work.

Any suggestions.

Thanks

We are currently investigating such issues. Thanks for the report.

Are there any news conerning this issue?

I have a custom (image map like) control which reacts to clicks by a javascript. the javascript part sets postback values like x, y, and raises a postback by form.submit().

Now when I place this control on an UpdatePanel, the javascript:form.submit() raises a postback, but not a partial postback... Do I have to register the javascript somewhere else (expect RegisterClientScript or so)? Or is there a way to make a postback in order that the server updates the UpdatePanel with a new image? I tried the Callback (standard provided by ASP.NET 2.0), but this seems only to be for delivering a string value from server to client (at least I couldnt kick off any partial update of the page..)

Regards,

Ray

Hi,

Can you say if controls using IcallbackEventHandler will be supported when used in Atlas UpdatePanels?

thx

As far as I can see, I don't think this is possible at all, since the two postbacks are happening in two different contexts. It would probably require a change to the whole javascript callback library included in ASP.NET 2.0. What we need here is the ability to send two events back to the client, and returning them all in one context.

Having said that, I really really wish this was possible. Although the ASP.NET AJAX library has some really cool controls, there will always be cases where you would need to supplement with your own AJAX-style controls, and the events on these controls should trigger fx. the UpdatePanel.

call web service using ASP.NET AJAX with javascript without callback function

Hello,

I'm trying to create a custom validator with a ValidatorCalloutExtender all in an Update Panel. As everyone knows the callouts do not currently display automatically after a server post-back and will only work for custom validators which utilize client-side validation.

When i call the javascript function from validator callout extender i must return the args.IsValid method before the function ends. If i use a callback function and try to return the args.IsValid from there the validator can't react because the IsValid method is set to late.

In conclusion, with AjaxPro framework this example works

 function descriptionRequiredValidate(source, args){
 var ajaxResult = FileAdmin.AjaxMethods.IsDescriptionRequired(...);
 var descriptionText = document.getElementById("tbFileDescription");
 var descriptionRequired = ajaxResult.value;
if(descriptionText.value =="" && descriptionRequired){
 args.IsValid =false;
 }
else{
 args.IsValid =true;
 }
}

As you can see no callback function is required but when i try to use the ASP.NET AJAX with a web service i can't read ajaxResult. Do i make a mystake somewhere or this tipe of response(without callback) only works with ajaxpro 

Your simplest path is to move your final declaration of validity to the OnSuccess handler of the service call.

Call method of Master page from Update panel

Hi,

How to call the method of master page from the UpdatePanel. Do I need to write a trigger? Provide the syntax.

Calling your master page from an update panel is no different from doing it on a "normal" page. All you need to make sure is that you have added a reference to your MasterType in your aspx code:

<%@. MasterType VirtualPath="~/MasterPage.master" %>

Then you can do Master.SomeMethod() from your page.

Hi,

Thanks the above code is already added. I have implemented the same, it is woring fine for the controls outside the Update panel. Same method call is not supported from update panel.

Jist of what I am looking at:

I want to display a message in the master page, which is a UserControl. I am facing the problem in invoking a method of UserControl in Master page from child page, all the controls in child page are embaded in the UpdatePanel.

Can you provide the syntax for the same

How the following line of code can help me?

ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl( );

Hi,

Thank you for your post!

To invoke a method of UserControl in Master page from child page? or fire an event of the UserControl?

Invoke a method of UserControl in Master page from child page lkike this!

UserControl uc = ((UserControl)Master.FindControl("uc1"));
uc.yourmethod();

If you have further questions, let me know.

Best Regards,

Call javascript after UpdatePanel updates

Hi,

Is it possible to call a javascript function after the update panel finishes updating? For example - I click on a product which populates a table inside an update panel, when this update is complete I would like to move the div containing the product data to the point where the user clicks. My problem is how to call the javascript that makes this happen.

Thanks for any and all advice / code / links.

Hello,

you need to create a javascript function and bind that to the pageloaded event of the pagerequestmanager class. Here's how it might look:

var prm = Sys.WebForms.PageRequestManager.getInstance();prm.add_pageLoaded( function() { // Your function body comes here});

The pagerequestmanager is responsible for handling the AJAX calls. It has several events that you can handle.

Good luck!

hello.
well, in this case, I'd use the endrequest event of the pagerequest manager since it is called only when the?partial?postback?ends?(and?it's?also?called?when?you?get?an?error?during?a?partila?postback).?the?code?is?the?same?as?the?previous?poster?has?shown;?the?difference is?that?yo?use?the?add_endRequest?method?instead?of?calling?the?add_pageLoad?method.
Correct, my example with the pageloaded will also execute the first time the page loads. That might not be what you need, so go with endrequest like the previous poster said.

You probably want to subscribe to the pageLoaded event so that you can access the panelsUpdated property.

http://ajax.asp.net/docs/ClientReference/Sys.WebForms/PageLoadedEventArgsClass/PageLoadedEventArgsPanelsUpdatedProperty.aspx

Example:

http://ajax.asp.net/docs/ViewSample.aspx?sref=Sys.WebForms.PageRequestManager.pageLoaded

Call function and show results in update panel

Hi,

I've recently dipped into the world of AJAX and want to check if an idea I had is possible with it.

I have a page that takes values passed into from a previous page via a Cross Page PostBack. These values are used in an SQL query on the results page. The problem is that the query is very long, and takes around 5-10 seconds to complete (sometimes longer).

I want to show our users that the page is working in the background, and I believe it can only be done in AJAX. Ideally, I'd like to make a label that says something like "Operation complete" inside an UpdatePanel visible after the SQL query has been completed. I want the rest of the page to complete loading as quickly as possible, and have the update panel display it's message when everything's done.

I can see two ways of doing this:

Have the SQL query performed on the Page_Load event.Have the SQL query performed directly by the UpdatePanel calling a server side function.

Are either of these methods possible? The first method looks like it should work (maybe with threading), but I'm too much of a novice to know where to start. Can anyone recommend any good tutorials, or show me an example with a simple "Hello World" and Sleep() operation.

By the way, I'm also using master pages.

Thanks for any help you can offer.

Hi,

Please note that on the server side, there is not much difference between handling a normal postback an a partial postback. ASP.NET will create a new instance of the page that being requested to serve the request. And the page will go throught a full lifecycle.
So there won't be much difference between the two ways your posted, but option 2 is a bit better because the operation isn't necessorily to run each time.

I think your problem can be perfectly solved with UpdateProgress Control, please readthis for more information.
Hope this helps.

Call a page which contains updatepanel

Hi,

I have a page say CChildPage which contains an Update Panel.I want to call this page in another page thru

script tag and specifying the src="http://pics.10026.com/?src=CChildPage.aspx" .If i do this it gives me a syntax error.Is it possible to call a page like this.

The code is as follows :

<body><form> <table><tr><td>

<script src="http://pics.10026.com/?src=CChildPage.aspx" ></script>

</td></tr></table> </form></body>

Regards,

Shweta

Shweta mehta:

I have a page say CChildPage which contains an Update Panel.I want to call this page in another page

Basically you want to go from your current page to your new cchildpage right?

You can either use hyperlinks to do this or use javascript to change the document.location

You can use hyperlinks like this and the user will click on the link

<a href='cchildpage.aspx'>My Page</a>

Or you can use javascript

document.location.href = "the url of yourcchildpage.aspx"

No i dont want to go from current page to new page

I want to call my child page inside the new page and also it shld be placed under the table tag.If the child page is called in this way and if it contains UpdatePanel then it doesnt wrk and gives syntax error.

Please help me on this.

Regards,

Shweta

Hi Shweta,

I think iFrame is a good choice for nesting a page inside another. Like this:

<body><form> <table><tr><td>

<iframe src="http://pics.10026.com/?src=CChildPage.aspx" ></iframe>

</td></tr></table> </form></body>

Hi,

Is there any other way as i dont want to use iframes.

Iframe is the way to go...Looking at what you need to do, since its just display one page insider another,if I were you , would choose iframes.However is there any particular reason you do not want to use iframes?

http://www.jsworkshop.com/articles/02scriptsrc.html

Check this out

CalendarPopup not showing up over PopupControlExtender

I have a panel that is popped up via a PopupControlExtender and inside that panel I have a CalendarExtender that pops up but it is NOT showing up over top of the PopupControlExtender that is already popped up...How can I force the CalendarExtender to pop up over everything?

Thanks, Greg

I got the calendarExtender to work after I took it out of being contained in a UserControl... There must be something buggy with the CalendarExtedner being in a UserControl??

CalendarExtender with a ModalPopupExtender and missing weekdays

Hi

I am trying to use a CalendarExtender inside a Panel being shown as a ModalPopup. The functionality is fine , however the calendar has cropped two days of it the week of a week meaning that I am only seeing fron Sunday till Thursday. How am I to fix this or work around it ?

<asp:LinkButton ID="LinkButton1" runat="server">Godkend</asp:LinkButton>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" BackgroundCssClass="modalBackground" CancelControlID="Button2" runat="server" TargetControlID="LinkButton1" PopupControlID="Panel1">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" style="display:none">
<div >
<fieldset>
<legend>Detajler</legend>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Value="0" Selected="True">Alle</asp:ListItem>
<asp:ListItem Value="1" >Valgte</asp:ListItem>
</asp:RadioButtonList>


<asp:RadioButtonList ID="RadioButtonList1" runat="server">
<asp:ListItem Value="2" Selected="True">Godkendt</asp:ListItem>
<asp:ListItem Value="1">Afvist</asp:ListItem>
<asp:ListItem Value="0">Afventer</asp:ListItem>
</asp:RadioButtonList>
<asp:Label ID="Label4" runat="server" Text="Dato"></asp:Label><br />
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="TextBox2" >
</cc1:CalendarExtender>
</fieldset>
<div>
<asp:Button ID="Button1" runat="server" Text="Ok" OnClick="Button1_Click" />
<asp:Button ID="Button2" runat="server" Text="Cancel" />
</div>
</div>
</asp:Panel>

Regards

I copied your code and it worked just fine for me. What timezone are you in?

I copied your code and it worked just fine for me. What timezone are you in?

I copied your code and it worked just fine for me. What timezone are you in?

I

I copied your code and it worked just fine for me. What timezone are you in?

I know

I copied your code and it worked just fine for me. What timezone are you in?

...

DisturbedBuddha:

I copied your code and it worked just fine for me. What timezone are you in?

I am in CET +1h. I can see others having experienced this issue also. They have been able to work around with some CSS tricks , but I have not been able to.

http://forums.asp.net/p/1089990/1642856.aspx

CalendarExtender Rendering Problems

Hello,

I'm experiencing some rendering glitches with the CalendarExtender control. The calendar doesn't fit within the panel that it renders. For instance, one of my calendars shows only Sunday-Friday, while another shows only Sunday-Wednesday. There are some other minor glitches when I navigate to different levels. This seems to depend on the padding of the parent control.

I temporarily disabled my theme, and everything works fine, but reapplying the theme reintroduces the problem. I've tried adding the .ajax__calendar styles to my theme with no noticeable effect.

Thanks in advance.

Hi rmuti,

what if you add a cssclas to your calendar extender?

use css class MyCalendar,

 <style type="text/css"> .MyCalendar .ajax__calendar_container { border:1px solid #646464; background-color: lemonchiffon; color: red;}.MyCalendar .ajax__calendar_other .ajax__calendar_day,.MyCalendar .ajax__calendar_other .ajax__calendar_year { color: black;}.MyCalendar .ajax__calendar_hover .ajax__calendar_day,.MyCalendar .ajax__calendar_hover .ajax__calendar_month,.MyCalendar .ajax__calendar_hover .ajax__calendar_year { color: black;}.MyCalendar .ajax__calendar_active .ajax__calendar_day,.MyCalendar .ajax__calendar_active .ajax__calendar_month,.MyCalendar .ajax__calendar_active .ajax__calendar_year { color: black; font-weight:bold;} </style>

Please let me know if this helps ;)

Wim

Nope, that just makes things worse. Now the calendar is transparent for some reason.

damn maybe I gave you the wrong example,

but thats just because not all the styles are applied ...

The real issue was that not all the dates were shown right?
And now they are? Or not?

If this is the case, then we can just ajust the style-tags and you're problem is solved!

Kind regards,
Wim

Nope, Saturday is still cut off.

rmuti:

Nope, Saturday is still cut off.

Hmm, could you replicate this behavior in an example? That way I can look into the problem myself.

Kind regards,
Wim

Hi Rmuti,

Please remove the CSS settings that you added to the CalendarExtender manually and also you should remove the unnecessay parts, then have a test. If the problem is still there, please adjust your time zone. If all these don't work, we suggest that you should download a sample fromhttp://www.asp.net/learn/ajax-videos/ and test the sample. If the sample also doesn't work, you should focus on your system enviroments. For example, Microsoft ASP.NET AJAX Extensions , AJAX Control Toolkit's version etc.

Please feel free to let me know with more information. Sometimes , we really need a workable sample to find out the exact root cause.

Best regards,

Jonathan

OK, I've identified the cause of the issue. The calendar renders the days/months/years in a table, but does not specify the padding for the table cells. As a result, if you place the calendar within a table cell with padding, then the calendar table will inherit the padding from the parent table cell. Here is a simple page that will reproduce the issue:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> table.myTable tr td { padding: 20px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table class="myTable"> <tr> <td>Date:</td> <td> <asp:TextBox ID="dateTextbox" runat="server" /> <ajaxToolkit:CalendarExtender ID="dateCalendar" runat="server" TargetControlID="dateTextBox" /> </td> </tr> </table> </form> </body></html>

I've been able to resolve the issue by explicitly specifying the padding for the calendar table as follows:

 
<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style type="text/css"> table.myTable tr td { padding: 20px; } .ajax__calendar_body table tr td { padding: 0px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <table class="myTable"> <tr> <td>Date:</td> <td> <asp:TextBox ID="dateTextbox" runat="server" /> <ajaxToolkit:CalendarExtender ID="dateCalendar" runat="server" TargetControlID="dateTextBox" /> </td> </tr> </table> </form> </body></html>
 

Hi Rmuti,

In the first situation, table.myTable tr td { padding: 20px; } has an impact on the CalendarExtender. Thanks for sharing your experience.

Best regards,

Jonathan

Thanks to this post I my calendar renders correctly BUT I am missing hover background shading
has anyone got any ideas what to add and where to get these back? I know they are being overidden by something but I don't know what...

.MyCalendar.ajax__calendar_container {border:1pxsolid#646464;background-color:#10377c;color:#ffffff;font-size:8pt;font-family:Verdana,'Colonna MT';}

.MyCalendar.ajax__calendar_bodytabletrtd {padding:0px;color:#10377c;background-color:#ffffff;}

CalendarExtender obscured by Panel control encapsulating GridView

Often, it is desirable to encase a GridView within a Panel control to delimit the grids size and provide scroll bars, thus, allowing a more WinForm like UI experience. The problem I am running into is that a CalendarExtender included therein, becomes hidden if its associated textbox is close to the lower or right boarder of the panel. One could extend the size of the Panel, but that's not a very aesthetically appropriate solution. Ideally, the z-index should be configurable for the CalendarExtender control so as to be able to force visibility under any circumstances. There are several other posts having to do with a similar problem and Dropdowns. See: http://forums.asp.net/thread/1554180.aspx for more information. Alternatively, it would be great to have the ability to set the visibility persistence so as to force the CalendarExtendar to stay visible until X'ed out. This would at least allow the user to scroll down the grid to see the rest of the Calendar. A third option might be to provide the ability to drag the Control anywhere on the page. Lastly, properties should be provided to set the Controls position relative to the Browser window itself. Ideally, all of these should be included to provide a truly robust and flexible mechanism.

I completely soooo agree with you!, Unfortunatly microsoft leaves things half undone and starts working on something else...

This...until people will ditch MICROSOFT!