2012年3月28日水曜日

requirePermission="false" in the web.config return warning.

I have unstalled AJAX rc 1 and I get the following warning(4 times), from my web project web.config, after compilation:

"The 'requirePermission' attribute is not declared"

How can I get rid of this warning ?

It comes from this section:

<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"/>
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false"/>
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"/>
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"requirePermission="false"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>

Hi leeorc

pleas review link below

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

hope it helps you


Ok I took the following advice:

You can workaround it by opening "c:\Program Files\Microsoft Visual Studio 8\XML\Schemas\dotnetconfig.xsd" and inserting the following at line 40:

"<xs:attribute name="requirePermission" type="boolean_type" use="optional" />"

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

Despite the fact that one person didnt recommend it, the workaroundhelpedme with non harmful ireversable issues.

Thanks

Leeor


I found that in the string "<xs:attribute name="requirePermission" type="boolean_type" use="optional" />", the type should be Type, I mean the t should be upper cased.

Liang

Reset (buttom) Functionality

Can somebody tell me of a robust way to reset controls (server side) on a form using ajax? Not sure if this is clear or not but the issue that I'm having is that I have an update panel that contains about 6-8 controls (drop down lists and text boxes). The text boxes contain ajax watermark extenders. I tried using the standard html reset button however, my watermarks are not coming back as the defautl text for each text box. Instead, the text boxes are just blank.

In addition, when just resetting a text box control in an update panel, if there is a dropdownlist (postback set to no) the drop down list flickers everytime and it is somewhat annoying.

Any advice and information on these two issues would be greatly appreciated.

Thanks

Hasn't anybody solved this?!

I've got a Reset link that calls a client-side javascript function, but I can't reset a watermarked textbox. (I've tried resetting its class attribute and its value, but it then loses its watermark behaviour.)

Any help would be greatSmile


I also am having this problem. It is amazing that nobody has replied!??Smile

Cheers

Reset a CascadingDropDown control

Can anyone tell me how to reset a group of drop down lists that are grouped together in a CCDD control? I've tried calling dropDownList1.Items.Clear(); but that's not working.

Thanks!

Jason

not sure on this one... but I think you need to call _onParentChange() on the first CascadingDropDownBehavior object... I think you can just set the ID in the CascadingDropDownProperties and then use $object('long_generated_id')._onParentChange( false );

Sorry, but I'm not following... I can't find a method or event _onParentChange for either the CCDD or the DDL itself. I'm also not sure what you mean by $object("long_generated_id"). Where to I get this ID?

Can you provide an example?

Thanks!


Hi Jason,

Jaykul's talking about setting the ID in your CascadingDropDownProperties instance which will cause an ID to be used when it is rendered to the client. However, the ID you use will get mangled and include all the names of its parent naming containers. This mangled ID is what Jaykul was referring to by "long_generated_id." See the MSDN docs onnaming containers for more information. I think one of the easiest ways to find out the long version of the name is to turn tracing on and find it in the control tree.

Thanks,
Ted
$get("<%=ddlCountry.ClientID%>").selectedIndex = 0;

$get("<%=ddlOffice.ClientID%>").selectedIndex = 0;

$get("<%=ddlSalePerson.ClientID%>").selectedIndex = 0;

$find("<%=CascadingDropDown1.ClientID%>")._onParentChange(false);

Reset Button Onclick Adds WebForm_DoPostBackWithOptions

I'm trying simply call JavaScript to reset the form and this is added, I'm guessing, from script manager. When I click the reset butt on now, rather than resetting the form I get a postback. Any idea why script manager does this and what I can do to prevent the postback?

Hi Travich,

Here is the sample that you can reference to.

<%@. 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></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager><%=DateTime.Now.ToString()%> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <input id="Reset1" type="reset" value="reset" style="display:none" /> <asp:Button ID="Button1" runat="server" Text="ResetForm" OnClientClick="resetForm();return false;"/> <script language="javascript" type="text/javascript"> function resetForm(){ $get("Reset1").click(); } </script> </form></body></html>

I hope this help.

Best regards,

Jonathan

Reset Cascading Dropdown

I have a set of cascading dropdowns that I need to be able to programatically reset via javascript. I can change the selectedIndexes but that doesn't change any of the data "behind the scenes".

Thanks

Hi

Doesn't change any of the data "behind the scenes", What you mean?

Would you please post some code,so I can reproduce the problem and resolve it more quickly?

Thanks


As I have seen it for three cascading drop downs there are also three hidden form fields that contain data. My specific scenario was modifing some existing code that utilized three drop downs. The application was a store selector. The user could type in a postal code or use drop downs (Country, Region, City). I needed to reset the drop downs if a user types in a postal code. Setting up the blur event on the postal code text box was simple enough. But getting the drop-downs to reset was more challenging. I originally trimmed the item list down to the first item (please select). However on postback the original drop down selections came back. What I ended up doing was triming the item list and resetting the "hidden" fields to ":::" which is what the starting state appears to be.

There has to be an easier way to reset the drop downs to thier default state (via javascript). If the user simply sets the first drop down to the 0 index all drop downs reset. However, using using JS to set the selectedIndex property doesn't cause the client side event to fire.

Hopefully that helps a little. I am probably just missing something obvious. Is the client side JS code documented anywhere?

Reset Controls inside an UpdatePanel

Is there an easy way to reset all controls within an updatepanel without having to reload the page? Or can I reload the page without using Response.Redirect or Server.Transfer? My page has 3 updatepanels.

Pls Define "Reset".


Remove all data in the controls.


Hi,

Thank you for your post.

I think it is easy! Do you remeber the reset HTML contorl?

The contorl reset the whole form Elements to original value.

Just add this:

<input id="Reset1" type="reset" value="reset" />

If you don't want display it,just hidden it and fire the click event of it in javascript.

If you have further question, let me know.

Best Regards,


Thanks

Reset controls in update panel when error is thrown

Hello fellow developers,

A user enters a value in a textbox and i click a button to get some data, but a server error is thrown.

Is there a way to clear/reset the textbox in an UpdatePanel when there is a server error?

If there is a way, can someone assist in providing me that trick?

Thanks in Advance.

Protected Sub myButton_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles myButton.Click
Try
' Whatever code that I'm trying to run goes here.
' This is the code that my produce the error.
Catch
myTextbox.Text =""
End Try
End Sub


Can't you simply use a try/catch block, and catch the exception? If an exception is thrown reset it to the old value. You can use a hidden label or textbox to store the previous value.


Use this

protected void ScriptManager1_AsyncPostBackError(object sender, AsyncPostBackErrorEventArgs e)
{
if (condition)
{
ScriptManager1.AsyncPostBackErrorMessage =
e.Exception.Message;

}
else
{
ScriptManager1.AsyncPostBackErrorMessage =
"An unspecified error occurred.";
}
}


I apologize. My example scenario was not explained the way I originally thought.

The example should be that when using AJAX you want to show an error message AND reset the controls.

If you write code to 'Throw' a custom error message to an alert window, nothing after the 'Throw' gets executed (clearing my textbox).

So my question really should be:

Is there a way, using AJAX, to 'Throw' a custom error message to an alert window and still reset controls? Either on the server or client side.

Thanks.


Protected Sub myButton_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles myButton.Click
Try
' Whatever code that I'm trying to run goes here.
' This is the code that my produce the error.
Catch exAs Exception
ScriptManager.RegisterStartupScript(Page, Page.GetType,"ErrorMsg", "alert('" & ex.Message & "');",True)
myTextbox.Text =""
End Try
End Sub


Thanks Buddha, that's just what I needed.

Reset scroll after call back

Hi,

How do I reset the scroll position of the page when a call back has returned?

Cheers, WT.

http://aspnet.4guysfromrolla.com/articles/111704-1.aspx

assign using client side script

document.body.scrollLeft = 0;

document.body.scrollTop = 0

Re-Setting an Object to its original position using Animation Extender

Hi

I have been working on a nice ajax menu using the Animation Extender. Basically, i have a series of GIF's. When the mouse hovers over a gif, the gif moves 6px to the right. When the mouse hovers out, the gif moves 6px to the left.

Everything works well, if you let the whole animation run through. But if you where to move your mouse off and on the gif a few times in a short period, the gif would actually lose its original position and end up either further left or further right to where it should.

I spose what I am trying to get at is, is it possible to reset an objects original position?

Here is a sample of my extender:

<cc1:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="btnPro">
<Animations>
<OnHoverOver>
<Move duration=".03" fps="50" horizontal="6" unit="px"/>
</OnHoverOver>
<OnHoverOut>
<Move duration=".03" fps="50" horizontal="-6" unit="px"/>
</OnHoverOut>
</Animations>
</cc1:AnimationExtender>

Thanks for your help in advance.

Hugh

Would any one have an easier way of doing this?

Thanks

Hugh


HI ,

try this link :

Scripting Animations from the Ms Ajax AnimationExtender

Hope this heps


Thanks for the link.

This would be perfect for wat i am trying to do. Problem is i cant seem to get it to work on a hover over event, instead of a click event.

Any ideas?

Thanks

Hugh

Resetting Scroll Position on AJAX partial postbacks

I'm sure someone has seen this one before:

    I have a grid inside an UpdatePanel displaying data that requires users to scroll to see the last couple of rows

    When a user selects a row in the grid, and AJAX post fires and displays data at the top of the page, but the scroll position is maintained and the user is required to scroll up to to the top of the page manually.

I need to reset the scroll position to 0,0 when a record is selected in my grid. If anyone can shed some light on this one I would greatly appreciate it.

Thanks

PS

Please see my post here:

http://forums.asp.net/t/1196152.aspx


Thank you - perfect solution, and so little code. I knew it wouldn't take much.

Resizable Control Extender

I have a Panel with scrollbars set to auto, a TreeView control with enough nodes to trigger the scroll bars,

and a Resizable Control Extender attached to the Panel.

The Resizable Control Extender will work perfectly as long as you don't scroll the Tree.

If you scroll the Tree the Handle will move vertically by the amount of the Tree scroll.

If you scroll too far the handle will disapear from the screen leaving you without a way to resize the Panel.

Does anyone know of a way to keep the handle in it's original postion?

Thanks,

Larry

Can you post your code?? Even I am stuck on a similar issue...may be we might be able to help each other.

Karamchand

Resizable Control bug?

The following code:

_lining.style.backgroundImage = 'url(invalid)'; // Keeps IE from ignoring the content-free element

in ResizableControlBehavior class is not working well with IE6. The image is being requested by browser every event the control fires (mousedown, mouseup, mousemove etc.). Check out your browser's status bar while resizing the control (watch it carefully as the text blinks very quickly) or use Nikhil's Web Development Helper with http logging on to see the requests.

There are many ways to fix this. I use solid black background with 20% opacity for additional effect.

Thanks for reporting this. Could you file an issue with this information atwww.codeplex.com?

Choose "Atlas Control Toolkit" then "Issues".

Thanks!

Resizable control as part of composite control

I'd like to use the ASP.NET AJAX Resizable control in my composite control. My control should provide all its images, JavaScript, and CSS as Embedded Resources, so that the users of it don't need to bother about these files. This includes the HandleGrip.png image that comes with the Resizable control. Unfortunately, the image use is defined in the css of the Resizable control, like this:

.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}

