PDA

View Full Version : Programmatically add and change controls



jonah
Feb 22, 2008, 7:00 AM
Hi fellas!

It would be nice if you could include some more examples on how to manage the controls from a codebehind page.
<ul> How to add content to panels How to add controls to the content of other controls How to hide/show controls from a click of a regular button etc..[/list]
Stuff like this does not seem to work. How would I do it correctly? (Window1 is created on the aspx page)


protected void Button1_Click(object sender, EventArgs e)
{
Window1.Visible = true;
}


Cheers!
- jonah

davidee
Feb 22, 2008, 9:05 AM
Hi Jonah!

If you want to show your window by cliking a button, try these:



<asp:Button runat="server" ID="testLink" Text="Test Button" />
<cool:Window runat="server" ID="myWin" Title="Test Win"
BodyStyle="padding: 6px;"
CloseAction="Hide"
Collapsible="False" Resizable="False"
TriggerElement="testLink"
AnimateTarget="testLink" Modal="true" Center="true"
Width="150" Height="75" TriggerEvent="Click">
<Content>
<center>
<asp:Label runat="server" ID="lbl1" Text="Some text here"></asp:Label>
</center>
</Content>
</cool:Window>


Happy coding! :)

Davide Espertini

jonah
Feb 22, 2008, 9:41 AM
Hi!

Yes, I am aware of that solution, but the question was regarding doing these operations programatically, i.e in the codebehind page.

- jonah

davidee
Feb 22, 2008, 10:08 AM
Ok Jonah

I've solved with the code below:



Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load

If Not Page.IsPostBack Then

myWin.CloseAction = CloseAction.Hide
myWin.Collapsible = "False"
myWin.Resizable = "False"
myWin.TriggerElement = "LinkButton1"
myWin.AnimateTarget = "LinkButton1"
myWin.Modal = "true"
myWin.Center = "true"
myWin.Width = "150"
myWin.Height = "75"
myWin.TriggerEvent = TriggerEvent.Click
End If
End Sub


Now when you press your button the window appear ;)

The solution is really simple.

:)

jonah
Feb 22, 2008, 10:32 AM
Well..
That just sets up the entire page onload, which is not really what I asked for.

With your example the button will open the window, but when you close it it will not open again when you click the button.

- jonah

davidee
Feb 22, 2008, 10:41 AM
Fix it by removing the if page.ispostback... ;)

In this mode the window appear and disappear.

Is not really what you asked for? Why? All the code is on your codebehind file... I dont understand...

I'm working on your other question.. :P

Happy coding

Davide

jonah
Feb 22, 2008, 10:50 AM
Ok, let's say that I have a modal window with a username and a password textbox.
I wan't the user to enter that, and when they press the submit button I want to do an asyncronous check to see if they validate.
If they do, I want to close the modal window and open a panel with their user info in. If they don't, I want to display a message.

In my world, I have to be able to access the controls from the codebehind, and set events to them and be able to update them with server data.

Opening and closing the window is a breeze.. :)

How would you do that?

Cheers!
- jonah

davidee
Feb 22, 2008, 11:07 AM
Uhm... At the moment there is a problem with your question.. :)
The actual release of Coolite Studio have a little problem with postback in cool:window that is fixed but not published until the next release of Coolite Studio (approsimatively at the end of February, Geoffrey McGill said this in another post on this forum about texteditor..)

For your scenario I'm working for a solution.
Stay Tuned!!

Davide

geoffrey.mcgill
Feb 22, 2008, 1:22 PM
Hi Jonah,

The current public release of Window will not postback its form contents, although this functionality has been fixed. If you PM me with your email address, I'll forward the latest build.

The asyncronous postback functionality is not currently built into the control. We're working on this right now.

I'll get together a couple samples for you regarding adding controls dynamically, although not having the asyncronous postback does make things less elegant.

geoffrey.mcgill
Feb 22, 2008, 9:22 PM
Hi Jonah,

