Showing posts with label example. Show all posts
Showing posts with label example. Show all posts

Wednesday, March 28, 2012

Dynamic Control TextBox values not refreshed with example code

Ok, here is my situation. I have a dynamic TextBox that is added to the UpdatePanel. I need to be able to set the value of that textbox on the UpdatePanel refresh. I'm able to do that with Label control but not with the TextBox. Is that a known issue, is there a workaround? I assume i can use the standard input control possibly, but due to my project i have to use pre existing set of user controls which use TextBox. Any help is appriciated. The code is included below:

Short explanation of the example:

Example provides a link to refresh the UpdatePanel. On refresh two controls are added to the collection with specified value which is the Current time. One control is textbox and the other one is label. If you keep hitting refresh the value of the Label is changed while the value of the TextBox remains the same. Example output:test //5/11/2007 1:57:52 PM

Thanks!

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" %><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><script runat="server"> protected void Page_Load(object sender, EventArgs e) { TextBox textBox = new TextBox(); textBox.Text = DateTime.Now.ToString(); Label label = new Label(); label.Text = DateTime.Now.ToString(); test.Controls.Clear(); test.Controls.Add(textBox); test.Controls.Add(label); }</script><script type="text/javascript"> function UpdateDialogControl(val) { var ctrl = $get('<%=DialogTrigger.ClientID%>'); ctrl.value = val; __doPostBack('<%=DialogTrigger.UniqueID%>',''); }</script><body> <form id="form1" runat="server"> <a href="javascript:UpdateDialogControl(1)">test</a> <asp:HiddenField runat="server" ID="DialogTrigger" /> <asp:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server" /> <asp:UpdatePanel UpdateMode="Conditional" ID="CenterContentPanel" runat="server" RenderMode="Inline"> <Triggers> <asp:AsyncPostBackTrigger ControlID="DialogTrigger" /> </Triggers> <ContentTemplate> <asp:PlaceHolder runat="server" ID="test"></asp:PlaceHolder> </ContentTemplate> </asp:UpdatePanel> </form></body></html>

In Page_Load Event, Put all the statement into the !IsPostBack block.

if (!IsPostBack)
{
//all the code
}


Okay ... the controls are not displayed at all on the refresh.

Textbox's update their value based on the posted value from the previous request. So you're adding it, then its getting updated, overwriting your set value. Disabling ViewState will not affect this, since the value comes from the posted values collection, not viewstate.

Normally TextBox's are updated by the time you get to OnLoad, but since this TextBox didn't exist at that time, it isn't updated until AFTER OnLoad.

So -- heres what you do...

Add the TextBox in OnInit instead. Then in OnLoad, you can set the value to whatever you want, knowing full well that the posted value has already been loaded.

I recommend you follow the link to my blog and read about dynamic controls :)


Hi, thanks for the answer. However ... I do understand how ViewState works and that you need to add controls dynamically during or before OnInit event in order for them to keep track of viewstate. Your solution will indeed work for that specific example. I need an ability to remove all the controls and add completely new ones on refresh with values i specified.

Actually this specific problem is not related to ViewState at all. Its the POST state of the textbox that is in question here. Even if you turned off viewstate to the entire page this same solution would apply. Dynamically added controls can keep track of their own viewstate no matter when you add them to the tree (as long as its before SaveViewState, which is between PreRender and Render).

If what you want is to destroy all the existing controls and start with fresh ones, its ok to clear to the control tree and start a new one -- but you have to give the existing controls a chance to load their prior state first, so that they "consume" that data. So you would do this in Load, or in response to an event (like a click event, which would be raised after Load).