How can I let anyone use my control without giving them a copy of HandleGrip.png (to put somewhere on their website, while it is already embedded in my DLL)?

Hi,

You may refer to the the sample in AjaxControlToolkit. For instance:

.ajax__slider_h_rail {position:relative;background:url(<%=WebResource("AjaxControlToolkit.Slider.Images.slider_h_rail.gif")%>) repeat-x;height:22px;}


Indeed.

I triedbackground-image. Visual Studio did not let me (saying'url(<%=WebResource(' is not a valid value for the 'background-image' property.). After I read your comment I realized I could set the background-image by means of specifyingbackground.

Thanks.

Resizable Modal Popups?

I'm trying to make a modal popup be resizable. I've tried to combine the ModalPopupExtender with the ResizableControlExtender. Both are associated with the same panel.

It kinda works, but not correctly. When the popup appears, the resize graphic shows up on the left hand corner of the panel. After I click on the resize graphic it then will expand to the size of the modal window. In addition if the contents of the panel have to scroll (as a result of the resizing) the scrollbars mess up the positioning of the resize graphic.

I also had to turn off the drop shadow since it was not resizing with the panel.

Gerry

I think this is a definite nice to have especially if the popup is has a lot of form controls and you would like people to resize and/or have scrolling turned on. Please open awork item for this and we look into fixing this. The solution may not be very straightforward given that you want it to have the dropshadow and the drag in addition to the resize so the modalpopup code itself may need to change. Thanks!


It should work just fine Without the drop shadow. You can hook up the resizable extender to the modal panel and get things working for you.

The drop-shadow is not important to me. I will go ahead and enter the item.

Thanks,
Gerry


I haven't used the modal popup yet but I suspect that it is much like the popup extender. To get the shadow to stick with the control I had to add another panel that contained the popup container panel. I then hooked the resizable extender to that outer panel.

Again I haven't attempted it yet with modal. Here is a link to the code in the forum where I posted my solution.

http://forums.asp.net/t/1082450.aspx

Larry Aultman


I was not able to make the resizable extender work with the ModalPopup extender. I am sure that the source code could be modified to make it work however there is another solution that works very well and yields the same results: a drag-able, resizable, popup modal dialog. I am providing all the code below. You will need an "overlay" image that will provide the user screen "gray-out" effect. You also need very specific CSS styles and then you need the aspx and codebehind. I have included all source necessary, except the overlay.png file.

In my experience, most of the time that I would need a modal popup I need to get something that is bound for the server. Rarely do I need a popup that collects information when it isn't sent back. So this version's purpose is to collect data in a modal popup and send it all back to the server where the magic is done. Rather than use complex javascript to raise events back to the server I chose to use the extenders to handle the display and use AJAX update panels to handle the server. It all works very smoothly. I get the slick action of the client side and the AJAX posting.

Larry Aultman

I created my overlay.png file using Microsoft Expression. Very easy, make a new document with a size of say 32x32 pixels. Use the rectangle tool and draw a box removing the border and filling it with a soft color. I used a color that works well with my website. In the properties window set the Opacity to 50 (which is 50% transparent). Then export the image in PNG format. Drop this into your project folder. In the style sheet you will see my reference to the "overlay.png". NOTE: paths to files are relative to the style sheet's location NOT to the root of the site. I suggest that you put your style sheet in the root until you get everything working. Then you can move things around.

Next create a new aspx page with a codebehind page defined. Add a link in the "head" section to your style sheet something like:

<linkhref="pageStyles.css"rel="stylesheet"type="text/css"/>

Next place the following code in between the div tags in the new page.

<asp:scriptmanagerID="scriptmanager1"EnablePartialRendering="true"runat="server"></asp:scriptmanager>
<asp:UpdatePanelid="UpdatePanel1"runat="server">
<ContentTemplate>
<asp:ButtonID="btnShowDialog"runat="server"Text="Show Modal Popup"onclick="btnShowDialog_Click"/><br/>
<asp:LabelID="lbLoginMsg"runat="server"Text="User Not logged In"></asp:Label>
<divid="popupContainer1"class="popupContainer">
<asp:Panelid="popupPanel1"runat="server"Visible="false"CssClass="overlay">
<asp:Panelid="dragControl1"runat="server"CssClass="dragControl">
<asp:Panelid="popupClientArea1"runat="server"CssClass="popupClientArea">
<asp:Panelid="dragPanel1"runat="server"CssClass="dragMePanel">
<divid="dragMe1"class="dragMe"> Login </div>
</asp:Panel>
<asp:Panelid="popupContent1"runat="server"CssClass="popupContent">
<divid="popupBuffer1"class="popupBuffer">
User Name:<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox><br/>
Password :<asp:TextBoxID="TextBox2"runat="server"></asp:TextBox><br/><br/>
<center>
<asp:ButtonID="btnLogin"runat="server"Text="Login"onclick="btnLogin_Click"/>
<asp:ButtonID="btnCancel"runat="server"Text="Cancel"onclick="btnCancel_Click"/>
</center>
</div>
</asp:Panel>
</asp:Panel>
</asp:Panel>
</asp:Panel>
<cc1:DragPanelExtenderid="DragPanelExtender1"runat="server"DragHandleID="dragPanel1"TargetControlID="dragControl1">
</cc1:DragPanelExtender>
<cc1:DropShadowExtenderid="DropShadowExtender1"runat="server"TargetControlID="popupClientArea1"Opacity="1"TrackPosition="True">
</cc1:DropShadowExtender>
<cc1:ResizableControlExtenderid="ResizableControlExtender1"runat="server"HandleCssClass="handleResizer"HandleOffsetX="2"HandleOffsetY="2"MinimumHeight="200"MinimumWidth="100"ResizableCssClass="resizingImage"TargetControlID="popupClientArea1">
</cc1:ResizableControlExtender>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Now you need the codebehind:

protectedvoid Page_Load(object sender,EventArgs e)
{
this.ResizableControlExtender1.MinimumHeight = 200;//set inital size of the popup
this.ResizableControlExtender1.MinimumWidth = 300;//set inital size of the popup
}

protectedvoid btnShowDialog_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Not Logged In";
if (popupPanel1.Visible ==false)
popupPanel1.Visible =true;
}

protectedvoid btnCancel_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User Canceled Login";
popupPanel1.Visible =false;
}

protectedvoid btnLogin_Click(object sender,EventArgs e)
{
this.lbLoginMsg.Text ="User: " + TextBox1.Text +" Password: " + TextBox2.Text;
popupPanel1.Visible =false;
}

Finally you need the CSS styles that make things happen.

/* Popup AJAX windows */

.popupControl

{

/*visibility:hidden;*/

}

.popupWin/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.popupContainer/* holds the entire popup window and its basic look.*/

{

background-color:Transparent;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

color:#838F86;

clear:both;

float:left;

font-size:1em;

padding:10px;

height:50em;

width:50em;

min-width:20em;

min-height:20em;

}

.overlay

{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

text-align:center;

z-index:10;

background-image:url('images/overlay.png');/* relative to the style sheet file location */

background-repeat:repeat;

}

.dragControl

{

background-color:white;

z-index:100;

}

.popupClientArea/* provides the painting surface for the popup window */

{

background-color:#ffffff;

border:solid1px#445447;

overflow:hidden;

width:25em;

z-index:200;

}

.popupContent/* all content in the popup will be contained here */

{

background-color:Transparent;

overflow:auto;

text-align:left;

height:auto;

width:100%;

}

.popupBuffer/* this div provides a padding buffer from the edge so the content doesn't come flush with the edge */

{

padding:.3em;

}

.dragMePanel/* this provides the top edge that is the dragable area */

{

background-image:url('images/bg_nav.png');/* relative to the style sheet file location */

background-repeat:repeat-x;

cursor:move;

width:100%;

height:20px;

z-index:210;

}

.dragMe/* any text that might be shown in the drag area */

{

color:#ffffff;

text-align:center;

font-size:.8em;

font-family:"trebuchet MS",tahoma,verdana,arial,helvetica,sans-serif;

font-weight:normal;

}

.handleResizer

{

width:15px;

height:16px;

background-image:url('images/HandleHand.png');

overflow:hidden;

cursor:se-resize;

}

.resizingImage

{

border-style:solid;

border-width:2px;

border-color:#445447;

padding:0px;

}

ResizableControlExtender- Maintain size on postback

Hi all,

I'm wet behind the ears when it comes to atlas, I just downloaded the latest ctp and toolkit and starting playing around. I started playing with the ResizableControl and can't seem to figure out how to get it to maintain it's new size after a postback. Is there anyway to do this? I know how to use the ProfileBindings on the DragPanel to maintain the location of the panel on postback and I've tried using the ProfileBindings on the ResizeableControl, but there doesn't seem to be an ExtenderPropertyName for the size. Any thoughts/ideas/comments are greatly appreciated!

Thanks,

Ben

I'm confused. The ResizableControl should automatically preserve its size after a postback. TheResizableControl sample page does this for me in IE6/IE7/FF/S - are you seeing something different?

ResizableControlExtender in CollapsiblePanelExtender

Hi,

I have a series of dynamically created controls, each with a ResizableControlExtender within a CollapsiblePanelExtender...and all is good until the time you come to collapse the panel.

At this point, the resize image of the ResizableControlExtender stays exactly where it was on the page and is visible above all other controls on the page. I have tried setting the z-index property on all affected controls to sort this out, but this has had no effect.

Can anyone suggest anything else I need to do to sort out this issue?

Has anybody seen this before?

If it helps, I am adding the ResizableControlExtender to a Panel which contains a TextBox in order to resize the TextBox.


Hi,

Can you show me a simple repro?

ResizableControlExtender Handle Click Event

I would like to be able to fire the event that occurs when the user clicks on the handle

ResizableControlExtender from my own javascript code.

Do you know how to do this?

Your help is much appreciated.

Thak you very much

Hi,

Internally, this extender doesn't support such behavior.

You may add an resizebegin event handler to the extender, in this handler, call a asynchronous method to invoke to method on server side( web service or pageMethod ) .

So, you code may goes like this:

function pageLoad()

{

var re = $find("behaviorID of the resizableExtender");

re.add_resizebegin(onResizeBegin);

}

function onResizeBegin()

{

//invoke a service side method here.

}

Hope this helps.

ResizableControlExtender does not resize image??

hi,

guys

ResizableControlExtender control does not resize the image.does this control not support the image control?

guide me.

thanks in advance.

Miss Sheetal,

Put your image control inside a panel and set the TargetControlID of ResizableControlExtender to the Panel's ID.


I've tried as u said,but it resizes panel not image!!!!!!!!! just check out this code:

<asp:Panel ID="panel1" BorderColor="black" BorderWidth="5" runat="server" Height="200">
<img id="img1" src="http://pics.10026.com/?src=images/untitled5.bmp" alt="sd" runat="server" />
</asp:Panel
<cc1:ResizableControlExtender ID="resiable" HandleCssClass="handleText" ResizableCssClass="resizingImage" HandleOffsetX="10" HandleOffsetY="20" runat="server" TargetControlID="panel1"></cc1:ResizableControlExtender>

<Script language="text/javascript">

.handleText
{
width:16px;
height:16px;
background-image:url(images/HandleGrip.png);
overflow:hidden;
cursor:se-resize;
}

.resizingImage
{
padding:0px;
border-style:solid;
border-width:3px;
border-color:#B4D35D;
}

</Script>


You have not specified the Client Side Javascripts that will actually resize the image. Watch thetutorial video on how to do that.


Thanks Buddy!!!!!!!!!!!!!

It Really helps me. Thanx for immediate reply.


Then please mark my previous post as the answer.

ResizableControlExtender and a MultiLine textbox

Can anyone give me the code for a resizableControlExtender that is used with a multiline textbox?
I don't know if it's because my brain hurts (more than usual) or what but I just can't get it to work.

Thanks!

Please refer to: http://forums.asp.net/t/1194380.aspx

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...... !!!

ResizableControlBehavior sizing to 0 in initialize, why?

This line is in the ResizableControlBehavior.initialize code:

this._resizeControl(0, 0, 0, 0);

Why? It makes me do fancy things in my resize handler to avoid this call, but I'm wondering if I'm missing some intended logic here.

Any thoughts on this? It breaks the resize control in IE for divs that use CSS to get width.
It sets up the internal state and fires the initial resizing event. Why is this a problem?
In IE with a textarea that is set to width: 100% in the CSS, this results in a 0 size text area.
Have you tried nesting the TEXTAREA in a DIV similar to how the sample page does with the image example (which has width=100%, height=100%)?

ResizableControlExtender: Allowing only horizontal resizing

Hi; I have a ResizableControlExtender control in my page and I'd like to be able to resize it only in x direction (unlike the one in this forum input text control)

