[CLOSED] [1.0] Add and remove Panel runtime

[PoloTheMonk]

Hi,

I have a Main Filter panel i need to populate with different filter (every filter=one panel) that i load from DB.
The main filter panel is designed in markup, so exist from the very begin.

I add a filter panel to the main panel runtime after a button click with this method:
(note: CreaFiltro return a Panel - Filtri is the Main panel, create in markup, in the aspx page)

Dim PannelloFiltro As Panel = CreaFiltro(Filtro, True)


PannelloFiltro.Render(Filtri.ClientID, RenderMode.AddTo)

</p>

but if I want to remove, after a button click, a panel created runtime (with the previous method) my code doesn't work:
</p>

Filtri.Remove(PannelloFiltriDisponibili.ClientID)

Whta's the difference between adding (runtime) an item with


Filtri.Items.Add(here new panel)</p>or



PannelloFiltro.Render(Filtri.ClientID, RenderMode.AddTo)

Thanks
</p>

[Vladimir]

Hi,

Please provide more details. What you mean when said "my code doesn't work"? Do you have server/client side exception? Or don't see any result?


Please note that after Remove calling you have to call DoLayout

 Filtri.DoLayout();

If you can provide test example then it can help us to solve your problem

[PoloTheMonk]

Hi Vladimir,
I mean that it does not remove the control, so when I re-create it an error occours: "the control already exists".
I tried your solution but does not work; the same error occours.

What's the difference between:

PannelloFiltro.Render(Filtri.ClientID, RenderMode.AddTo)

and

Filtri.Items.Add(PannelloFiltro))

please note that FindControl's method does not work if you create control with render's method (rendermode.AddTo)


Test example with both method ".add" and ".render" ; in this example I control if panel "DOCUMENTI" exists and if exists I want to destroy it and recreate.

<ext:Panel ID="PanelDocumenti" runat="server" Title="Files" Border="false" AutoScroll="true" Collapsible="false" Collapsed="false" height="410">
  <Content>
  </Content>
</ext:Panel>

Dim PanDoc As Panel = PanelDocumenti.FindControl("DOCUMENTI") 


If Not IsNothing(PanDoc) Then    
    PanelDocumenti.Items.Clear()

    PanelDocumenti.Remove("DOCUMENTI")
    PanelDocumenti.DoLayout()
End If


PanDoc = New Panel
PanDoc.Title = ""
PanDoc.Border = "false"
PanDoc.ID = "DOCUMENTI"

PanelDocumenti.Items.Add(PanDoc)

PanDoc.Render(PanelDocumenti, RenderMode.AddTo)


For J = 0 To 2
    Dim PanDoc2 As New Panel
    PanDoc2.Border = "true"
    PanDoc2.Title = ""
    PanDoc2.ID = "DOC_" & J
    PanDoc2.AnchorHorizontal = "right"
    PanDoc2.AnchorVertical = "20%"


    Dim Campi As New Ext.Net.ColumnLayout


    Dim Txt_InfoDoc As New Label
    Txt_InfoDoc.text = "Prova"
    Txt_InfoDoc.StyleSpec = "padding-left:5px;padding-right:5px;padding-top:2px;padding-bottom:3px;"


    Dim Btn_Download As New Ext.Net.Button
    Btn_Download.Icon = Icon.DiskBlack
    Btn_Download.ID = "DOWN_" & J
    Btn_Download.DirectEvents.Click.ExtraParams.Add(New Parameter("ID_DOC", J))
    AddHandler Btn_Download.DirectClick, AddressOf DownloadDocumento
    Btn_Download.StyleSpec = "padding-top:10px;"

    Dim ColText As New Ext.Net.LayoutColumn
    ColText.ColumnWidth = 0.5
    ColText.Items.Add(Txt_InfoDoc)
    Campi.Columns.Add(ColText)








    Dim PanDown As New Panel
    PanDown.Border = False
    PanDown.StyleSpec = "text-align:center;"
    PanDown.Items.Add(Btn_Download)

    Dim ColDown As New Ext.Net.LayoutColumn
    ColDown.ColumnWidth = 0.5
    ColDown.Items.Add(PanDown)
    Campi.Columns.Add(ColDown)
    PanDoc2.Items.Add(Campi)

    Panc.Items.Add(PanDoc2)

    PanDoc2.Render(PanDoc, RenderMode.AddTo)