So you are saying i have to add old controls before load event then in OnLoad even clear the controls collection and add new elements with a values i specified? (in the example above i'm adding controls in the Onload event).

BTW, I did not have the same problem without UpdatePanel it seems like it is adding extra remember state feature ...

Thanks for replies btw.


Nm, UpdatePanel does behave like any other control. It is not related to any extra remember state feature ... I guess i never encountered problem when i needed to completely refresh controls and yes you are right I did it on the SelectedIndex changed event before which worked fine. Now i need to do it on UpdatePanel refresh and this is where i'm having issues.

Thanks for the post again. I indeed needed to rebind the form on the event. So in case of UpdatePanel it was the ValueChanged event for the hidden input control. Just like you told the viewstate is restored when form is bound on OnLoad event and then when i bind it second time i can put new values for the controls.

Thanks!

Dynamic Ajax SlideShow Extender with ContextKey...help

Does anyone have an example of how to use the slideshow extender dynamically?

I've tried copying the process used by the AutoCompletewithContextKey but when I try to set the contextkey I get the following error when the page loads ;

"Object does not support this property or method"

Where can I get a list of the properties/methods supported on the java side of things...I've tried the object browser?

Here's my default.aspx :

<%@dotnet.itags.org.PageLanguage="VB"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

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

<title>Niamh Ella Land</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ButtonID="prevButton"runat="Server"

Style="z-index: 100; left: 468px; position: absolute; top: 335px;"Width="60px"Font-Size="Larger"Text="Prev"Font-Underline="True"/>

<asp:ButtonID="playButton"runat="Server"

Style="z-index: 101; left: 528px; position: absolute; top: 335px;"Width="60px"Font-Size="Larger"Text="Play"Font-Underline="True"/>

<asp:ButtonID="nextButton"runat="Server"

Style="z-index: 102; left: 588px; position: absolute; top: 335px;"Width="60px"Font-Size="Larger"Text="Next"Font-Underline="True"/>

<asp:LabelID="imageLabel1"runat="Server"

Style="z-index: 103; left: 519px; position: absolute; top: 308px;"Font-Underline="True"/>

<asp:LabelID="Label1"runat="server"Font-Names="Times New Roman"Font-Size="Larger"

Style="z-index: 104; left: 484px; position: absolute; top: 35px"Text="Niamh Ella Land"

Width="136px"Font-Underline="True"></asp:Label>

<asp:ImageID="Image1"runat="server"

Height="220px"

Style="border: 1px solid black;width:auto; z-index: 105; left: 404px; position: absolute; top: 73px;"

ImageUrl="~/images/Album5/HPIM1604.JPG"

AlternateText="Sharky : In the big bed ocean"Width="261px"BorderStyle="Groove"/>

<ajaxToolkit:SlideShowExtenderrunat="server"ID="slideshowextend1"

ImageDescriptionLabelID="imageLabel1"

BehaviorID="grazzer"

UseContextKey="true"

ContextKey="images\Album3"

Loop="True"

NextButtonID="nextButton"

PlayButtonID="playButton"

PlayButtonText="Play"

PreviousButtonID="prevButton"

SlideShowServiceMethod="GetSlides"

SlideShowServicePath="SlidesService.asmx"

StopButtonText="Stop"

TargetControlID="Image1"AutoPlay="True"/>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

<asp:DropDownListID="DropDownList1"runat="server"DataSourceID="XmlDataSource1"

DataTextField="text"DataValueField="path"Style="z-index: 107; left: 77px;

position: absolute; top: 151px"Width="199px">

</asp:DropDownList>

<asp:XmlDataSourceID="XmlDataSource1"runat="server"DataFile="~/AlbumList.xml"></asp:XmlDataSource>

<scripttype="text/javascript">

// Hook up to the AutoComplete populating/populated events

function pageLoad() {

var SlideShow = $find('grazzer');

if (!SlideShow)return;

//var userContext = $get('DropDownList1');

//if (!userContext) return;

//alert(userContext.DataValueField.text);

// Dynamically assign the context and change the color when processing

SlideShow.add_populating(function()

{

SlideShow.set_contextKey("images\Album1");

});

}

</script>

</form>

</body>

</html>

Here's my webservice which works :

Imports System.Web

Imports System.Web.Services

Imports System.Web.Services.Protocols<WebService(Namespace:="http://tempuri.org/")> _

<WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)> _

<Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()> _

<System.Web.Script.Services.ScriptService()> _

PublicClass SlidesServiceInherits System.Web.Services.WebService

<WebMethod()> _

PublicFunction GetSlides()As AjaxControlToolkit.Slide()

Dim targetDirectoryAsString ="images/Album5"

Dim dAs IO.DirectoryInfo =New IO.DirectoryInfo(Server.MapPath(targetDirectory))

Dim fileEntries()As IO.FileInfo = d.GetFiles("*.jpg")

Dim filecount = 0

Dim fileNameAs IO.FileInfo

Dim MySlides(fileEntries.Length - 1)As AjaxControlToolkit.Slide