Thanks

Any relations to this code peace?:

<scripttype="text/javascript">
function OnClientClickGrow () {
var rcp = $find('ResizableControlBehavior1');
var size = rcp.get_Size();
rcp.set_Size( { width: size.width*2, height: size.height*2 } );
returnfalse;
}
</script>

Just set the ResizableControlExtender's MinimumHeight and MaximumHeight to the same value.

Joe


:) I've found out but u were faster :)

Thanks...

MinimumHeight="500" MaximumHeight="500"

ResizableControlExtender resize the vertical (height) only. EASY ONE!

Hey.. I got an easy one for yall..

I am using the resizablecontrolextender for a panel control. I want the client to have the ablility to resize the height of the box but NOT the width.

This works in Firefox, but not in IE 7 .. anyone got an idea? NO WIDTH!!

"ResizableControlExtender1" runat="server" TargetControlID="thePanel" MinimumWidth="-1" MaximumWidth="-1" MaximumHeight="400" MinimumHeight="100" HandleCssClass="handle" ResizableCssClass="onresize" HandleOffsetX="-300" >

Set MaximumWidth=MinimumWidth=200px (or whatever).

David Anson:

Set MaximumWidth=MinimumWidth=200px (or whatever).

Thatdoes work, but I want my resizable panel inside a div that expandshorizontally (liquid) with the window. The Control itself can beexpanded by the browser window size. An example would be like howoutlook separates emails (in a grid) above, and email details below.You can change the vertical size of the two boxes, but not make themsmaller than the window.

Essentially, I need the equivalent of minimumwidth="100%"


Since I really really want to figure this out I am providing an example to see if I can explain this problem better.

Here is a simple code example to illustrate:

<body>
<form id="form1" runat="server">
<style type="text/css">

.handle { background:Black; width:20px; height:20px; }

</style>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="topDiv" runat="server" style="background:Blue; height:100px; display:block; width:100%;">
Content is in here.
</div
<div id="bottomDiv" runat="server" style="background:Red; height:200px;">
Some more content in here as well.
</div
<ajaxToolkit:ResizableControlExtender ID="extender" runat="server"
TargetControlID="topDiv"
HandleCssClass="handle"
MinimumHeight="100"
MaximumHeight="500">
</ajaxToolkit:ResizableControlExtender>

</form>
</body>
 
NOTICE: Both Divs expand to the size of the browser window. I just want to be able to resize the top Div without the ability to change the width. Ideas? Help! 

Since apparently this wasn't so easy I had to figure out a solution for myself. I thought I'd share:

<style type="text/css"> .topRow { overflow:hidden; display:block; background-color:#e6e6de; border:solid 1px black; } .innerTopRow { position:relative; top:0; left:0; right:0; bottom:0; height:93%; overflow:auto; } div.bottomRow { position:fixed; top:0px; bottom:0px; right:20px; left:212px; background:Green; overflow:auto; border:solid 1px black; } .handleTop { width:2000px; height:5px; background:#e6e6de; border-top:solid 1px black; border-bottom:solid 1px black; overflow:hidden; cursor:n-resize; } </style> <asp:ScriptManager ID="ScriptManager" runat="server" /> <asp:Panel id="topRowPanel" runat="server" CssClass="topRow"> <div class="innerTopRow"> <asp:ContentPlaceHolder ID="topRowContent" runat="server"></asp:ContentPlaceHolder> </div> </asp:Panel> <div ID="bottomRowPanel" class="bottomRow"> <asp:ContentPlaceHolder ID="bottomRowContent" runat="server"></asp:ContentPlaceHolder> </div> <script type="text/javascript"> function OnClientResizeText(sender, eventArgs) { var e = sender.get_element(); e.style.width = ''; $get("bottomRowPanel").style.top = e.clientHeight + 105; } </script> <ajaxToolkit:ResizableControlExtender ID="ResizableControlExtender" runat="server" TargetControlID="topRowPanel" HandleCssClass="handleTop" MinimumHeight="130" MinimumWidth="2000" MaximumWidth="2000" MaximumHeight="500" OnClientResizing="OnClientResizeText" HandleOffsetX="-1" />

ResizableControlExtender OnClientResize firing onload :-(

I have a ResizableControlExtender on my page. I set the OnClientResize to a js function with an alert. When I load the page, the alert pops. As expected, the alert pops on resize too, but I don't want the js function to be called on load. Is this a bug or expected behavior?

Thanks,

figz

Anyone?

To clarify (since it was Friday afternoon when I wrote the original post)...

Here is my ResizableControlExtender:

<ajaxToolkit:ResizableControlExtender ID="rceWrapper" runat="server" TargetControlID="panWrapper" HandleCssClass="handleWrapper"
MaximumHeight="0" MinimumWidth="960" BehaviorID="rceWrapper" OnClientResize="sayHello" />

Here is my js:

function sayHello(){alert('hello');}

The problem is when I load the page, the alert pops up. I would expect this to ONLY happen OnClientResize. So the question is, is this a bug or expected behavior? Thanks!


Hi Figz,

As far as I know, when the ResizableControlExtender control be initialized , it will call its _resizeControl(x, y, width,height) function. So that caused your problem.

To resolve this problem , my solution is to use a flag which will be set to true at pageLoad event. Just like this:

<script type="text/javascript" language="javascript">
var flag = false;
function pageLoad(){
flag = true;
}
function OnClientResizeText(sender, eventArgs) {
if(flag){
//your code;
}
}

</script>

Now , only when the flag is true , alert is allowed to be executed.

Another solution is attaching your javascript function on pageLoad event instead of defining as the ResizableControlExtender's property. Just like this.

<script type="text/javascript" language="javascript">
function pageLoad(){
$find('ResizableControlBehaviorID').add_resizing(OnClientResizeText)
}
function OnClientResizeText(sender, eventArgs) {
}

</script>

I hope this help.

Best regards,

Jonathan


Success! Thanks so much! For the record, I used the second option of attaching the js function on pageLoad instead of declaring it as a property. It worked like a charm!

Resize Accordion Pane

I have a few textboxes and requiredfieldvalidator s with a validationsummary inside an Accordion pane. When I click the submit button and the validationsummary shows its messages (at the top of the pane) it pushes the other controls down and some end up outside the pane. This is a Pain and was wondering if there is a way to make the accordion pane resize. Anybody have some Javascript or something that will help with this?

Awsome Thanks!

Sorry, posted before I read enough of the forum. SeemsThis isissue 1560 and their hoping to get it fixed by the next release. I did a slight workaround anyway: The other accordion pane I had was taller so I just added enough breaklines inside the offending pane which allowed for enough space for my validation summary to appear and just clip the breaklines out of the pane.

Although any ideas for a better solution would be greatly appreciated

Awsome Thanks!!

Resize animation with RoundedCorners

I have

<div id="div2" runat="server" style='width: 300px; height: 200px; background-color: teal; position: absolute;'>

and

<cc2:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server">
<cc2:RoundedCornersProperties Radius="10" TargetControlID="div2"></cc2:RoundedCornersProperties>
</cc2:RoundedCornersExtender>

and

<cc2:AnimationProperties TargetControlID="div1">
<Animations><OnHoverOver>
<Resize AnimationTarget="div2" Width="500" Height="400" />
</OnHoverOver></Animations>
</cc2:AnimationProperties>

and when i hover over div1... only width changes. A bug?

Hi MarekG,

This is a consequence of the way that RoundedCorners works. It will wrap your target control in another div and set the height of the new div to be the same. If the inner height changes it won't propogate to the containing wrapper (i.e. you're resizing the wrapped control, but it's overflow is hidden by its wrapper so you see nothing happen).

Right now there isn't a way to work around this - but I hope to make some modifications to the Animation framework on the next release that will allow you to side step the issue.

Thanks,
Ted

Resize both panels at the same time with ResizableControlExtender

Hi;

Is it possible to resize two or more controls with the sameResizableControlExtender?

I mean just like in hotmail; when you enlarge left panel, right panel becomes automatically narrow

Thanks...

?


Hi,

You are actually referring to Splitter control, but as far as I know, this isn't available in AjaxControlToolkit yet( Please correct me if I'm wrong. ).

You may have to implement your own one or may try finding if there is any existing component.

Sorry for not being able to provide more help on this.


Thanks for your reply; u r right it's ain't there in AJAX v1;

I'll give a search for Splitter control cause theres no way to me to write mine own :D

Regards...


Actually I've found good examples here:

www.codeproject.com/useritems/VwdCmsSplitterBar.asp

Thanks...

Resize Behavior

I couldn't find where anyone had created a Resize Behavior (you know, to go along with the floatingBehavior so you can resize a "window")...

So I took a swing at it. You cantry it out hereand I alsoposted a blog entryon it.

Many thanks toGarbin, whose blog seems to currently be the best (or only?) source of documentation on behaviorsBig Smile [:D]

This is ULTRA cool and something I had been wondering about. Thanks for offering and implementation!

It works great!


Hi,

great work! Suggestion: what about an implementation of your ResizeBehavior based on the IDragSource and IDropTarget interfaces provided by the Atlas framework?

Hello,

thanks for your solution, always wondered how todo that.

However I get a JS-error:

Sys undefined

Probably I'm just missing a reference or something?!


You probably have one of two problems:

1. You are using the January CTP of Atlas, which uses a different namespace.

2. Something is wrong in your referencing of Atlas scripts, and the correct script files are not referenced in the proper order.

Hope this helps.


Thanks,

that helped!

It was an old CTP, you just spared me a lot of work.

Hi,

this articlefrom my blog could help you with the Atlas DragDrop system. Hope it helps.


It is quite cool that you can do something like that by plugging into the framework. It seems a little buggy though. It was resizing when I clicked on the page after I had finished dragging.

I created a product calledWebDialog that lets you achieve the same sort of effect. I can emphasise with how hard it is to get dragging and resizing right.

You can see some samples of what I did here: http://www.newtonsoft.com/products/webdialog/onlinedemo.aspx

Resize problem on nested CollapsiblePanels

I have a page with a number of collapsiblepanels, each with a nested panel inside it. The top main panel is open when the page loads, but the other panels and all sub-panels start off closed.

It looks something like this when the page is first opened:

----
| Panel1<Open>
| <text>
| Subpanel1 <closed>
---

---
| Panel2 <closed>
---

---
| Panel3 <closed>
---


Any manipulation of panels 2 and 3 or their sub-panels Not shown above) work fine. If I close and then re-open Panel1, it resizes correctly from that point on when subpanel1 is opened or closed. However, if the user clicks to open subpanel1 before any changes to panel1, the subpanel will open but the parent (panel1) will not expand to accommodate its contents.