Next

PanDoc.Render(PanelDocumenti.ClientID, RenderMode.Auto)

The last code's row generates the error.

PanDoc.Render(PanelDocumenti.ClientID, RenderMode.Auto)

Thanks

[Vladimir]

Hi,

1. I am not sure why do you call Render for PanDoc twice (before for loop and after). The control can be rendered once during request.

2. It is not required to render each item of the PanDoc. PanDoc renders all own items itself.

3. Difference between Render and Items.Add: Render doesn't add control to any Controls collection. Therefore control as it pulled out of the context, it doesn't know about arounding controls. If you add control to the items before rendering then it can reference on another controls because it has reference on the current page

Here is my test sample which demonstrates how to add/remove panels dynamically
PLEASE UPDATE FROM SVN FIRST, we made some improvements for dynamic rendering

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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


<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
    
    <script runat="server">
        public class PanelState
        {
            public string ID
            {
                get; set;
            }

            public string Title
            {
                get; set;
            }
        }

        private static List<PanelState> panels = new List<PanelState>();
        private static int pkID = 0;
        
        protected void Page_Load(object sender, EventArgs e)
        {
            this.RecreatePanels();
        }
        
        private void RecreatePanels()
        {
            foreach (PanelState panelState in panels)
            {
                CreatePanel(panelState);
            }
        }

        private Ext.Net.Panel CreatePanel(PanelState panelState)
        {
            Ext.Net.Button b = new Ext.Net.Button
                                   {
                                       ID = panelState.ID + "_removeBtn",
                                       Text = "Remove this panel"
                                   };
            
            b.DirectEvents.Click.Event += new ComponentDirectEvent.DirectEventHandler(RemovePanelClick);
            b.DirectEvents.Click.ExtraParams.Add(new Ext.Net.Parameter("pId", panelState.ID, ParameterMode.Value));
                    
            Ext.Net.Panel panel = new Ext.Net.Panel
                  {
                      ID = panelState.ID,
                      Title = panelState.Title,
                      Height = 100,
                      TopBar =
                          {
                              new Toolbar
                                  {
                                      Items =
                                          {
                                              b
                                          }
                                  }
                          }
                  };
                    
            PanelsCt.Items.Add(panel);

            return panel;
        }

        void RemovePanelClick(object sender, DirectEventArgs e)
        {
            string pId = e.ExtraParams["pId"];

            for (int i = 0; i < panels.Count; i++)
            {
                if(panels[i].ID == pId)
                {
                    panels.RemoveAt(i);
                    break;
                }
            }
            
            PanelsCt.Remove(pId);
            PanelsCt.DoLayout();
        }
        
        protected void AddNewPanel(object sender, DirectEventArgs e)
        {
             PanelState state = new PanelState();
             panels.Add(state); 
            
             state.ID = "id"+Guid.NewGuid().ToString().Replace("-", "");
             state.Title = "Panel ?" + ++pkID;
            
             CreatePanel(state).Render();
             PanelsCt.DoLayout();
        }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        
        <ext:Panel ID="PanelsCt" runat="server" AutoHeight="true" Title="Panels container">
            <TopBar>
                <ext:Toolbar runat="server">
                    <Items>
                        <ext:Button runat="server" Text="Add">
                            <DirectEvents>
                                <Click OnEvent="AddNewPanel"></Click>
                            </DirectEvents>
                        </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
        </ext:Panel>
        
    </form>
</body>
</html>

[PoloTheMonk]

Hi Vladimir,
I explain you my entire situation:
I have a treepanel and on node's click I call "LoadMyPanel"sub that show my panel descripted above and inside this panel are defined 3 buttons with events.

When I click on a button, program does Page_Load's event before does my button's event but program shows error "button does not exist" because button is "defined" run time (on "LoadMyPanel" sub)

So I have to call "LoadMyPanel" sub,that show my panel, also in Page_Load event

