Programmatically add and change controls

[jonah]

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]

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]

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]

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]

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]

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]

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]

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]

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]

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.calendar);
        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.datepicker);
        
        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.