Any way around this?


You mean to say that panel1 will not resize it self to accomodate the sub-panel1 expansion? Collapsible panels do not resize if the height/width of their content changes. They have a fixed expanded height and width. Have you set ScrollContents to true? That will allow you to view subpanel1 better. Does it clip your content currently? You could set expanded height to be something that will allow it to show subpanel1 contents without having to scroll.


kirtid:

You mean to say that panel1 will not resize it self to accomodate the sub-panel1 expansion?

Yes, that's the problem.


Collapsible panels do not resize if the height/width of their content changes. They have a fixed expanded height and width.


I left ExpandedSize blank and, set this way, Panel2 and Panel3 do in fact resize to fit the contents when SubPanel2 or SubPanel3 are changed - as does Panel1 when SubPanel1 is changed, but _only_ if Panel1 has been closed & opened by the user first.


Have you set ScrollContents to true? That will allow you to view subpanel1 better. Does it clip your content currently? You could set expanded height to be something that will allow it to show subpanel1 contents without having to scroll.

I'm hoping to avoid the scrolling panel if I can, and the contents of the subpanels varies in height so there's no "correct" fixed height to use. I'll scroll it if I have to but I'd rather get it to resize properly.



It seems like there is something specifically different about Panel1- subpanel1 config. Could you post a small, self-sufficient repro? It could be a styling issue.


Not pretty, but sufficient to illustrate the problem:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="test" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title><style>.SiteLocHeader{width:100%;height:20px;background-image: url(../Images/bg-menu-small.gif);background-repeat:repeat-x;/* color:#FFF; */vertical-align: middle;}.SiteMainDiv { BORDER-RIGHT: #165EA9 7px solid;BORDER-LEFT: #165EA9 7px solid;BORDER-BOTTOM: #165EA9 7px solid;}.AddrHeaderTextLeft{font-family:verdana;font-size:x-small;font-weight:bold;/* color:white; */float: left;padding-left: 5px;vertical-align: middle;}.ArchiveHeader{background-color: #A5A5A5; color: #FFFFFF;font-family:verdana;font-size:x-small;font-weight:bold;padding-left: 5px;vertical-align: middle;}.SiteContactHeader{width:100%;height:20px;background-image: url(../Images/bg-menu-contact.png);background-repeat:repeat-x;/* color:#FFF; */vertical-align: middle;}.ContactHeaderTextLeft{font-family:verdana;font-size:x-small;font-weight:bold;/* color:#FFF; */float: left;padding-left: 5px;vertical-align: middle;}.SiteContactDiv {BORDER-RIGHT: #0398B8 7px solid;BORDER-LEFT: #0398B8 7px solid;BORDER-BOTTOM: #0398B8 7px solid;}</style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <div class="SiteLocHeader"> <div class="AddrHeaderTextLeft"> <asp:Image ID="imgShowAddrToggle" runat="server" ToolTip="Toggle view/edit of current Site Street, Phone, Fax & Web address information" ImageUrl="Images/collapse.jpg"></asp:image> Site Street, Phone, Fax & Web Address</div></div><asp:panel id="pnlSiteLoc" runat="server" cssclass="SiteMainDiv"><table class="table" width="100%" ><tr><td>Some fields & buttons go here</td></tr><tr><td> <asp:Panel runat="server" ID="pnlSiteArchHeader" CssClass="ArchiveHeader"> <asp:Image ID="imgSiteArchToggle" runat="server" ToolTip="Toggle display of archived site address records." ImageUrl="Images/expand.jpg"></asp:image> <asp:Label ID="lblSiteArch" runat="server" Text="Show Archives"></asp:Label> </asp:Panel><asp:Panel runat="server" ID="pnlSiteArchive"> Grid of archive info goes here</asp:Panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteArch" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgSiteArchToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteArchive" ExpandedText="Hide Archives" CollapsedText="Show Archives" CollapseControlID="imgSiteArchToggle" ExpandControlID="imgSiteArchToggle" TextLabelID ="lblSiteArch" /></td></tr></table></asp:panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteLoc" runat="server" CollapsedSize="0" Collapsed="false" ImageControlID="imgShowAddrToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteLoc" ExpandedText="Hide" CollapsedText="Show" CollapseControlID="imgShowAddrToggle" ExpandControlID="imgShowAddrToggle" /> <div class="SiteContactHeader"> <div class="ContactHeaderTextLeft"> <asp:Image id="imgContactToggle" runat="server" ToolTip="Toggle view/edit of current Site Contact information" ImageUrl="Images/collapse.jpg"></asp:image>  Site Contact</div></div><asp:panel ID="pnlSiteContact" runat="server" cssclass="SiteContactDiv"><table class="table" ><tr><td>More fields here</td></tr><tr><td colSpan="2"><asp:Panel runat="server" ID="pnlContactArchHeader" CssClass="ArchiveHeader"> <asp:Image ID="imgContArchToggle" runat="server" ToolTip="Toggle display of archived Contact records." ImageUrl="Images/expand.jpg"></asp:image> <asp:Label ID="lblContArch" runat="server" Text="Show Archives"></asp:Label> </asp:Panel><asp:Panel runat="server" ID="pnlContArchive">More archive info in this sub-panel</asp:Panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeContArchive" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgContArchToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlContArchive" ExpandedText="Hide Archives" CollapsedText="Show Archives" CollapseControlID="imgContArchToggle" ExpandControlID="imgContArchToggle" TextLabelID ="lblContArch" /></td></tr></table></asp:panel><ajaxToolkit:CollapsiblePanelExtender ID="cpeSiteContact" runat="server" CollapsedSize="0" Collapsed="true" ImageControlID="imgContactToggle" ExpandedImage="~/Images/collapse.jpg" CollapsedImage="~/Images/expand.jpg" ExpandDirection="Vertical" TargetControlID="pnlSiteContact" ExpandedText="Hide" CollapsedText="Show" CollapseControlID="imgContactToggle" ExpandControlID="imgContactToggle" /> </form></body></html>

I got the same problem and would be very interested in a solution, too.

In my case, I have a nested UpdatePanel inside a Panel extended with CollapsiblePanelExtender. The panel opens fine, but if the UpdatePanel grows after a partial update, the collapsible panel does not resize to fit it's new content. I also did not set the ExpandedSize property to have the panel autofit it's content. If I collapse and expand the collapsible panel again after an update to the UpdatePanel, it sizes itself correctly to the new size.


I tried this and the TargetPanel expanded fine after the partial update. In the example attached the collapsible panels expand fine. Is there somethng in my sample I need to tweak?

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel runat="Server" ID="Panel1Header" BackColor="Pink" Height="30">
</asp:Panel>
<asp:Panel runat="Server" ID="Panel1" Height="0" BackColor="Red">
<asp:Panel runat="server" ID="subpanel1Header" Height="30">
</asp:Panel>
<asp:Panel runat="Server" ID="subpanel1">
<asp:UpdatePanel runat="Server" ID="updatepanel1">
<ContentTemplate>
<asp:Button runat="server" ID="button1" OnClick="button1_Click" Text="expand panel" />
<asp:Label runat="server" ID="label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="CollapsiblePanelExtender1" TargetControlID="SubPanel1"
CollapseControlID="SubPanel1Header" ExpandControlID="SubPanel1Header" CollapsedText="Expand subpanel..."
Collapsed="true" ExpandedText="Collapse subpanel...">
</ajaxToolkit:CollapsiblePanelExtender>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtender runat="server" ID="cpOuter" TargetControlID="Panel1"
CollapseControlID="Panel1Header" ExpandControlID="Panel1Header" CollapsedText="Expand..."
Collapsed="true" ExpandedText="Collapse">
</ajaxToolkit:CollapsiblePanelExtender>

protected void button1_Click(object sender, EventArgs e) {this.label1.Text ="sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg sxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslgsxjghsghsghdhslg"; }


Yes, you have to ;)

