ResizableControlExtender

I cannot get the ResizableControlExtender to work on a textbox multiline.
any help.........

I have also tried to put the text box in a panel & resize the panel. Only the panel resizes not the textbox

Hi U2envy1,

There's a wonderful sample contained in Ajax Control Toolkit. Here is the code section.

<asp:Panel ID="PanelText" runat="server" CssClass="frameText">
This text resizes itself to be as large as possible within its container.
</asp:Panel>

<ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender2" runat="server"
TargetControlID="PanelText"
ResizableCssClass="resizingText"
HandleCssClass="handleText"
MinimumWidth="100"
MinimumHeight="50"
MaximumWidth="400"
MaximumHeight="150"
OnClientResize="OnClientResizeText" />

function OnClientResizeText(sender, eventArgs) {
// This sample code isn't very efficient, but demonstrates the idea well enough
var e = sender.get_element();
// Make the font bigger until it's too big
while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {
e.style.fontSize = (fontSize++)+'pt';
}
var lastScrollWidth = -1;
var lastScrollHeight = -1;
// Make the font smaller until it's not too big - or the last change had no effect
// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)
while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&
((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) {
lastScrollWidth = e.scrollWidth;
lastScrollHeight = e.scrollHeight;
e.style.fontSize = (fontSize--)+'pt';
}
}

There's a little difference to what your want.You can use $get("<%=Your TextBox.ClientID%>").style.width= value to change its width property.

For more details , please dip into the source code.

Best regards,

Jonathan

Thanks much appreciated.
How do I do this ?

You can use $get("<%=Your TextBox.ClientID%>").style.width= value to change its width property.

Hi U3envy1,

I have found another solution which is better than the former. It will change the TextBox's width sostenuto while the former solution only changes its width after the resize operation. In this solution, we attached a Javascript function to the ResizableControlExtender's add_resizing event. The function will resize the TextBox according to the Panel's width.

Here is the whole sample which you can copy into your project.

<%@. 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> .handleText { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } .resizingText { padding:0px; border-style:solid; border-width:2px; border-color:#7391BA; } .frameText { width:100px; height:100px; overflow:auto; float:left; background-color:#ffffff; border-style:solid; border-width:2px; border-color:Gray; font-family:Helvetica; line-height:normal; } </style> </head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="frameText"> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" BehaviorID="MyRCEBID" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="100" MinimumHeight="50" MaximumWidth="400" MaximumHeight="150" /> <script type="text/javascript" language="javascript"> var widht;function pageLoad(){ $find('MyRCEBID').add_resizing(onResizing); } function onResizing(){ width = $find('MyRCEBID').get_element().style.width; width = width.substring(0,width.length-2); width = width -10; width = width +'px'; $get("<%=TextBox1.ClientID%>").style.width = width; } </script> </form></body></html>

I really hope this help. Please pay special attention to the "Bold" Part.

Best regards,

Jonathan

Thanks much appreciated. I will try it soon. Just have so much to do at the moment. thanks again.

I had a chance to play with it. Its just what I wanted. Thanks its working beautifully.
How do I get the Textbox height to grow with the panel control?

Hi U2envy1,

$get("<%=TextBox1.ClientID%>").style.height = $find('MyRCEBID').get_element().style.height; Please have a try. By the way, you should modify the height property just like what we did on the width property.

Best regards,

Jonathan

Thanks once again.
One more thing about this. How do I get the font size to increase and decrease accordingly.

Hi U2envy1,

$get("<%=TextBox1.ClientID%>").style.fontSize = a certain value. Now , you should write your own arithmetic to work out value.

Best regards,

Jonathan

Hi,

I've done this and it works fine, except when I put it in a user control. When I do this, and use the resizable textbox more than once on the same page it gives me the error "Error: Sys.InvalidOperationException: Two components with the same id 'MyRCEBID' can't be added to the application".

So basically do I just need to change the "behaviorid" and the bit of javascript that references it to be something dynamically named? And if so, how might I go about this?

My code basically mirrors 'Jonathan Shen's' post

Hi Jonathan, I found code to work out the arithmetic value. how do I add this to the code you have provided already.

var fontSize = 12;

function OnClientResizeText(sender, eventArgs) {

// This sample code isn't very efficient, but demonstrates the idea well enough

var e = sender.get_element();

// Make the font bigger until it's too big

while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) {e.style.fontSize = (fontSize++)+'pt';

}

var lastScrollWidth = -1;

var lastScrollHeight = -1;

// Make the font smaller until it's not too big - or the last change had no effect

// (for Opera where e.clientWidth and e.scrollWidth don't behave correctly)

while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) &&

((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) {

lastScrollWidth = e.scrollWidth;

lastScrollHeight = e.scrollHeight;

e.style.fontSize = (fontSize--)+'pt';

}

Hi U2envy1,

I think you can add arithmetic code insideonResizing(){},sender.get_element() equal to $find('MyRCEBID').get_element(), you can replace it.

Hope this help.

Best regards,

Jonathan

I am lost when it comes to Java Script.
This is what I have so far. Any help on this. My font goes very small on resize thou. How do I increment it ?

var fontSize = 12;

function onResizing(){

width = $find('MyRCEBID').get_element().style.width;

width = width.substring(0,width.length-2);

width = width -10;

width = width +'px';height = $find('MyRCEBID').get_element().style.height;

height = height.substring(0,height.length-2);

height = height -10;

height = height +'px';

$get("<%=TextBox1.ClientID%>").style.width = width;

$get("<%=TextBox1.ClientID%>").style.height = height;

fontSize = $find('MyRCEBID').get_element().style.fontSize;fontSize = (fontSize++)+'pt';

$get("<%=TextBox1.ClientID%>").style.fontSize = fontSize;

}

Hi U2envy,

Here is the sample that I have expanded the reset text function.

<%@. 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> .handleText { width:16px; height:16px; background-image:url(images/HandleGrip.png); overflow:hidden; cursor:se-resize; } .resizingText { padding:0px; border-style:solid; border-width:2px; border-color:#7391BA; } .frameText { width:100px; height:100px; overflow:auto; float:left; background-color:#ffffff; border-style:solid; border-width:2px; border-color:Gray; font-family:Helvetica; line-height:normal; } </style> </head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="frameText"> <asp:TextBox ID="TextBox1" runat="server" value="hello"></asp:TextBox> </asp:Panel> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender1" runat="server" TargetControlID="Panel1" BehaviorID="MyRCEBID" ResizableCssClass="resizingText" HandleCssClass="handleText" MinimumWidth="100" MinimumHeight="50" MaximumWidth="400" MaximumHeight="150" /> <script type="text/javascript" language="javascript"> var widht; function pageLoad(){ $find('MyRCEBID').add_resizing(onResizing); } var fontSize = 12; function onResizing(){ width = $find('MyRCEBID').get_element().style.width; width = width.substring(0,width.length-2); width = width -10; width = width +'px'; $get("<%=TextBox1.ClientID%>").style.width = width; $get("<%=TextBox1.ClientID%>").style.height = $find('MyRCEBID').get_element().style.height; e = $get("<%=TextBox1.ClientID%>"); // Make the font bigger until it's too big while((e.scrollWidth <= e.clientWidth) || (e.scrollHeight <= e.clientHeight)) { e.style.fontSize = (fontSize++)+'pt'; } var lastScrollWidth = -1; var lastScrollHeight = -1; // Make the font smaller until it's not too big - or the last change had no effect // (for Opera where e.clientWidth and e.scrollWidth don't behave correctly) while (((e.clientWidth < e.scrollWidth) || (e.clientHeight < e.scrollHeight)) && ((Sys.Browser.agent !== Sys.Browser.Opera) || (e.scrollWidth != lastScrollWidth) || (e.scrollHeight != lastScrollHeight))) { lastScrollWidth = e.scrollWidth; lastScrollHeight = e.scrollHeight; e.style.fontSize = (fontSize--)+'pt'; } }form></body></html>

fontSize = $find('MyRCEBID').get_element().style.fontSize get the Panel's fontSize instead of the TextBox's.

I hope this help.

Best regards,

Jonathan

Thanks much appreciated. I wish to add this code to every app I build. Ill comment it with inspired by Jonathan.
Thanks again...... !!!

Response.redirect - display text in same page.

Hi guys,

I am using A.aspx , B.aspx and C.aspx pages.

From A.aspx I am calling b.aspx via Ajax code. After (Check Login user from database) success status , I am tryint o redirecting to C.aspx. But

C. aspx page content is dispalying in A.aspx. It suppose to be redirec to C.aspx. What I am dong wrong here..??

any suggessions ??

hello.

well, i'mo not following you. can you be more specific?

I am trying to check the Loginuser permissions from the Database. Once he get success permission the page has to redirect to new page.
here is my Code.

Login.aspx (a.aspx) - Enter user id & pwd and click Submit then below code executes

function CheckUser()
{
if (preLoginCheck())
{ var url = serverName+"checkLogUser.aspx?userID="+ document.frmDefault.txtUid.value +"&Pwd="+ document.frmDefault.txtPwd.value;
xmlHttp = GetXmlHttpObject(ChangeHandler);
xmlHttp_Get(xmlHttp, url);
}
}

function ChangeHandler()
{ if (xmlHttp.readyState == 4 || xmlHttp.readyState == 'complete')
{ var getData=xmlHttp.responseText;
if (getData=="Success")
{ document.getElementById("ErrorCode").innerText=" GoooooooooooooooD";
}
else
{
document.getElementById("ErrorCode").innerText=getData; //" Invalid User name /Password";
}
}
}

checkLogUser.aspx (b.aspx) - Ajax will execute this page from here itself I want to redirec to Third Page..

If (tmpUserID <> "" And tmpUserPwd <> "") Then
crapObj = New CRAPManagement
getLogInStatus = crapObj.checkLoginUserAccess(tmpUserID, tmpUserPwd)
If getLogInStatus = "Success" Then
Response.Redirect("UserCreate.aspx") --> C.Aspx
Else
Response.Write(getLogInStatus)
End If
End If

Finanl result is C.Aspx page content is displaed in Login.aspx Page.

hello.

well, if you're using asp.net 2.0, then check the authenticationservice class:

http://www.asp.net/ajax/documentation/live/ClientReference/Sys.Services/AuthenticationServiceClass/default.aspx

Hello,
I could't understand wha should I do exactly...!

hello.

well, instead of writing your own code for making the remote call and then having to build your page on the server that has server logic for authenticating a user, you'll get that for free with the service i've showed you in the previous post (it'll authenticate by using forms authentication and it'll automatically use the current defined membership provider you've set up on the server side).

Restricting Dates in an AJAX Calendar

I need to build some logic into my ajax calendar control to prevent the user from entering a date that is less than today's date. I have two text boxes with one called SDate and another called FDate. Each of these text boxes have AJAX calendar extenders attached. So i am trying to figure out when the user clicks the text box, they can only select a date from the AJAX calendar that occurs from today's date onwards. The previous dates should be unselectable.

I thought the follwing code would work, but it seems it does not, as the AJAX calendar control doesn't seem to have the DayRender feature of the full .NET calendar.

ProtectedSub CEStartDate_DayRender(ByVal senderAsObject,ByVal eAs DayRenderEventArgs)

If e.Day.[Date] < Today()Then

e.Day.IsSelectable =False

Else

e.Day.IsSelectable =True

EndIf

EndSub

Any thoughts??

Hi Lochview,

Yes , we can keep the select date in within boundies when we use Calendar but not CalendarExtender(Ajax control). Based on the research of its source code, we can find that CalendarExtender generated all on the client using Javascript and we can control less on the server side. So unfortunately, we cannot achieve what you want by using any direct properties or functions unless we modify its source code. Below is the code snippet which is used to generate its days.

_buildDays : function() {
/// <summary>
/// Builds a "days of the month" view for the calendar
/// </summary>

var dtf = Sys.CultureInfo.CurrentCulture.dateTimeFormat;

this._days = $common.createElementFromTemplate({
nodeName : "div",
cssClasses : [ "ajax__calendar_days" ]
}, this._body);
this._modes["days"] = this._days;

this._daysTable = $common.createElementFromTemplate({
nodeName : "table",
properties : {
cellPadding : 0,
cellSpacing : 0,
border : 0,
style : { margin : "auto" }
}
}, this._days);

this._daysTableHeader = $common.createElementFromTemplate({ nodeName : "thead" }, this._daysTable);
this._daysTableHeaderRow = $common.createElementFromTemplate({ nodeName : "tr" }, this._daysTableHeader);
this._daysBody = $common.createElementFromTemplate({ nodeName: "tbody" }, this._daysTable);

for (var i = 0; i < 7; i++) {
var dayCell = $common.createElementFromTemplate({ nodeName : "td" }, this._daysTableHeaderRow);
var dayDiv = $common.createElementFromTemplate({
nodeName : "div",
cssClasses : [ "ajax__calendar_dayname" ]
}, dayCell);
}

for (var i = 0; i < 6; i++) {
var daysRow = $common.createElementFromTemplate({ nodeName : "tr" }, this._daysBody);
for(var j = 0; j < 7; j++) {
var dayCell = $common.createElementFromTemplate({ nodeName : "td" }, daysRow);
var dayDiv = $common.createElementFromTemplate({
nodeName : "div",
properties : {
mode : "day",
innerHTML : " "
},
events : this._cell$delegates,
cssClasses : [ "ajax__calendar_day" ]
}, dayCell);
}
}
}

I hope this help.

Best regards,

Jonathan.

retrieve info dynamically created textbox in update panel

I have a textbox that is created in code in an Ajax Update Panel when then the user clicks on a dropdownlist.

I would then like to retreive the text that user types in:

Dim strTitleAsString =CType(Me.FindControl("txtPrimaryPersonTitle" + intSuggestedPrimaryPersonCount.ToString), TextBox).Text

It gives me an error that it can't find the control.

Can you offer any help??

Have you made sure that the textbox is re-created on postback?

You may also consider creating the textbox statically (in markup) instead of dynamically.
Set Visible=False in the markup, and make it visible in your dropdownlist code.
This prevents most of the problems inherent to dynamic controls.

Jos

hello.

how about a demo page so that we can see what you're doing? it has to be simple enough so that we ca simply copy/paste it in order to test it

Hi,

it can't find the control?

If the contorl still exist, the Id must not write.

I think it is easy to debug to see if the contorl is exist or not, and it is easy to find out what is the correct id of the contorl.

If you still have question,post up a repro of your issue.

Best Regards,

Rich text editor in an update panel

I want to use a javascript editor like fckeditor in my webpage where the textarea is in an updatepanel.

But the textarea isn't is the welcome page, she apear when you click on a linkbutton.

How can i do for the editor to trigger when the textarea come or for the editor to load when i click the link.

Thanks in advance.I NEED YOU, HELP ME PLEASE

Rich Text Editor using Atlas

Hi,

I need to create a basic RTE and was thinking about using some of the Atlas functionality until I realised that of course there is no SelectedText, SelectedLength, SelStart properties on string type controls such as Literal.

Can anyone tell me whether they know of a way that this might be achieved?

Many Thanks,

Grant

SelectedText, SelectedLength and SelStart.

the literal control does generate a specific html element, if any of those properties are present in javascript, you can probably apply them to the literal through javascript.

although, the real technique for the RTE s is using an iframe, the maniuplating the html inside the page contained in the iframe. that gives complete control over the text typed inside the iframe.

let me know if this gives any ideas

http://freetextbox.com/forums/post/6634.aspx