UpdatePanel and coolite control problem

**omeriko9** · May 17, 2009, 5:39 AM

Hi

It seems that if i have a Coolite Button with a menu set in markup, and i want to populate it from server during an Async Postback of an UpdatePanel, the menu items will be erased after performing another async postback to the same updatepanel.

simplified code to demonstrate my problem is below.

if you first press the "btnTrigger" button, it will asynchronously populate the coolite button's menu item, as expected.
but if you press the "btnAnotherTrigger" after that, update panel will "erase" the menu item from the coolite's button and will leave only the mark-up data (meaning a button with an empty menu).

Is there a resolution for this?

i would have used the Coolite Ajax but i need access to Page.Session object with doesn't exist in the Coolite ajax context.


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


<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>


<script runat="server">
    
    protected void btnTrigger_OnClick(object sender, EventArgs e)
    {
        btnCoolite.Menu[0].Items.Add(new Coolite.Ext.Web.MenuItem("Test"));
    }


</script>


<!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></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <ext:ScriptManager ID="ScriptManager2" runat="server" />
    <asp:UpdatePanel runat="server" ID="updServer">
        <ContentTemplate>
            <ext:Button runat="server" ID="btnCoolite" EnableViewState="true">
                <Menu>
                    <ext:Menu>
                    </ext:Menu>
                </Menu>
            </ext:Button>
            <asp:Button ID="btnTrigger" runat="server" &#111;nclick="btnTrigger_OnClick" Text="I will inject Coolite Button's sub menu item" />
            <asp:Button ID="btnAnotherTrigger" runat="server" Text="I will erase Coolite Button's sub menu" />
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>

**geoffrey.mcgill** · May 17, 2009, 6:20 PM

With ASP.NET webcontrols, any dynamically created control must be added during every request, or else the control may not (will not) be available within a subsequent request.

For the "Test" Menu Item to be available during another PostBack, the MenuItem would need to be re-created and re-added to the Menu.

**omeriko9** · May 18, 2009, 10:51 AM

Thank you for the explanation.

This is the expected behavior, as long as EnableViewState=false.