The UpdatePanel should server like a pseudo DynamicPopulate, just without the web service call. So the idea is, that I have multiple collapsible panels in parallel forming a list with collapsible content. The inner controls of the panels are not yet initialized, i.e. the controls do not exist yet. So if now a panel is expanded the postback to the server for the UpdatePanel is made while the panel is expanding - so there is even a racing condition. You modified example would look like this:

<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<div>
<asp:Panelrunat="Server"ID="Panel1Header"BackColor="LightBlue"Height="30">
<asp:LabelID="Label2"runat="server"onclick="document.getElementById('button1').click()">click me</asp:Label>
</asp:Panel>
<asp:Panelrunat="Server"ID="Panel1"Height="0"BackColor="Gray">
<asp:UpdatePanelrunat="Server"ID="updatepanel1">
<ContentTemplate>
<asp:Buttonrunat="server"ID="button1"OnClick="button1_Click"Text="expand panel"/>
<asp:Labelrunat="server"ID="label1"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:CollapsiblePanelExtenderrunat="server"ID="cpOuter"TargetControlID="Panel1"
CollapseControlID="Label2"ExpandControlID="Label2"CollapsedText="Expand..."
Collapsed="true"ExpandedText="Collapse">
</ajaxToolkit:CollapsiblePanelExtender>


A better option is to actually raise events in the CollapsiblePanel before collapsing/expanding and after collapsed/expanded actions are done. We do plan to add those. You can perform any databinding/ partial post backs in those.

I am not hitting the race condition.

Here is what I tried:

 <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager2" runat="server" /> <div> <asp:UpdatePanel runat="server" ID="updatePanelOuter"> <Triggers> <asp:AsyncPostBackTrigger ControlID="image1" /> </Triggers> <ContentTemplate> <asp:Panel runat="Server" ID="Panel1Header" BackColor="LightBlue" Height="30"> <asp:ImageButton ID="image1" runat="server" ImageUrl="~/Calendar.gif" OnClick="button1_Click"> </asp:ImageButton> </asp:Panel> <asp:Panel runat="Server" ID="Panel1" Height="0" BackColor="Gray"> <asp:Label runat="server" Text="Fooooo"></asp:Label> <asp:UpdatePanel runat="Server" ID="updatepanel1"> <ContentTemplate> <asp:Button runat="server" ID="button1" Visible="false" OnClick="button1_Click" Text="expand panel" /> <asp:GridView ID="GridView1" runat="server" AllowSorting="True" CellPadding="4" ForeColor="#333333" GridLines="None"> <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <RowStyle BackColor="#FFFBD6" ForeColor="#333333" /> <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" /> <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" /> <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete" InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="Select" TypeName="SessionTodoXmlDataObject" UpdateMethod="Update"> <DeleteParameters> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </DeleteParameters> <UpdateParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> <asp:Parameter Name="Original_ItemID" Type="Int32" /> </UpdateParameters> <InsertParameters> <asp:Parameter Name="Title" Type="String" /> <asp:Parameter Name="Description" Type="String" /> <asp:Parameter Name="Priority" Type="Int32" /> </InsertParameters> </asp:ObjectDataSource> <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/App_Data/TodoItems.xml"> </asp:XmlDataSource> </ContentTemplate> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="cpOuter" TargetControlID="Panel1" CollapseControlID="image1" ExpandedSize="-1" ExpandControlID="image1" CollapsedText="Expand..." Collapsed="true" ExpandedText="Collapse" ImageControlID="image1"> </ajaxToolkit:CollapsiblePanelExtender> </ContentTemplate> </asp:UpdatePanel> </div> <asp:Panel runat="Server" ID="Panel2" BackColor="Lime" Height="30"> <asp:Label ID="Label2" runat="server" >FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr</asp:Label> </asp:Panel> <asp:Panel runat="Server" ID="Panel3" Height="0" BackColor="Gray"> FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr FooooooooooooooooooBarrrrrrrrrrrrrrrrrrrrrrrr </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender runat="server" ID="CollapsiblePanelExtender1" TargetControlID="Panel3" CollapseControlID="Label2" ExpandControlID="Label2" CollapsedText="Expand..." Collapsed="true" ExpandedText="Collapse"> </ajaxToolkit:CollapsiblePanelExtender>

protected void button1_Click(object sender, EventArgs e) {this.GridView1.DataSourceID ="ObjectDataSource1";this.GridView1.DataBind(); }

Resizeable panels required (that already expand and are dragable)

Hello everyone,

I am fairly new to ASP.NET and the AJAX toolkit but I had a question that I am sure there must be an answer for in these forums but I have yet to find it.

I have created several draggable panels that also collapse/expand and I am trying to also make them resizeable. I have looked at numerous postings that refer to the resizeable option but I must be doing something wrong.

The other challenge I have is to make a specific panel come to to the top once activated it. At the moment only 1 of the panels is "on top" and the others are dragable but still "underneath". I am not sure how to fix that.

Any ideas or links to previous posts that would outline how to do this would be appreciated.

Many thanks

Joey


Hi,Joey

I am afraid we cannot find out the exact root cause without further information captured when the problem occurs.

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Thank you.


HelloJin-Yu Yin,

I have 2 dragable panels at the moment and am still trying to figure out how to resize them

