[FIXED] [1.1.0] Bug with dynamic Add/Remove of panels

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [1.1.0] Bug with dynamic Add/Remove of panels

    Hello,

    I think that i found a some bug ( may be just a problem ) with dynamic adding and removing of panels.
    I created simple application which reproduce bug.
    Idea of application is that we have 3 buttons and 2 panels. Clicking of buttons should switch current view.
    Everything work fine, untill in class PanelType2 i didnt add second panel. With only one panel ( in example i use TabPanel ),
    thinks work fine. But when i add second panel ( in example i use simple Panel ) , switching of view from Panel2 to Panel1
    raise exception with view state. If i click reload page ( F5 ) on browser, thinks are correct again.
    I read lot of posts in forum, but seems like what i did is correct, and problem is in Ext.Net.

    Used version of Ext.Net : ext.net.community.1.1.full.source
    Ext.Net is compiled with : Visual Studio 2010 Professional
    Application is compiled with : Visual Studio 2010 Professional

    Below is a code of default page and code of demo application. And i will be very happy if some can explain where is a problem
    and how to fix it.

    --------------------------------------------------------------------
    File : Default.aspx

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %>
    <%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
    <!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">
    </head>
    <body>
    <form id="form1"  runat="server">
    <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" ID="id_viewport">
                <Items>
                    <ext:Panel runat="server">
                        <TopBar>
                            <ext:Toolbar runat="server">
                                <Items>
                                    <ext:Button runat="server" ID="Button1" Text="Video - MP4"></ext:Button>
                                    <ext:Button runat="server" ID="Button2" Text="Images"></ext:Button>
                                    <ext:Button runat="server" ID="Button3" Text="Video - WMV"></ext:Button>
                                </Items>
                            </ext:Toolbar>
                        </TopBar>
                        <Items>
                            <ext:Panel runat="server" id="id_container" Title="Main panel" >
                            </ext:Panel>
                        </Items>
                    </ext:Panel>
                </Items>
            </ext:Viewport>
    </form>
    </body>
    </html>
    --------------------------------------------------------------------------------------------------------
    File : Default.aspx.cs

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Ext.Net;
    
    namespace WebApplication2
    {
        public class PanelType1 : Ext.Net.Panel
        {
            public PanelType1( int type)
            {
                this.ID = "id_paneltype_1";
                this.Title = "Video ";
    
                if (type == 1)
                    this.Title += "MP3" + "... Updated on " + DateTime.Now;
                else
                    this.Title += "WMV" + "... Updated on " + DateTime.Now;
    
                this.Height = 300;
    
                BodyStyle = "background:#FF0000";
    
                this.Items.Add ( new TabPanel { Items= {
                            new Ext.Net.Panel { Title="tab1",BodyStyle = "background:#00FF00" },
                            new Ext.Net.Panel { Title="tab2",BodyStyle = "background:#0000FF" } }});
    
                Ext.Net.Button b = new Ext.Net.Button{ID = "panel1_removeBtn",Text = "Remove this panel"};
    
                this.TopBar.Add(new Toolbar { Items = { b}});
            }
        }
    
        public class PanelType2 : Ext.Net.Panel
        {
            public PanelType2()
            {
    
                this.ID = "id_paneltype_2";
                this.Title = "Image " + "... Updated on " + DateTime.Now;
                this.Height = 600;
                BodyStyle = "background:#0F0FF0";
                this.Items.Add( new TabPanel { Items = {
                            new Ext.Net.Panel { Title="Online",BodyStyle = "background:#00FF00" },
                            new Ext.Net.Panel { Title="Offline",BodyStyle = "background:#0000FF" } }});
    
                Ext.Net.Button b = new Ext.Net.Button { ID = "panel2_removeBtn", Text = "Remove" };
    
                this.TopBar.Add(new Toolbar { Items = { b } });
    
                //////////////////////////////////////////////////////////////////////////////////////////////
                // Removing of this line makes application to work 
                this.Items.Add(new Ext.Net.Panel { Title = "Info", BodyStyle = "background:#F0F0F0" });
                //////////////////////////////////////////////////////////////////////////////////////////////
            }
        }
    
        public partial class _Default : System.Web.UI.Page
        {
            public static int showtype=1;
    
            protected void Page_Load(object sender, EventArgs e)
            {
                Button1.DirectEvents.Click.Event += AddNewPanel_1;
                Button2.DirectEvents.Click.Event += AddNewPanel_2;
                Button3.DirectEvents.Click.Event += AddNewPanel_1_1;
    
                AddPanel(false);
            }
    
    
            protected void RemoveCurrentPanel()
            {
                id_container.Remove(id_container.Items[0].ID);
                id_container.DoLayout();
            }
    
            protected void AddNewPanel_1(object sender, DirectEventArgs e)
            {
                RemoveCurrentPanel();
                showtype = 1;
                AddPanel();
            }
            protected void AddNewPanel_1_1(object sender, DirectEventArgs e)
            {
                RemoveCurrentPanel();
                showtype = 3;
                AddPanel();
            }
            
            protected void AddNewPanel_2(object sender, DirectEventArgs e)
            {
                RemoveCurrentPanel();
                showtype = 2;
                AddPanel();
            }
    
    
            public void AddPanel(bool DoRendering = true)
            {
    
                if (showtype == 1)
                {
                    PanelType1 panel = new PanelType1(1);
                    id_container.Items.Add(panel);
                    if (DoRendering)
                        panel.Render();
    
                }
                else if (showtype == 2)
                {
                    PanelType2 panel = new PanelType2();
                    id_container.Items.Add(panel);
                    if (DoRendering)
                        panel.Render();
                }
                else if (showtype == 3)
                {
                    PanelType1 panel = new PanelType1(2);
                    id_container.Items.Add(panel);
                    if (DoRendering)
                        panel.Render();
                }
    
                id_container.DoLayout();
            }
        }
    }
    Last edited by Daniil; Aug 10, 2011 at 8:03 PM. Reason: [FIXED]
  2. #2
    Try to set AjaxViewStateMode="Enabled" for ResourceManager
    Vladimir Shcheglov
    Sr. Developer
  3. #3
    Hello Vladimir,

    Thank you for your reply. I already tried this, but dont help.
    But i have another solution, at least for now it works.
    Adding of EnableViewState = false for panels work perfect, but in this case, other elements dont keep
    values, i.e. if i have edit controls or buttons, they loose data. For them i should specify EnableViewState = true.
    Then thinks work ok. Now code for panel2 for example looks like this :

     public class PanelType2 : Ext.Net.Panel
        {
            Ext.Net.Button bTn1;
            public PanelType2()
            {
                this.ID = "id_paneltype_2";
                this.Title = "Image " + "... Updated on " + DateTime.Now;
                this.Height = 600;
                this.EnableViewState = false;
                BodyStyle = "background:#0F0FF0";
                this.Add( new TabPanel { EnableViewState=true,Items = {
                            new Ext.Net.Panel { ID="id_infopan2",Title="Online",BodyStyle = "background:#00FF00" },
                            new Ext.Net.Panel { ID="id_infopan3",Title="Offline",BodyStyle = "background:#0000FF" } }});
    
                //////////////////////////////////////////////////////////////////////////////////////////////
                // Removing of this line makes application to work 
                this.Add(new Ext.Net.Panel { EnableViewState = true, ID = "id_infopan1", Title = "Info", BodyStyle = "background:#F0F0F0" });
                //////////////////////////////////////////////////////////////////////////////////////////////
    
                bTn1 = new Ext.Net.Button { ID = "panel2_btnHelp", Text = "Help", EnableToggle = true, Pressed = false };
                bTn1.DirectEvents.Click.Event += btn2_click;
                this.TopBar.Add(new Toolbar { ID = "id_infopan4", EnableViewState=true , Items = { bTn1 } });
    
            }
         
            public void btn2_click(object sender, DirectEventArgs e)
            {
                return;
            }
    
        }
    I'm not sure if this is a correct way, but it works. Seems like Remove function for panels keep some data in viewstate bag,
    that should be removed by idea.

    Regards,
    Nedelcho
    Last edited by decho; Aug 10, 2011 at 8:52 AM.
  4. #4
    Hi all,

    The thread is related to:
    http://forums.ext.net/showthread.php?14952
  5. #5
    Another think is that in this way, direct methods dont work at all.
    Even adding of

        protected override void OnLoad(EventArgs e)
            {
                if (!Ext.Net.X.IsAjaxRequest)
                {
                    ResourceManager.AddDirectMethodControl(this);
                }
            }
    cause blank page, and controls are not created
  6. #6
    My mistake , its work perfect. I forgot to add
    base.OnLoad
  7. #7
    Vladimir has added the fix in SVN, revision #3682. It will be available in the next official 1.2 release.

    The get fix working, please specify an ID for the problem panel.

    To fix it locally, please apply these changes in Component.cs.

    1. Replace:
    public virtual string ContentEl
    {
        get
        {
            if (!this.DesignMode)
            {
                if (this.PreventContent)
                {
                    return "";
                }
                ***the rest part of the method***
    with
    public virtual string ContentEl
    {
        get
        {
            if (!this.DesignMode)
            {
                if (this.PreventContent)
                {
                    this.ContentContainer.Visible = false; // added
                    return "";
                }
                ***the rest part of the method***
    2. Add this method:
    protected override object SaveViewState()
    {
        if (this.Content == null && this.ContentControls.Count < 1)
        {
            this.ContentContainer.Visible = false;
            this.ContentContainer.EnableViewState = false;
        }
    
        return base.SaveViewState();
    }
    3. Build the solution
  8. #8
    Hello,

    Yes , thank you. I can confirm that applying of this fix work.
    Now code is ok without setting "EnableViewState" for panels.

    Thank you guys!
  9. #9
    Please revert changes in ContentEl property (it breaks nested layouts are added in user control or placeholder)
    Vladimir Shcheglov
    Sr. Developer
  10. #10
    Hello Vladimir :)

    I will do this. Is there other way to fix this problem than?
    Except the way that i found with EnableViewState property?
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Nov 20, 2011, 11:45 AM
  2. Bug with dynamic panels and slider control
    By decho in forum 1.x Help
    Replies: 7
    Last Post: Sep 09, 2011, 8:13 AM
  3. Bug with dynamic Add/Remove of panels
    By decho in forum 1.x Help
    Replies: 7
    Last Post: Aug 10, 2011, 10:16 AM
  4. Replies: 2
    Last Post: Jan 11, 2011, 12:28 PM
  5. Issues with dynamic IDs and tab panels
    By mindcore1 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Dec 21, 2008, 4:41 PM

Tags for this Thread

Posting Permissions