ForEach fileNameIn fileEntries

MySlides(filecount) =New AjaxControlToolkit.Slide(targetDirectory &"/" & fileName.Name.ToString, fileName.Name.ToString, fileName.Name.ToString)

filecount = filecount + 1

Next fileName

Return MySlides

EndFunction

<WebMethod()> _

PublicFunction GetSlidesWithContext(ByVal ContextKeyAsString)As AjaxControlToolkit.Slide()

Dim targetDirectoryAsString ="images/Album5"

If ContextKey =""Then

ContextKey = targetDirectory

EndIf

Dim dAs IO.DirectoryInfo =New IO.DirectoryInfo(Server.MapPath(ContextKey))

Dim fileEntries()As IO.FileInfo = d.GetFiles("*.jpg")

Dim filecount = 0

Dim fileNameAs IO.FileInfo

Dim MySlides(fileEntries.Length - 1)As AjaxControlToolkit.Slide

ForEach fileNameIn fileEntries

MySlides(filecount) =New AjaxControlToolkit.Slide(ContextKey &"/" & fileName.Name.ToString, fileName.Name.ToString, fileName.Name.ToString)

filecount = filecount + 1

Next fileName

Return MySlides

EndFunction

End Class

Frustrated Newbie,

Graham.

Could you escape the backslash and retry?

"images\Album1" => "images\\Album1"


Thanks for the suggestion, yes I've already tried this to no avail.

the webpage complains about the method I'm trying to use...

How can I see what methods I should be able to use?


Hi,

I've also verified that I'm running the latest toolkit version 10920.

Does anyone have a working example of using and setting the contextkey in the AJAX SlideShow Extension?

Am I wasting time on something that isn't actually possible? Any documemtation?

Thank you,

Graham.


Take a look athttp://www.codeplex.com/AtlasControlToolkit/SourceControl/FileView.aspx?itemId=352171&changeSetId=27216. You will find a lot of useful Toolkit control usage in the aspx files of the TestingClient and ToolkitTests projects.


Thank you, that's just what I was looking for..great examples!


Crying

I got the error like this:

'AjaxControlToolkit.SlideShowExtender' does not contain a definition for 'ContextKey' when I used Mr.Wen's code.Any idea???

this.slideshowextend1.ContextKey = Request.QueryString["qs"];


Have you updated to the latest version of the toolkit. I had a similar problem, deleted all my binaries and loaded the latest and everything worked!!!

Monday, March 26, 2012

dyanamic creation of toolkit controls?

Hi,

Can we create ajax controls dynamically i.e. in javascript? For example, I wish to create a tab control dynamically? Can we do that?

--jon

You can definitely create your AJAX controls/behaviors using the $create() statements (most likely called/hooked-up from the application init function). You should create a few Ajax controls declaratively in the page and then view the source it outputs to get an idea of the syntax needed.

Saturday, March 24, 2012

DropDownList to DropDownList

I want to take the selected value of DropDownListA and based on that value do a query to the database and populate DropDownListB. For example, DropDownListA contains Entity values. If the user selects entity101 then I call stored procedure where I pass in the entity value, run a select statement and get a list of properties associated with the entity name. I want to take that list and populate DropDownListB. Easy enough to do with ASP.NET using the AutoPostBack. Would be real nice to do this with Atlas. Is it possible? If so, how?Atlas control toolkit has cascading dropdowns-please download the the controltoolkit and look at the sample application code for cascading dropdowns- that should help you,

Wednesday, March 21, 2012

DropDownExtender!

The Toolkit Example is quite simple, my scenario is I have a DropDownList which is binded to a data source! How can I add the triggers for 50+ ListItems of my DropDown?

<Triggers><asp:AsyncPostBackTriggerControlID="Option1"EventName="Click"/>

<asp:AsyncPostBackTriggerControlID="Option2"EventName="Click"/>

</Triggers>

I want to basically navigate the dropdownlist using my arrow keys on the keyboard and I have an imagePanel whose Image changes depending upon what item selection on the dropDownlist, right now if I click on the DropDownList I am able to update the ImagePanel, but I want to do this using the arrow keys...

Youre not going to be able to do this in any easy way. It is possible but if you want to make it happen you have to pump out a heap of javascript. If you still want to let me know and Ill try and point you in the right direction.