When it's set to true, it does seem natural that the control will hold its state (and data), like DropDownList, GridView, CheckBox or any other ASP.Net control.
It complicates things when working with mixed environment of both ASP.Net and Coolite controls inside an UpdatePanel (for example, data has been read from a database, gridview keeps its data but the button's menu force another expensive connection to re-read the data).
is there a best practice for this scenario?

Also, I understand that all coolite controls must override EnableViewState property, inherited from System.Web.UI.Control, but it does seem that it's a "phantom" property... any chance that there will be a view state functionality in the future (0.8 maybe)?

**vvvlad** · May 28, 2009, 4:23 AM

Same issue with EnableViewState....

Could you please provide some additional information about what was (and what wasn't) implemented by Coolite?
Is there some work pattern you would advice about with regards to this topic?

Thank you in advance,

Vlad

**KinGorbaZ** · May 31, 2009, 10:00 AM

Same here. Please assist...

**geoffrey.mcgill** · Jun 01, 2009, 4:02 AM

The original posters code sample will not work for the exact same reasons the following code sample will not work... dynamically created controls must be re-created upon each request. This is a "feature" of ASP.NET.

Example

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    protected void btnTrigger_OnClick(object sender, EventArgs e)
    {
        System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label();
        label.Text = "Test";
        this.PlaceHolder1.Controls.Add(label);
        
        btnCoolite.Menu[0].Items.Add(new Coolite.Ext.Web.MenuItem("Test"));
    }
</script>

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ext:ScriptManager ID="ScriptManager2" runat="server" />
    
    <%--<asp:UpdatePanel runat="server" ID="updServer">
        <ContentTemplate>--%>
            <asp:PlaceHolder ID="PlaceHolder1" runat="server" />
            
            <ext:Button runat="server" ID="btnCoolite" EnableViewState="true">
                <Menu>
                    <ext:Menu runat="server" />
                </Menu>
            </ext:Button>
            <asp:Button ID="btnTrigger" runat="server" &#111;nclick="btnTrigger_OnClick" Text="I will inject Coolite Button's sub menu item" />
            <asp:Button ID="btnAnotherTrigger" runat="server" Text="I will erase Coolite Button's sub menu" />
        <%--</ContentTemplate>
    </asp:UpdatePanel>--%>
    </form>
</body>
</html>

**omeriko9** · Jun 01, 2009, 9:28 AM

Geoffrey,

You chose <asp:PlaceHolder> to demonstrate your point, but this control inherits from System.Web.UI.Control.

Unlike the Coolite.Ext.Web.Button, which along the way inherits from System.Web.UI.WebControls.WebControl.

Please note that controls that inherit from WebControl (Like DropDownList, TextBox, GridView and much more) behave diffrently when EnableViewState=true (and i think that's the hole point of EnableViewState property).

For example, DropDownList will keep it's ListItem controls on each request, GridView will hold its databinding, TextBox will keep its text, Panel will keep its content and i can go on and on...
(it's very easy to produce a code that demonstrate that, i just don't want to overload this thread with too much code).

An implementation of SaveViewState(), TrackViewState() and LoadViewState() using the ViewState object can overcome this design flaw. Would you consider doing so in future versions?

**geoffrey.mcgill** · Jun 01, 2009, 1:31 PM

Replace the <asp:PlaceHolder> with an <asp:Panel> and you get the same results. The "Control" or "WebControl" you use is irrelevant.

A DropDownList will keep it's inner ListItems because they are not "web controls".

I have no idea about a GridView.

A TextBox will maintain it's .Text value because its a property.

SaveViewState, TrackViewState and LoadViewState are all implemented within the Toolkit.

The Coolite.Ext.Web.MenuItem class is a WebControl and if dynamically created, must be created (and re-created) upon each request. The earlier the better. Again, this is a feature (or limitation) of asp.net.

The following sample demonstrates maintaining property viewstate across postbacks.

Example

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

<script runat="server">
    protected void btnTrigger_OnClick(object sender, EventArgs e)
    {
        this.TextField1.Text = "Test";
        this.TextBox1.Text = "Test";
        
        System.Web.UI.WebControls.Label label = new System.Web.UI.WebControls.Label();
        label.Text = "Test";
        this.Panel1.Controls.Add(label);
        
        btnCoolite.Menu[0].Items.Add(new Coolite.Ext.Web.MenuItem("Test"));
    }
</script>

<!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 id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ext:ScriptManager ID="ScriptManager2" runat="server" />
    
    <%--<asp:UpdatePanel runat="server" ID="updServer">
        <ContentTemplate>--%>
            <h1>These will maintain properties values</h1>
            
            <h2>TextField</h2>
            <ext:TextField ID="TextField1" runat="server" />
            
            <h2>TextBox</h2>
            <asp:TextBox ID="TextBox1" runat="server" />
        
            <asp:Panel ID="Panel1" runat="server" />
            
            <ext:Button runat="server" ID="btnCoolite" EnableViewState="true">
                <Menu>
                    <ext:Menu ID="Menu1" runat="server" />
                </Menu>
            </ext:Button>
            
            <asp:Button ID="btnTrigger" runat="server" &#111;nclick="btnTrigger_OnClick" Text="I will inject Coolite Button's sub menu item" />
            <asp:Button ID="btnAnotherTrigger" runat="server" Text="I will erase Coolite Button's sub menu" />
        <%--</ContentTemplate>
    </asp:UpdatePanel>--%>
    </form>
</body>
</html>

Hope this helps.

**omeriko9** · Jun 01, 2009, 3:01 PM

Thank you for the explanation, information, and the sample code (and for the effort to design it ;) )

You are right - it has nothing to do with EnableViewState. Indeed, it looks more like the standard ASP.NET behaviour just poping out its memoryless head again...

Unfortunatelly, the sample code you have posted does not solve the issue, but only demonstrates that dynamically added controls needs to be added on each request.

Sort of a best practice i've found to overcome this "feature" can be keeping the control (or the dynamically added controls) in Session object, and re-add them from there on each request.

Only problem here is with Coolite AJAX methods, which exists in different context where the Session object is unavailable.

**geoffrey.mcgill** · Jun 01, 2009, 3:10 PM

Hi omeriko9,

Getting/Setting Session values appears to be working as expected for me. The following sample demonstrates a simple scenario.

Example

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

<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>

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

<script runat="server">
    [AjaxMethod]
    public void Add()
    {
        this.Session["msg"] = this.TextField1.Text;
    }

    [AjaxMethod]
    public void Print()
    {
        this.Label1.Text = this.Session["msg"] as string;
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Coolite Toolkit Example</title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager runat="server" AjaxMethodNamespace="CompanyX" />
        
        <ext:Window 
            runat="server" 
            Title="Session Demo"
            Height="200"
            Width="350">
            <Body>
                <ext:ContainerLayout runat="server">
                    <ext:TextField ID="TextField1" runat="server" Text="Hello World!" />
                    <ext:Label ID="Label1" runat="server" />
                </ext:ContainerLayout>
            </Body>
            <Buttons>
                <ext:Button ID="Button1" runat="server" Text="Add to Session">
                    <Listeners>
                        <Click Handler="CompanyX.Add()" />
                    </Listeners>
                </ext:Button>
                
                <ext:Button ID="Button2" runat="server" Text="Print from Session">
                    <Listeners>
                        <Click Handler="CompanyX.Print()" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Window>
    </form>
</body>
</html>

Thread: UpdatePanel and coolite control problem

Thread Tools

Search Thread

Display

UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

Similar Threads

UpdatePanel and Coolite Controls

UpdatePanel with Coolite 0.6

Problem with Ajax update of coolite control in a Layout

Coolite controls within ASP.Net FormView control problem ??!

Change coolite control state while in UpdatePanel async postback

Posting Permissions

Sitemap

Downloads

Resources

Thread: UpdatePanel and coolite control problem

UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

RE: UpdatePanel and coolite control problem

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us