Here's a sample showing how to dynamically add controls to the Window and Panel ContentContainer.


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


<%@ Register assembly="Coolite.Web.UI" namespace="Coolite.Web.UI" tagprefix="cool" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<script runat="server">
Coolite.Web.UI.Calendar calendar;
DatePicker datepicker;

protected void Page_Load(object sender, EventArgs e)
{
this.calendar = new Coolite.Web.UI.Calendar();
this.calendar.SelectedDate = DateTime.Today;
this.Panel1.ContentContainer.Controls.Add(this.cal endar);
this.Panel1.Title = "Select a Date";
this.Panel1.Width = Unit.Pixel(300);
this.Panel1.Collapsible = true;
this.Panel1.BodyStyle = "padding: 6px;";


this.Panel1.Html = "<div style=\"text-align: center;\">test
";
}


protected void Button1_Click(object sender, EventArgs e)
{
DateTime date = this.calendar.SelectedDate;
this.datepicker = new DatePicker();
this.datepicker.SelectedDate = date;

string msg = string.Format("You Selected: {0}", date.ToString("dddd MMMM dd, yyyyy"));


this.Window1.Title = "Your Date";
this.Window1.Width = Unit.Pixel(300);
this.Window1.Resizable = false;
this.Window1.Modal = true;
this.Window1.BodyStyle = "padding: 6px;";
this.Window1.AutoShow = true;
this.Window1.ContentContainer.Controls.Add(this.da tepicker);

this.Label1.Text = this.Window1.Html = msg;
}
</script>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Add Controls and Content from Code-Behind</title>
</head>
<body>
<form id="form1" runat="server">
<cool:ScriptManager ID="ScriptManager1" runat="server" />

<cool:Panel ID="Panel1" runat="server" />
<cool:Window ID="Window1" runat="server" />

<asp:Button ID="Button1" runat="server" Text="Button" &#111;nclick="Button1_Click" /><br />
<asp:Label ID="Label1" runat="server" />


</form>
</body>
</html>


You can also add just pure HTML to the control by setting the .Html property. The Html is added before any .NET controls are rendered.


this.Panel1.Html = "<div style=\"text-align: center;\">test
";

Hope this helps.

geoffrey.mcgill
Mar 14, 2008, 10:32 PM
Quick update... the PostBack issues with the Window control have been fixed. The new code is available with the version 0.4.0 release (or higher). Download (http://www.ext.net/download/).

Hope this helps.

erw13n
Mar 15, 2008, 5:09 AM
hi geoffrey,

I try to implement your code on the Tab to add the control dinamically from code behind.
It's only show text "test" and not the control.

Am I miss some code here?



Dim myTabPanel As New Coolite.Web.UI.TabPanel

Dim myTab As New Tab

Dim cal As Calendar = New Calendar
cal.SelectedDate = Now

myTab.ContentContainer.Controls.Add(cal)
myTab
myTab.Title = "Tab1"
myTab.Html = "<div style=\'text-align: center;\'>test
"

myTabPanel.Items.Add(myTab)
PlaceHolder1.Controls.Add(myTabPanel)

geoffrey.mcgill
Mar 15, 2008, 5:51 PM
Hi erw13n,

If the .Html property has been set it will override anything that has been added to the ContentContainer collection.

Adding the raw text as a LiteralControl should work.

Example


Dim myTabPanel As New Coolite.Web.UI.TabPanel

Dim myTab As New Tab
myTab.Title = "Tab1"

Dim cal As Calendar = New Calendar
cal.SelectedDate = Now

myTab.ContentContainer.Controls.Add(cal)

Dim html as LiteralControl = new LiteralControl("<div style=\'text-align: center;\'>test
")
myTab.ContentContainer.Controls.Add(html)

myTabPanel.Items.Add(myTab)


PlaceHolder1.Controls.Add(myTabPanel)

Hope this helps.