Going For AJAX: extender

Showing posts with label extender. Show all posts

Wednesday, March 28, 2012

How do I send email using ajax modal popup extender

I have a panel that sends an email message. I wish to use an ajax modal popup extender to display this panel when a user clicks a "Contact Us" link button. I get an error message when I try to run the application. My code follows.Thank you for any suggestions.

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID ="ContactUsLinkButton"
PopupControlID ="EmailPopupPanel"
OkControlID="OKButton"
CancelControlID="CancelButton"
DropShadow="true"
BackgroundCssClass ="modalBackground" />
<asp:LinkButton ID="ContactUsLinkButton" runat="server">Contact Us</asp:LinkButton>

<div >
<asp:Panel ID="EmailPopupPanel" runat="server" CssClass ="popupEmail" Width="325px" Style="display: none" >
<asp:Label ID="TitleLabel" runat="server" BackColor="#FFFFC0"
Font-Bold="True" Font-Size="Medium" ForeColor="SteelBlue" Text="Contact D`Stroke Tennis"
Width="300px"></asp:Label>
<br />
<asp:Label ID="InfoLabel" runat="server" Font-Bold="True" Font-Size="Medium" ForeColor="Red"></asp:Label>
<br />
<br />
<asp:Button ID="OKButton" runat="server" BackColor="#FFFFC0" Font-Bold="True" ForeColor="DarkRed"
Text="OK" Visible="False" /><br />
<span style="color: #990000"><strong><asp:Label ID="FromLabel" runat="server" Text="From:"></asp:Label></strong> </span>
<asp:TextBox ID="FromTextBox" runat="server" Width="250px" ForeColor="DarkRed"></asp:TextBox>
<br />
<br />
<asp:Label ID="ToLabel" runat="server" Text="To: admin@dotnet.itags.org.dstroketennis.com" Width="300px" BackColor="#FFFFC0" Font-Bold="True" ForeColor="DarkRed"></asp:Label>
<br />
<br />
<span style="color: #990000"><strong><asp:Label ID="SubjectLabel" runat="server"
Text="Subject:"></asp:Label></strong></span>
<asp:TextBox ID="SubjectTextBox" runat="server" Width="240px"></asp:TextBox><br />
<br />
<span style="color: #990000"><strong>
<asp:Label ID="MessageLabel" runat="server"
Text="Message:"></asp:Label></strong></span><br />
<asp:TextBox ID="MessageTextBox" runat="server" Height="150px" TextMode="MultiLine"
Width="300px" ForeColor="DarkRed"></asp:TextBox><br />
<asp:Button ID="SendEmailButton" runat="server" BackColor="#FFFFC0" BorderColor="DarkRed"
BorderStyle="Solid" Font-Bold="True" ForeColor="DarkRed" Text="Send Email" Width="173px" />
<br />
<asp:Button ID="CancelButton" runat="server" BackColor="#FFFFC0" BorderColor="DarkRed"
BorderStyle="Solid" Font-Bold="True" ForeColor="SteelBlue" Text="Cancel Email" Width="173px" /></asp:Panel>
</div>
</form>
</body>

Tags:ajax, ie 7, Microsoft JScript runtime error: Sys.ArgumentNullException: Value cannot be null. Parameter name: element

When do you get the Sys.ArgumentNullException error? Also, try getting rid of the Style="display: none" on the Panel...

-Damien

I get the error when the page loads.

I Got rid of the Style "display : none" and I get the same error on page load.

See if this related post helps:http://forums.asp.net/p/1107533/1700376.aspx

-Damien

I also ran across this:http://www.spthorn.com/blog.php?post=28&PHPSESSID=c42ace58bb0f0d24ab3d9d2eef948c4a

-Damien

Thanks Damien. The asp buttons weren't plugged into anything I am guessing. My new challenge with this now is to have the email send, and display a message that the send was a success before leaving modal state.

At least this one issue is handled.

How do I put a scrollbar on an AutoComplete extender?

Hi, I'm new to the AJAX toolkit (and AJAX) so I hope you'll forgive me asking this stupid question. I can see from the example website that it is possible to have an AutoComplete extender which if you have more than say ten suggestions, it shows the first ten and then you can scroll through the rest.