Here is the source code that I am working with at the moment:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %
<!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>Dragable/Expandable panels</title>
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<!-- start collapsable panel code -->
<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"
TargetControlID="PanelBody"
ExpandControlID="PanelHeader"
CollapseControlID="PanelHeader"
Collapsed="False"
TextLabelID="Label1"
ExpandedText="(Hide Details...)"
CollapsedText="(Show Details...)"
ImageControlID="Image1"
ExpandedImage="images/arrow_up1.gif"
CollapsedImage="images/arrow_dn1.gif"
SuppressPostBack="true">
</cc1:CollapsiblePanelExtender>
<!-- end collapsable panel code -->

<cc1:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="PanelContainer" DragHandleID="PanelHeader">
</cc1:DragPanelExtender>

<div>
<asp:Panel ID="PanelContainer" runat="server" cssClass="dragContainer" style="z-index: 101; left: 140px; position: absolute; top: 210px">
<asp:Panel ID="PanelHeader" runat="server" cssClass="dragHeader">

<!-- start elements inside header -->
<table width="250" border="0">
<tr>
<td><table width="95%" border="0" align="center">
<tr>
<td><p><font color="#FFFFFF"><strong>Pick an Option</strong></font></p></td>
<td><img src="http://pics.10026.com/?src=images/arrow_up1.gif" width="15" height="15" align="right"></td>
</tr>
</table></td>
</tr>
</table>
<!-- end elements insideheader -->
</asp:Panel>

<asp:Panel ID="PanelBody" runat="server" cssClass="dragBody"
<!-- start elements inside body-->
<table width="250" border="0" bgcolor="#e3f1fe"
<tr>
<td bgcolor="#99BDEA"><div align="center"><img src="http://pics.10026.com/?src=images/icons1.gif" width="206" height="19"></div></td>
</tr>
<tr>
<td><table width="90%" border="0" align="center">
<tr>
<td colspan="2"> <form name="form1">
<select name="select" onChange="MM_jumpMenu('parent',this,0)">
<option selected>Choose Option</option>
<option>Price 1</option>
<option>Price 2</option>
<option>Price 3</option>
<option>Price 4</option>
</select>
</form></td>
</tr>
</table></td>
</tr>
</table>
<!-- end elements inside Listing Status body -->
</asp:Panel>
</asp:Panel
</form>

<!-- start Javascript needed to drag panel, only required once -->
<script type="text/javascript">
function setBodyHeightToContentHeight() {
document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+"px";
}
setBodyHeightToContentHeight();
window.attachEvent('onresize', setBodyHeightToContentHeight);
</script>
<!-- start Javascript needed to drag panel -->

</body>
</html>

Any help would be appreciated.

Thanks

Joey

Resized image wont show in UpdatePanel

Hello,

I have a problem with a code where I want to resize an image in a Update Panel but when I fire up my site, I get this error in a message box:

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

Details: Error parsing near '???JFIF'.

This is the code of the aspx page where the subs are called to resize and show the image (The formview is in a UpdatePanel):

1 <asp:FormView ID="DetailsFormView" runat="server" DataSourceID="DetailsFormSource">
2 <ItemTemplate>
3 <table style="vertical-align: top; text-align: left; width: 100%;">
4 <tr>
5 <td style="width: 150px; font-weight: bold;">
6 Initials:</td>
7 <td style="width: 278px">
8 <asp:Label ID="InitialerLabel" runat="server" Text='<%# Bind("Initialer")%>'></asp:Label></td>
9 <td rowspan="14" style="width: 188px">
10<%
11 ' make sure Nothing has gone to the client
12 Response.Clear()
13
14
15 If SearchGridView.SelectedValue = "" Then
16
17 Call sendError()
18
19 Else
20 If File.Exists(Server.MapPath("images/foto/" & SearchGridView.SelectedValue & ".jpg")) Then
21 Call sendFile()
22 Else
23 Call sendError()
24 End If
25
26 End If
27
28 Response.End()
29%>30 <asp:Image ID="EmpImg" runat="server" />
31 </td>
32 </tr>
33 <tr>
34 <td style="width: 150px; font-weight: bold;">
35 Full Name:</td>
36 <td style="width: 278px">
37 <asp:Label ID="FornavnLabel" runat="server" Text='<%# Bind("Fornavn")%>'></asp:Label>
38 <asp:Label ID="EfternavnLabel" runat="server" Text='<%# Bind("Efternavn")%>'></asp:Label></td>
39 </tr>
40 <tr>
41 <td style="width: 150px; font-weight: bold;">
42 Employee Nr.:
43 </td>
44 <td style="width: 278px">
45 <asp:Label ID="MedarbnrLabel" runat="server" Text='<%# Bind("Medarbnr")%>'></asp:Label></td>
46 </tr>
47 <tr>
48 <td style="width: 150px; font-weight: bold;">
49 Department code:</td>
50 <td style="width: 278px">
51 <asp:Label ID="afdelingskodeLabel" runat="server" Text='<%# Bind("afdelingskode")%>'>
52 </asp:Label></td>
53 </tr>
54 <tr>
55 <td style="width: 150px; font-weight: bold;">
56 Private address:</td>
57 <td style="width: 278px">
58 <asp:Label ID="padresseLabel" runat="server" Text='<%# Bind("padresse")%>'></asp:Label>,
59 <asp:Label ID="ppostnrLabel" runat="server" Text='<%# Bind("ppostnr")%>'></asp:Label>
60 <asp:Label ID="Bynavn" runat="server" Text='<%# Bind("Bynavn")%>'></asp:Label></td>
61 </tr>
62 <tr>
63 <td style="width: 150px; font-weight: bold;">
64 Private phone:</td>
65 <td style="width: 278px">
66 <asp:Label ID="ptelefonLabel" runat="server" Text='<%# Bind("ptelefon")%>'></asp:Label></td>
67 </tr>
68 <tr>
69 <td style="width: 150px; font-weight: bold;">
70 Private cellphone:</td>
71 <td style="width: 278px">
72 <asp:Label ID="pmobilLabel" runat="server" Text='<%# Bind("pmobil")%>'></asp:Label></td>
73 </tr>
74 <tr>
75 <td style="width: 150px; font-weight: bold;">
76 Phone:</td>
77 <td style="width: 278px">
78 <asp:Label ID="telefonLabel" runat="server" Text='<%# Bind("telefon")%>'></asp:Label></td>
79 </tr>
80 <tr>
81 <td style="width: 150px; font-weight: bold;">
82 Cellphone / Shortnr:</td>
83 <td style="width: 278px">
84 <asp:Label ID="mobil1Label" runat="server" Text='<%# Bind("mobil1")%>'></asp:Label>
85 /
86 <asp:Label ID="mobil2Label" runat="server" Text='<%# Bind("mobil2")%>'></asp:Label></td>
87 </tr>
88 <tr>
89 <td style="width: 150px; font-weight: bold;">
90 Mail address:
91 </td>
92 <td style="width: 278px">
93 <asp:Label ID="mailLabel" runat="server" Text='<%# Bind("mail")%>'></asp:Label>@dotnet.itags.org.***.com</td>
94 </tr>
95 <tr>
96 <td style="width: 150px; font-weight: bold;">
97 Private mail:</td>
98 <td style="width: 278px">
99 <asp:Label ID="pmailLabel" runat="server" Text='<%# Bind("pmail")%>'></asp:Label></td>
100 </tr>
101 <tr>
102 <td style="width: 150px; font-weight: bold;">
103 Based:
104 </td>
105 <td style="width: 278px">
106 <asp:Label ID="hjemh?rendeLabel" runat="server" Text='<%# Bind("hjemh?rende")%>'>
107 </asp:Label></td>
108 </tr>
109 <tr>
110 <td style="width: 150px; font-weight: bold;">
111 Position:</td>
112 <td style="width: 278px">
113 <asp:Label ID="StillingLabel" runat="server" Text='<%# Bind("Stilling")%>'></asp:Label></td>
114 </tr>
115 <tr>
116 <td style="width: 150px; font-weight: bold;">
117 Vehicle nr.:</td>
118 <td style="width: 278px">
119 <asp:Label ID="vognnrLabel" runat="server" Text='<%# Bind("vognnr")%>'></asp:Label></td>
120 </tr>
121 </table>
122 </ItemTemplate>
123 </asp:FormView>
124