The problem is that I call "LoadMyPanel" two times (on Page_Load and on Node's click)
and when I click on another node I have to "destroy" Panel created on page_load event and recreate Panel on node's click.

I tried your solution but it does not work well.
Sometimes destroy and show correctly my panel, sometimes destroy and does not show my panel, sometimes show "old" panel

Moreover the created panel is inside a BorderLayout element (defined in markup) and when I render the panel program shows it under all elemets on my page and not inside my BorderLayout element.
I also tried to render my BorderLayout element but an errors occurs "Compilation error Microsoft JScript: expected ']' "

I hope you can understand my case.
Thank you

p.s.: First I download last version of SVN as you suggest

[Vladimir]

Hi Polo,

So I have to call "LoadMyPanel" sub,that show my panel, also in Page_Load event

According ASP.NET page life cycle the page is recreated for each request (the page is destroyed immediately after request handling). The page doesn't remember own previous state (except ViewState which should be submitted from client). Therefore any dynamic control (including standard ASP.NET controls) must be recreated for each request. You can read the following articles about dynamic controls
http://www.4guysfromrolla.com/articles/081402-1.aspx
http://weblogs.asp.net/infinitiesloo...t-1_2900_.aspx

The problem is that I call "LoadMyPanel" two times (on Page_Load and on Node's click)
and when I click on another node I have to "destroy" Panel created on page_load event and recreate Panel on node's click.

You don't need to destroy it. You have to recreate control on server side for each request without rendering. Rendering must be once only (depends from your business logic)

I tried your solution but it does not work well.
Did you try my original example or changed it? If you changed it then please show those changes

Moreover
the created panel is inside a BorderLayout element (defined in markup)
and when I render the panel program shows it under all elemets on my
page and not inside my BorderLayout element.
I also tried to render my BorderLayout element but an errors occurs "Compilation error Microsoft JScript: expected ']' "

Example?


Lets solve your issues step by step. You post test sample (please post whole sample which I can run without any changes from my side) with steps to reproduce (if it is possible). I'll try to change your posted example to resolve an issue

[PoloTheMonk]

Hi Vladimir,
I tried your suggest and it works fine: I render my controls only one time after laod theme!!

But "My Panel" is displayed under other controls and not inside them. Please see attached image.

I read the articles about dinamyc controls you suggest me and I understand that first designe markup controls and after at the end designe "runtime" controls.
I want to add controls on specified point but I don't want to use a PlaceHolder control that contains my control. How I can do it ?

Thanks, Paolo

[PoloTheMonk]

Hi Vladimir,
I solved this problem simply changing:

<ext:Panel ID="PanelDocumenti" runat="server" Title="Files" Border="false" AutoScroll="true" Collapsible="false" Collapsed="false" height="410">
    <Content> 
        <ext:Panel ID="PanDoc" runat="server" Border="false" Collapsible="false" Collapsed="false">
            <Content> 
            </Content> 
        </ext:Panel>
    </Content>
</ext:Panel>

with

<ext:Panel ID="PanelDocumenti" runat="server" Title="Files" Border="false" AutoScroll="true" Collapsible="false" Collapsed="false" height="410">
    <Items> 
        <ext:Panel ID="PanDoc" runat="server" Border="false" Collapsible="false" Collapsed="false">
            <Content>
            </Content>
        </ext:Panel>
    </Items>
</ext:Panel>

I do not understand well difference from <content> and <items> properties, but in this way my panel "PanDoc" is rendered on right place inside "PanelDocumenti"

Many thanks for your support.
Paolo

[Vladimir]

Hi,

1. I do not understand well difference from <content> and <items> properties

See the following post
http://forums.ext.net/showthread.php?5896#post23342

2. If you need to render control inside Content then you have to use RenderMode.RenderTo and define container

MyDynamicControl.Render(RenderMode.RenderTo, "={Panel1.body}")

or better variant (because we use ClientID instead hardcoding ID)

MyDynamicControl.Render(RenderMode.RenderTo, string.Format("={{{0}.body}}", Panel1.ClientID))

If need to render control as item then just add control to the Items collection and call Render

[hillscottc]

I'm a beginner trying to do something like your AddPanel example. But I have a newbie question..




In your code, you add a reference to:
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


I am not able to find that DLL. TheCooite Installation readme talks about Coolite.Ext.Web, but it doesn't mention a Ext.Net file.


How do I get/reference that dll?


Thanks.