However, I can't see which bit of the example code tells it to do that. What I Here's what I've got right now.

<form id="form1" runat="server">
<asp:ScriptManager ID="AutoCompleteScriptManager" runat="server" >
<Services>
<asp:ServiceReference Path="AutoCompleteService.asmx" />
</Services>
</asp:ScriptManager>
<br />
<asp:TextBox ID="TextBox1" runat="server" Columns="40" ></asp:TextBox>

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender" runat="server" TargetControlID="TextBox1" CompletionInterval="10" MinimumPrefixLength="1" ServicePath="AutoCompleteService.asmx" ServiceMethod="GetCompletionList" >

</ajaxToolkit:AutoCompleteExtender>
</form

I'd appreciate it if somebody could point me in the right direction. Thanks.

Just thought I'd bump this thread as it had gone off the front page. I'd really appreciate some help with this.

You need to use an appropriate CSS class with overflow:auto on the appropriate elements.

Set a value for CompletionListCssClass to something that controls the CSS correctly. Not being a CSS chap, I leave that exercise to somebody else :)

Hi GillouX,

Here is the sample that we set the AutoComplete's CompletionListElementID to a Panel and then set the css to the panel.

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
.AutoExtender
{
font-family: Verdana, Helvetica, sans-serif;
font-size: .8em;

font-weight: normal;
border:solid 1px #006699;

line-height:20px;
padding:2px;
background-color:White;
}

.AutoExtenderList
{
border-bottom:dotted 1px #006699;
cursor:pointer;
color:Maroon
}