And this are the subs that is resizing the image:

 
1Function NewthumbSize(ByVal currentwidth,ByVal currentheight)
234' Calculate the Size of the New image56Dim tempMultiplierAs Double
78 If currentheight > currentwidthThen' portrait9 tempMultiplier = 200 / currentheight
10Else11 tempMultiplier = 200 / currentwidth
12End If
131415 Dim NewSizeAs New Size(CInt(currentwidth * tempMultiplier),CInt(currentheight * tempMultiplier))
1617Return NewSize
18End Function
192021 Public Sub sendFile()
2223' create New image and bitmap objects. Load the image file and put into a resized bitmap.24Dim gAs System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath("images/foto/" & SearchGridView.SelectedValue &".jpg"))
25Dim thisFormat = g.RawFormat
2627Dim thumbSizeAs New Size
28 thumbSize = NewthumbSize(g.Width, g.Height)
2930Dim imgOutputAs New Bitmap(g, thumbSize.Width, thumbSize.Height)
3132' Set the contenttype3334 Response.ContentType ="image/jpeg"353637 imgOutput.Save(Response.OutputStream, thisFormat)' output to the user
3839 ' tidy up40 g.Dispose()
41 imgOutput.Dispose()
4243End Sub
4445 Public Sub sendError()
4647' if no height, width, src then output "error"48Dim imgOutputAs New Bitmap(120, 120, PixelFormat.Format24bppRgb)
49Dim gAs Graphics = Graphics.FromImage(imgOutput)' create a New graphic object from the above bmp50 g.Clear(Color.Yellow)' blank the image51 g.DrawString("ERROR!",New Font("verdana", 14, FontStyle.Bold), SystemBrushes.WindowText,New PointF(2, 2))
52' Set the contenttype53 Response.ContentType ="image/gif"5455' send the resized image to the viewer56 imgOutput.Save(Response.OutputStream, ImageFormat.Gif)' output to the user
5758 ' tidy up59 g.Dispose()
60 imgOutput.Dispose()
61End Sub

I search a bit on the the what the problem could be, and I didn't find enything than that Response.Write can't be used, but I didn't hear nothing about the others Response methods that I am using.

You can't inject that type of data into the response stream of a partial postback. It boils down to the exact same problem as using Response.Write.

If I were you, I'd change that to a regular image control with the ImageURL dynamically assigned through code similar to what you have. If the thumbnail already exists, your function can return the path/file to it. If not, it creates the thumbnail and then returns the path/file. If there's an error, it can return the path/file of that error GIF.


Hmm.. I thought about your idea but I don't want to have the images two times.

But I got the problem solved.

I made an file called Thumbnail.aspx and in it I wrote:

<%@. Page Language="VB" AutoEventWireup="false" CodeFile="Thumbnail.aspx.vb" Inherits="Thumbnail" ContentType="image/jpeg" %>

And in Tumbmail.aspx.vb I added this code:

Imports System
Imports System.IO
Imports System.Drawing
Imports System.Drawing.Imaging
PartialClass Thumbnail
Inherits System.Web.UI.Page

Private PathToImageAs String ="images/foto/"Sub sendFile()
' create New image and bitmap objects. Load the image file and put into a resized bitmap.Dim gAs System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath(PathToImage & Request("src")))
Dim thisFormat = g.RawFormat
Dim imgOutputAs New Bitmap(g, 177, 239)

' Set the contenttype Response.ContentType ="image/jpeg"' send the resized image to the viewer imgOutput.Save(Response.OutputStream, thisFormat)' output to the user

' tidy up g.Dispose() imgOutput.Dispose()End Sub

Sub sendError()

' create New image and bitmap objects. Load the image file and put into a resized bitmap.Dim gAs System.Drawing.Image = System.Drawing.Image.FromFile(Server.MapPath("images/noimage.jpg"))
Dim thisFormat = g.RawFormat
Dim imgOutputAs New Bitmap(g, 177, 239)

' Set the contenttype Response.ContentType ="image/jpeg"' send the resized image to the viewer imgOutput.Save(Response.OutputStream, thisFormat)' output to the user

' tidy up g.Dispose() imgOutput.Dispose()End Sub

Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Load

' make sure Nothing has gone to the client Response.clear()If Request("src") ="" Then
Call sendError()

Else

If File.Exists(Server.MapPath("PathToImage & Request("src")))Then
Call sendFile()
Else
Call sendError()
End If

End If response.end()End Sub
End Class

And in my formview I added this to display the image:

<img src="http://pics.10026.com/?src=Thumbnail.aspx?src=<%# SearchGridView.SelectedValue %>.jpg" alt="" style="border: 0px" />

That works for me,

ResizeControlExtender causes panel to have 0px width and 0px height

All,

I am adding a ResizeControlExtender to a panel that already has a DragPanelExtender and am getting some very odd behavior. The window I want to resize is created dynamically and I add the ajax extender programatically as well. I am able to put a resize handle on the popup window but when I mouse over the handle the panel collapses to 0px width and 0px height. I have specified all of the properties as follows:

ResizableControlExtender resizeWindow = new ResizableControlExtender();

resizeWindow.ID = "timePanelResize" + i;
resizeWindow.TargetControlID = "timePanel" + i;
resizeWindow.HandleCssClass = "handleImage";
resizeWindow.ResizableCssClass = "resize";
resizeWindow.MinimumWidth = 200;
resizeWindow.MaximumWidth = 200;
resizeWindow.MinimumHeight = 24;
resizeWindow.MaximumHeight = 600;
resizeWindow.HandleOffsetX = 186;
resizeWindow.HandleOffsetY = 187;
dragWindowPanel.Controls.Add(resizeWindow);

I am using c#, .Net 2.0, AJAX v1.0.61025, IE 7 and Firefox 2.01. on mouse over the following behavior occurs; In IE it flickers and collapses in Firefox it flickers and the height collapses to the min height. Also, the handle is extremely difficult to grab... Also, the mouse must be in exactly the right pixel position (about 1px wide and tall) in order to grab the handle.

Anybody else see behavior like this? If so, is there a solution?

Thanks,

Kevin

There's an old forum thread about this, but the gist is that you add another Panel/DIV wrapper so the two extenders can point at/modify different HTML elements.

Resizing a panel using Animation Extender

Hi Everyone,

I have 3 rows of images on my form and each row has 3 images as well. I want to have a effect so that when the user hovers on a row than that row expands itself and the rest of the rows remain the same size.

To do this I used 3 panels and in each panel I inseted a table so as to accomodate the 3 images.

Then to add the Hover effect I used the Animation extender control. The code that I used is given below.

<cc1:AnimationExtenderID="AnimationExtender1"runat="server"TargetControlID="Panel1">

<Animations>

<OnHoverOver>

<ParallelDuration=".1"fps="50">

<ResizeWidth="250"Height="260" />

</Parallel>

</OnHoverOver>

</Animations>

</cc1:AnimationExtender>

However this doesn't seem to work. Any idea about why this is happening. It seems to me that I am making a really basic mistake but I have been trying to make this work for quite some days with no success.

If anyone has any idea what the problem is here please let me know.

Thanks

Hi,

I created a sample that works fine according to your description, please try it:

<%@. 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></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <table> <tr> <td> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Add.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Image1"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/edit.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender2" runat="server" TargetControlID="Image2"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> <td> <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/delete.gif" Height="50" Width="50"/> <ajaxtoolkit:AnimationExtender ID="AnimationExtender3" runat="server" TargetControlID="Image3"> <Animations> <OnHoverOver> <Parallel Duration=".1" fps="50"> <Resize Width="250" Height="250" /> </Parallel> </OnHoverOver> <OnHoverOut> <Parallel Duration=".1" fps="50"> <Resize Width="50" Height="50" /> </Parallel> </OnHoverOut> </Animations> </ajaxtoolkit:AnimationExtender> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> </tr> </table> </div> </form></body></html>

Thanks Raymond that surely helps....

However I have another problem and it will be great if you can have a look at that also....

http://forums.asp.net/p/1168745/1950736.aspx#1950736

Thanks in advance

vishy