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?

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 behaviors

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

Response.Write with update panel issue

I am having a problem with a response.write in page.load and an atlas update panel. I created a quick sample to repro this issue. What should happen is the ddl loads with the current date. If I run it doing a response.write of the stylesheet in the page.load, it does not work. If I put the stylesheet reference at the top of the webform, it works. The page source rendered in IE is exactly the same, however using fiddler I noticed that the Atlas request on the button click returned different results. The main difference is the response.write way returns what I had in the response.write before the delta tags in the fiddler response.

In my codebehind I have:

PartialClass LiveTestInherits System.Web.UI.PageProtected Sub btnClickMe_Click(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles btnClickMe.Click ddlStuff.Items.Add(New ListItem(Date.Now.ToString))End Sub Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.Load Response.Write("<head><link rel=""stylesheet"" type=""text/css"" href="http://links.10026.com/?link="/tools/style0.css""/></head>")End SubEnd Class

Webform

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="false" CodeFile="LiveTest.aspx.vb" Inherits="LiveTest" %><!--head><link rel="stylesheet" type="text/css" href="http://links.10026.com/?link=/tools/style0.css"/></head--><head runat="server"> <title>Untitled Page</title></head><atlas:ScriptManager ID="sm" runat="server" EnablePartialRendering="true"></atlas:ScriptManager><body> <form id="form1" runat="server"> <div> <div class="Heading">This is a test</div> <asp:Button ID="btnClickMe" Text="Click Me" runat="server" /> <br /> <atlas:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:DropDownList ID="ddlStuff" runat="server"></asp:DropDownList> </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="btnClickMe" EventName="Click" /> </Triggers> </atlas:UpdatePanel> </div> </form></body>

Fiddler Views

(Response.Write Does not work)

<head><link rel="stylesheet" type="text/css" href="/tools/style0.css"/></head><delta><rendering><head><title>....</delta>vs.(Declare stylesheet in html works)

<delta><rendering><head><title>Untitled Page</title><style type="text/css">....</delta>

Is there any kind of workaround for this issue (besides don't response.write your stylesheets)? We dynamically write out different stylesheets based on user preferences in a base page that other web pages inherit from.

Thanks in advance

I found that using

Me.Controls.AddAt(0,New System.Web.UI.LiteralControl("<head>....<style>.....</head>"))

Works fine instead of doing the response.write

Thanks

Restore position of a modal panel after postback

There is a modal panel which was created with the help of a modalPopupExtender. There is also an updatePanel and a GridView on it. Selecting a row in the GridView raises postback what sets the position of modal panel to default value (center of the screen). How to restore position at the moment of postback?

Hi,

According to your problem, I think you may keep the position of the modalPopup in two hiddenfileds outside UpdatePanelbefore postback, and set the popup's position to those values in hiddenFields inendRequest event handler.

For instance:

function beginRequestHandler()
{
$get("hfX").value = $find('behaviorIDOfModalPopup').get_X();
$get("hfY").value = $find('behaviorIDOfModalPopup').get_Y();
}

function endRequestHandler()
{
$find('behaviorIDOfModalPopup').set_X($get("hfX").value);
$find('behaviorIDOfModalPopup').set_Y($get("hfY").value);
}

Hope this helps.

Thanks,

There is one more solution:

function BeginRequest(sender, args) { var s = $get('Panel1').style.left; $find('ModalPopupExtender1').set_X(s.substring(0, s.length - 2)); s = $get('Panel1').style.top; $find('ModalPopupExtender1').set_Y(s.substring(0, s.length - 2)); }

Restrict slider from moving past maximum value

Hi,

I am very new to the ajaxcontrol toolkit. I need to implement a slider for one of my projects at school. I created a simple <sliderextender> and bound it to a textbox as shown in the example. For some reason, when I run it, the slider is able to slide past the maximum value and keeps sliding. Anyone seen this before? Below is the code:

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %
<%@dotnet.itags.org. 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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:TextBox ID="slider1" runat="server" />
<asp:TextBox id="sliderbound1" runat="server" Width="30" />
<cc1:SliderExtender ID="SliderExtender1"
runat="server"
Minimum="0" Maximum="100" EnableHandleAnimation="true"
Orientation="Horizontal" TargetControlID="slider1" BoundControlID="sliderbound1">
</cc1:SliderExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Hi,

the reason is an old issue whose fix has not been yet propagated to the release branch :(

If you download one of the latest development branch from here, the issue should be resolved.

If you have downloaded the source code for the latest release:

1. Go to Slider/SliderBehavior.js

2. Find this line (lineno 323 in my file): this._handleAnimation = new $AA.LengthAnimation( ...

3. Replace $AA with: AjaxControlToolkit.Animation

4. Recompile the source code

Hi Garbin,

Thanks a bunch, the fix worked like a charm :)

Thanks,

Praveen

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,

Retrieve value from a dynamically created control inside an UpadetPanel

I would like to dynamically create some controls - tablecells, textboxes, and dropdownlists inside an AJAX UpdatePanel.
How would I retrieve the values that user enters into these controls in my vb.net code behind?
Can you please provide vb.net sample code ??

Here is my code:

'creates the textboxes - works fine

For i = 1 To intUnseatedGuestCount
Dim txtFirstName As New TextBox
txtFirstName.ID = "txtFirstName" + i.ToString
Me.tdNewSeatingCards.Controls.Add(txtFirstName)
Next

'code to retreive the values - produces an error message

Object reference not set to an instance of an object

For i = 1 To Me.hidNewSeatingCardCount.value
strTXTName = "txtFirstName" + i.ToString
Dim myTXT As TextBox = CType(Me.tdNewSeatingCards.FindControl("txtFirstName" + i.ToString), TextBox)
strTest += myTXT.Text + "<br>"
Next

Thank you for your help

You are creating controls dynamically, So on every postback (even in asynchronous postbacks ) you have to create it

OK Here is my code to recreate the controls:

For i = 1 To Me.hidNewSeatingCardCount.Value
Dim txtFirstName As TextBox = CType(Me.tdNewSeatingCards.FindControl("txtFirstName" + i.ToString), TextBox)
txtFirstName.ID = "txtFirstName" + i.ToString
Me.tdNewSeatingCards.Controls.Add(txtFirstName)
strTest += CType(Me.tdNewSeatingCards.FindControl("txtFirstName" + i.ToString), TextBox).Text
Next

There are no error messages, but I am not getting the values that the user enters into the textbox.

Thank you

Hi,

Thank you for your post!

You should place your recreate code in the init event.

The cause of the issue is viewstate process is finished before you recreate your controls!

If you have further questions,let me know!

Best Regards,

retrieve value from a dynamically created control

I would like dynamically create some controls - tablecells, textboxes, and dropdownlists inside an AJAX UpdatePanel.

How would I retrieve the values that user enters into these controls in my vb.net code behind?

Can you please provide vb.net sample code ??

Thank you for your help

http://forums.devx.com/showthread.php?t=16770

http://mail.123aspx.com/ArticleFrame.aspx?res=31558

here is a nice tutorial with example / code on how to create Dynamic controls and how to retrieve values from these dynamic controls.. [Page_Init() event is used here...]

SingingEels : Dynamically Created Controls in ASP.NET

hope it helps./.

RoundedCornerExtender and gridview do not match.

I created a cortrol that works ok except for the rounded corner on the panel that contains a gridview of selectable items.

i know it has to do with the size of the panel but the grid view will be different heights depending on the items returns for that page.

this one has to be a common problem.

Specificly the rounded corner bottom appears in the middle of the gridview.

Thanks!

KES

Hi,

You may specify the panel's height & width programmatically in the databound event of the GridView.

Thank you for responding

I know i can set the panel size and width the question is by how much? some lines wrap and other do not. I am really looking for a way to get the extender to reconize the current size of the panel as dictated by the objects populating it.

What about use percentage to represent the panle's width and height. For instance:

<%@. 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>    </div> <asp:Panel ID="Panel1" runat="server" Height="60%" Width="80%"> <asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1" Height="100%"> </asp:GridView> <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" BehaviorID="RoundedCornersBehavior1" BorderColor="blue" TargetControlID="Panel1" Radius="6" Corners="All" /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title], [TitleOfCourtesy] FROM [Employees]" ProviderName="<%$ ConnectionStrings:NorthwindConnectionString.ProviderName%>"> </asp:SqlDataSource> </asp:Panel> </form></body></html>