.AutoExtenderHighlight
{
color:White;
background-color:#006699;
cursor:pointer;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:TextBox ID="TBSearch" runat="server"></asp:TextBox>
<asp:Panel runat="server" ID="myPanel" Height="100px" ScrollBars="Vertical">
</asp:Panel>
<ajaxToolkit:AutoCompleteExtender runat="server" ID="autoComplete1" BehaviorID="myACEBID" TargetControlID="TBSearch"
ServicePath="AutoComplete.asmx" ServiceMethod="GetCompletionList" MinimumPrefixLength="1" CompletionListCssClass="AutoExtender" CompletionListItemCssClass="AutoExtenderList" CompletionListHighlightedItemCssClass="AutoExtenderHighlight" CompletionInterval="1" EnableCaching="true" CompletionSetCount="12"CompletionListElementID="myPanel"/>
<br/><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</form>
</body>
</html>

WebService

"C#" Class="AutoComplete" %>using System;using System.Web;using System.Web.Services;using System.Web.Services.Protocols;using System.Collections.Generic;[WebService(Namespace ="http://tempuri.org/")][WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)][System.Web.Script.Services.ScriptService]public class AutoComplete : System.Web.Services.WebService { public AutoComplete() { } [WebMethod] public string[] GetCompletionList(string prefixText, int count, string contextKey) {// contextKey += "23"; if (count == 0) { count = 10; } if (prefixText.Equals("xyz")) {return new string[0]; } Random random =new Random(); List<string> items =new List<string>(count);for (int i = 0; i < count; i++) {char c1 = (char)random.Next(65, 90);char c2 = (char)random.Next(97, 122);char c3 = (char)random.Next(97, 122); items.Add(prefixText + c1 + c2 + c3); }return items.ToArray(); }}

I hope this help.

Best regards,

Jonathan

Monday, March 26, 2012

How do I incease the width of CalendarExtender?

All,

I'm not able to increase the width of the calendar extender. I changed the width inside Calendar.css and set the property of CalendarExtender to point to this css class. Yet I don't see the changes. Do I need to put the class name as the "CssClass" value or should it be the filename (Calendar.css)?

Hi VivekSriAus,

Please read this: http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Calendar/Calendar.aspx

Here they say that the default css will be used, except for the values that you override.

I made the width of the calendar change by doing the following:
(Note that I see the width increase but that the style in a whole is not perfect! I'm just showing you how to play around with it!)

<cc1:CalendarExtender ID="CalendarExtender1"
runat="server" Enabled="True" TargetControlID="TextBox1"CssClass="test">
</cc1:CalendarExtender
<style type="text/css">
.test.ajax__calendar_body
{
width:500px;
}
</style>

Go to the link if you want to know where you should override what style. On the link they talk about the css.

Kind regards,
Wim

Thanks for the reply. Although that helped me solve the "width" issue, I'm losing all the other styles. How do I add style to, say, ajax__Calendar_previous? I can't use the same class name, right?

Hi,

Ok maybe this is a bit better style:

.test.ajax__calendar_container {padding:10px;position:absolute;cursor:default;width:350px;font-size:15px;text-align:center;font-family:tahoma,verdana,helvetica;background-color:lemonchiffon;border:1pxsolid#646464;}

But just play around with it a bit.

In the toolkit example is also a calendar with custom styling.

Also, go to the Calendar.css and check out the styles ... play around with them.

You also must read this:

http://mattberseth.com/blog/2007/10/theming_the_ajaxcontroltoolkit.html

Kind regards,
Wim

How do I get the CalendarExtender to show Gridview Templete Field

i want to use Calendar Extender Control in My grid view's temple field how can i use that calendar control

Code (calendar extender is associated with End Date):

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Employee Id,Start Date" DataSourceID="SqlDataSource1">
<Columns>
<asp:CommandField ShowEditButton="True" />
<asp:BoundField DataField="Employee Id" HeaderText="Employee Id" ReadOnly="True" SortExpression="Employee Id" />
<asp:TemplateField HeaderText="Start Date" SortExpression="Start Date">
<EditItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("[Start Date]") %>'></asp:Label>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("[Start Date]") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="End Date" SortExpression="End Date">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("[End Date]") %>'></asp:TextBox>
<cc1:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="Textbox1">
</cc1:CalendarExtender>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("[End Date]") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>

How do I extend an Atlas extender?

Let's say I create my own Atlas Control Extender. For example, I create an extender called MyHoverExtender. But instead of extending Control or WebControl, I want to extend the HoverMenuExtender. But when I change it to use that, I get this error:

error BC32044: Type argument 'SearchResultItem.MyHoverExtenderProperties' does not inherit from or implement the constraint type 'Microsoft.AtlasControlExtender.TargetControlPropertiesBase(Of AtlasControlToolkit.HoverMenuExtender)'.

Can anyone help me with this error?

Thanks

The extender class and the properties class have to travel in pairs. So if you derive from the extender, you need to also do so from the properties class. I think if you just have your MyHoverExtenderProperties class inherit from HoverMenuProperties you should be OK.

So here's what I've got right now:

-----------------

MyHoverExtenderDesigner.vb:

Class MyHoverExtenderDesigner
Inherits Microsoft.AtlasControlExtender.Design.ExtenderControlBaseDesigner(Of MyHoverExtenderProperties, AtlasControlToolkit.HoverMenuExtender)
End Class

Produces this error:

-----------------

MyHoverExtenderExtender.vb:

<Assembly: System.Web.UI.WebResource("SearchResultItem.MyHoverExtenderBehavior.js", "text/javascript")>

<System.ComponentModel.Designer(GetType(MyHoverExtenderDesigner))> _
<Microsoft.AtlasControlExtender.ClientScriptResource("MyHoverExtender", "MyHoverExtenderBehavior", "SearchResultItem.MyHoverExtenderBehavior.js")> _
Public Class MyHoverExtenderExtender
Inherits Microsoft.AtlasControlExtender.ExtenderControlBase(Of MyHoverExtenderProperties, AtlasControlToolkit.HoverMenuExtender)
End Class

Produces this error:

-----------------

MyHoverExtenderProperties.vb

<System.ComponentModel.DefaultProperty("MyProperty")> _
Public Class MyHoverExtenderProperties
Inherits Microsoft.AtlasControlExtender.TargetControlPropertiesBase(Of AtlasControlToolkit.HoverMenuProperties)

Public Property MyProperty() As String
Get
Return GetPropertyStringValue("MyProperty")
End Get
Set(ByVal value As String)
SetPropertyStringValue("MyProperty", value)
End Set
End Property

End Class

This file builds without any errors as far as I can tell.

Oh, sorry, just find my problem.

The MyHoverExtenderProperties class was declared thusly:

Public Class MyHoverExtenderProperties
Inherits Microsoft.AtlasControlExtender.TargetControlPropertiesBase(Of AtlasControlToolkit.HoverMenuProperties)

But it should be declared:

Public Class MyHoverExtenderProperties
Inherits Microsoft.AtlasControlExtender.TargetControlPropertiesBase(Of AtlasControlToolkit.HoverMenuExtender)

That's closer. Does that work?

I think you actually want:

public class MyHoverExtender inherits HoverMenuExtender

public class MyHoverExtenderProperties inherits HoverMenuProperties

What you have above says that you'll be extending controls of type HoverMenuExtender, which I don't think you want.

Yeah, I think you're right. I'm in the process of confusing myself today between wanting to extend my own custom control using a modified version of the hover extender. I think I've almost got my head around it all.

:) Okay if you want more help confusing yourself, just let us know and we'll be glad to lend a hand.

Seriously, our refresh should help with this - I'm concerned you may run into some issues getting the right scripts to load as is. I haven't tried what you're doing so do let us know.

How do I collapse Collapsible Panel

I'm trying to write SlideMenu very similar to the way that the SlideMenu onwww.obout.com works using the Atlas Collapsible panel extender.

Is there a way that I can programatically collapse the panel. basically if i have 5 panels controls collapsible if one if opened i want the other four to close. Can anyone tell me how i can do this in code behind or client side.

The newest release of the toolkit contains an Accordian control (sorry we don't have a sample page posted yet) that does exactly what you're looking for. Check it out by downloading from:

http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit

Cheers, I realised I was being a bit of a muppet about 30 seconds after I posted this question.When I found the property sheet in intellisense. Unfortunately I didnt read your post until id finished writing my server control. But the Accordian was Exactly what I was looking for thanks. :-)

Now for my next task write and AVL Tree For the AutoCompleteExtender.

How do i change the source code for an extender?

Hi all,

I have searched the forums, documentation and google but haven't found any help yet (mayby i'm searching for the wrong things). I need to modify ModalPopupExtender and have found the code i need to modify in the ModalPopupBehaviour.js but how can i change that code so that everytime i use a modalopupextender in my project it uses my modified extender. I'm guessing that i have to build it/something again but is it the cs project that i got when i downloaded the toolkit?

Could someone point me in the right direction mayby there is some kind og guide or how to that i haven't found. Or explain what i need to do.

Lot's of thanks!

Thought i'd explain what i wan't to achive.

In the modalpopupbeahvoiur code this code creates the background div:

this._backgroundElement = document.createElement('div');this._backgroundElement.style.display ='none';this._backgroundElement.style.position ='fixed';this._backgroundElement.style.left ='0px';this._backgroundElement.style.top ='0px';// Want zIndex to big enough that the background sits above everything else // CSS 2.1 defines no bounds for the <integer> type, so pick arbitrarilythis._backgroundElement.style.zIndex = 10000;if (this._BackgroundCssClass) {this._backgroundElement.className =this._BackgroundCssClass; }

I want to attach an onclick animation so that if a user clicks the background div then the modalpopup itsel should pulse. I thought of changing the above javascript code so that the div also got an id to witch i could attach the animation extender. But i don't know how to make my changes to the javascript code reflect in my project (see original post).

Is there perhaps an other way to create this animation? It should be somethink like if you bring up IE's properties window and click somewhere outside of it then the header flasehs.

Thanks again

I've shown how to modify the Javascript in an existing extender (in this case the ListSearch extender, to speed it up with massive lists) here:

http://damianblog.com/2007/06/19/speeding-up-listsearchextender/

You should be able to do the same kind of think with your changes to the ModalPopup. The key is to ensure that your web project references the newly build toolkit DLL.

Damian

Thanks! I'll check that out and get back when I get it to work! :)

I got it to work and thanks for your reply!

If anyone else wonders or reads this what i needed to do was to open the project file that was in the toolkit catalog and make my changes in the .js file then rebuild the project and make sure that my project (where I needed to use the changed extenders/behaviors) referenced to that newly build toolkit DLL in the toolkit bin debug or release folder.

/peronn

Wednesday, March 21, 2012

How can I send the date from one calendar extender to another?

None of the events appear to fire for the extender. I would like a person to select a date on the first calendar and have that date as the staring date for the second calender.

Thanksc

Hi sox21,

Use the client event of the textbox.

When the text changes, put the text in the other textbox.

Because the text is in the other textbox, that text (= which is a date) will be the Selected date for the 2nd calendar!

Is this what you are looking for?

... <script type="text/javascript"> function setDate(sender) { var mytxt = document.getElementById('TextBox5'); mytxt.value = sender.value; } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <br /> <asp:TextBox ID="TextBox1" runat="server" onchange="setDate(this);"></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender1"runat="server" Enabled="True" TargetControlID="TextBox1"> </cc1:CalendarExtender> <br /> <asp:TextBox ID="TextBox5" runat="server" ></asp:TextBox> <cc1:CalendarExtender ID="CalendarExtender5"runat="server" Enabled="True" TargetControlID="TextBox5"> </cc1:CalendarExtender> </div>...

Kind regards,
Wim

I am able to get this code working on a blank page but it does not work when I add it to my page. My page uses a master page. When I enter the client script in debug, the sender is valued as expected but mytxt is set to null and throws a JS Error. Any ideas?

Thanks

try

document.getelementbyid("<%= TextBox5.ClientID >")

when the content and master merge to get rendered, the ID's of controls get renamed. Just look at the source through the browser to check this behavior!!!

EDIT:; also note that the text gets set but the selectedDate in the calendarExtender is not changed! --> Am I right about this? I think I noticed this behavior

Kind regards,
wim

That did the trick. Also, the selected date on the calendar does change. This is the exact behavior I was looking for.

Thanks!!!

How can I see ModalPopup js code ?

I'm a big fan of the modal popup extender and I'm trying to implement it using plain DHTML since my client have no asp.net server and I'm using classic ASP.

As you know, there is a classic IE annoying bug with COMBO BOXES. They stay on top of every div, without respecting the z-index layout.

I'm interested in learning how the Ajax Control Toolkit programmers handled this situation so I can do the same.

I can't just hide the combos, since I'm usiing a transparent Modal Background and I wish I could see the combos BEHIND the Modal Background.

Thanks!

Hi,

You can download the source codehere. Its implementation can be found in ModalPopupBehavior.js file.

thanks

How can i Put close button inside the the popUp extender?

I want that when the popUp control appears there is close button on the popUp or in the panel which is extended by the popUp extender.

Once the close button is clicked the popUp control is hide. Thnks

Hi,

If you are using ModalPopup Extendar then its simple add the following property:

CancelControlID="Button1"

and for PopupControlExtender check out this:

http://weblogs.asp.net/lkempe/archive/2007/01/28/login-control-in-an-asp-net-ajax-toolkit-popupcontrolextender-with-a-close-button.aspx

thanks

Thanks... I will try it...

How can I make the collapsible panel extender NOT remember client state on post back?

I see one of the "features" of the collapsible panel extender is that it remembers it's client state after a post back, but I don't want that behavior after a successful post back. I have a form to fill out inside the collapsible panel and after post back, I want the panel to close as an indication that it was completed.

I've tried turning view state off on the collapsible panel and loading the change onPreRender and nothing seems to work. Is this possible?

Hi,

You can setMyExtender.EnableClientState = false; beforeOnInit (i.e. inOnPreInit) to disable ClientState. You could also leave ClientState enabled and manually close the panel when you want withMyExtender.Collapsed = true; MyExtender.ClientState = true.ToString();.

Thanks,
Ted

Wednesday, March 28, 2012

How do I send email using ajax modal popup extender

How do I put a scrollbar on an AutoComplete extender?

Monday, March 26, 2012

How do I incease the width of CalendarExtender?

How do I get the CalendarExtender to show Gridview Templete Field

How do I extend an Atlas extender?

How do I collapse Collapsible Panel

How do i change the source code for an extender?

Wednesday, March 21, 2012

How can I send the date from one calendar extender to another?

How can I see ModalPopup js code ?

How can i Put close button inside the the popUp extender?

How can I make the collapsible panel extender NOT remember client state on post back?

Going For AJAX

Blog Archive

About Me