[CLOSED] Create Stateful Portal - Save Position and Collapse of Portlets

  1. #1

    [CLOSED] Create Stateful Portal - Save Position and Collapse of Portlets

    I am trying to create a dynamic portal that will look up the portlets selected by a particular user and display them in the order they chose and in the last collapse mode they chose. I have an AJAX handler on the close tool on the portlet header, but I can't seem to find where to call an AJAX function after the portlet is moved or collapsed.

    Any suggestions on a better way to do this dynamic portlet would be greatly appreciated also.

    Thanks in advance,

    
    
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Portal Example</title>
    <script runat="server">
      Protected Overloads Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load 
      If Not Ext.IsAjaxRequest Then
        Dim Portlet1 As New Portlet
        Portlet1.Title = "First Dynamic Portlet"
        Portlet1.AutoLoadIFrame = "http://www.google.com"
        Portlet1.Height = 400
        Portlet1.ShowIFrameMask = "true" 
        'Portlet1.Listeners.Collapse.Fn = "Ext.Msg.alert('Success')"
        'Portlet1.Listeners.Move.Fn = "Coolite.AjaxMethods.PortletClick3(1)"
    
    ''''''''****************
    'create a tool that removes a portlet, I need this same type of thing for collapse and move :)
        Dim Tool1 As New Tool
        Tool1.Type = ToolType.Close
        Tool1.Handler = "Coolite.AjaxMethods.PortletRemove(1,{success: function(result) {Ext.Msg.alert('Success', result);}});panel.ownerCt.remove(panel, true);"
        Portlet1.Tools.Add(Tool1)
    ''''''''****************
        Dim a1 As New Anchor
        a1.Items.Add(Portlet1)
        AnchorLayout1.Anchors.Add(a1)
    
        Dim Portlet2 As New Portlet
        Portlet2.Title = "Second Dynamic Portlet"
        Dim Tool2 As New Tool
        Tool2.Type = ToolType.Close
        Tool2.Handler = "Coolite.AjaxMethods.PortletRemove(2,{success: function(result) {Ext.Msg.alert('Success', result);}});panel.ownerCt.remove(panel, true);"
        Portlet2.Tools.Add(Tool2)
    
        Dim a2 As New Anchor
        a2.Items.Add(Portlet2)
        AnchorLayout1.Anchors.Add(a2)
      End If
    End Sub
    
    
    
    
    
    <AjaxMethod()> _
    Public Function PortletRemove(ByVal Index As Integer) As String
      'do a DB update to remove this from the user's list of portlets
      Return "Remove Portlet - Index: " &amp; Index
    End Function 
    </script>
    </head>
    
    <body>
    <form id="form1" runat="server">
    <ext:ScriptManager ID="ScriptManager2" runat="server"></ext:ScriptManager> 
    <ext:Portal ID="Portal1" runat="server" Title="Portal">
      <Body>
        <ext:ColumnLayout ID="ColumnLayout1" runat="server">
          <ext:LayoutColumn ColumnWidth=".5">
            <ext:PortalColumn ID="PortalColumn1" runat="server" StyleSpec="padding:10px 0 10px 10px">
              <Body>
                <ext:AnchorLayout ID="AnchorLayout1" runat="server"></ext:AnchorLayout>
              </Body>
            </ext:PortalColumn>
          </ext:LayoutColumn>
          <ext:LayoutColumn ColumnWidth=".5">
            <ext:PortalColumn ID="PortalColumn2" runat="server" StyleSpec="padding:10px 0 10px 10px">
              <Body></Body>
            </ext:PortalColumn>
          </ext:LayoutColumn>
        </ext:ColumnLayout>
      </Body>
    </ext:Portal>
    <ext:Label ID="lblTemp" runat="server"></ext:Label>
    </form>
    </body>
    </html>
  2. #2

    RE: [CLOSED] Create Stateful Portal - Save Position and Collapse of Portlets

    Hi iansriley,

    The <ext:Portal> has a <Drop> Listener and AjaxEvent which fires when a Panel/Portlet is dropped.

    The <Drop> is handled by the Portal, but the Collapse/Expand of each Portlet is handled individually by each Portlet. You just have to add either a <Collapse> or <Expand> Listener/AjaxEvent to the Portlet.

    As well, the Panels/Portlets fire a <BeforeCollapse> and <BeforeExpand> events.

    The following demonstrates a simple example of firing both a Portal <Drop> Listener and AjaxEvent.

    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">
        protected void Portal1_Drop(object sender, AjaxEventArgs e)
        {
            string tpl = "Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}";
    
            this.Label1.Html = string.Format(tpl, e.ExtraParams["ID"], e.ExtraParams["ColumnIndex"], e.ExtraParams["Position"]);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Portal in TabPanel</title>
    </head>
    <body>
        <form id="form1" runat="server">
            <ext:ScriptManager ID="ScriptManager1" runat="server" />
            
            <ext:Panel ID="Panel1" runat="server" Width="800" Height="400">
                <Body>
                    <ext:FitLayout runat="server">
                        <ext:Portal ID="Portal1" runat="server" Border="false">
                            <Listeners>
                                <Drop Handler="Ext.Msg.alert('Drop', String.format('Panel: {0}<br />ColumnIndex: {1}<br />Position: {2}', e.panel.id, e.columnIndex, e.position));" />
                            </Listeners>
                            <AjaxEvents>
                                <Drop OnEvent="Portal1_Drop">
                                    <ExtraParams>
                                        <ext:Parameter Name="ID" Value="e.panel.id" Mode="Raw" />
                                        <ext:Parameter Name="ColumnIndex" Value="e.columnIndex" Mode="Raw" />
                                        <ext:Parameter Name="Position" Value="e.position" Mode="Raw" />
                                    </ExtraParams>
                                </Drop>
                            </AjaxEvents>
                            <Body>
                                <ext:ColumnLayout ID="ColumnLayout1" runat="server">
                                    <ext:LayoutColumn ColumnWidth=".33">
                                        <ext:PortalColumn 
                                            ID="PortalColumn1" 
                                            runat="server" 
                                            StyleSpec="padding:10px 0 10px 10px">
                                            <Body>
                                                <ext:AnchorLayout ID="AnchorLayout1" runat="server">
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:Portlet ID="Portlet1" Title="Another Panel 1" runat="server" >
                                                            <Tools>
                                                                <ext:Tool Type="Close" Handler="panel.ownerCt.remove(panel, true);" /> 
                                                            </Tools>
                                                            <Listeners>
                                                                <BeforeExpand
                                                            </Listeners>
                                                        </ext:Portlet>
                                                    </ext:Anchor>
                                                </ext:AnchorLayout>
                                            </Body>
                                        </ext:PortalColumn>
                                    </ext:LayoutColumn>
                                    <ext:LayoutColumn ColumnWidth=".33">
                                        <ext:PortalColumn 
                                            ID="PortalColumn2" 
                                            runat="server" 
                                            StyleSpec="padding:10px 0 10px 10px">
                                            <Body>
                                                <ext:AnchorLayout ID="AnchorLayout2" runat="server">
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:Portlet ID="Portlet2" Title="Panel 2" runat="server" />
                                                    </ext:Anchor>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:Portlet ID="Portlet3" Title="Another Panel 2" runat="server" />
                                                    </ext:Anchor>
                                                </ext:AnchorLayout>
                                            </Body>
                                        </ext:PortalColumn>
                                    </ext:LayoutColumn>
                                    <ext:LayoutColumn ColumnWidth=".33">
                                        <ext:PortalColumn 
                                            ID="PortalColumn3" 
                                            runat="server" 
                                            StyleSpec="padding:10px">
                                            <Body>
                                                <ext:AnchorLayout ID="AnchorLayout3" runat="server">
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:Portlet ID="Portlet4" Title="Panel 3" runat="server" />
                                                    </ext:Anchor>
                                                    <ext:Anchor Horizontal="100%">
                                                        <ext:Portlet ID="Portlet5" Title="Another Panel 3" runat="server" />
                                                    </ext:Anchor>
                                                </ext:AnchorLayout>
                                            </Body>
                                        </ext:PortalColumn>
                                    </ext:LayoutColumn>
                                </ext:ColumnLayout>    
                            </Body>
                        </ext:Portal>
                    </ext:FitLayout>
                </Body>
            </ext:Panel>
            
            <br />
            <br />
            
            <ext:Label ID="Label1" runat="server" />
        </form>
    </body>
    </html>
    The code above is using the v0.7 release, which should be publicly available late today.

    Hope this helps.


    Geoffrey McGill
    Founder & CEO
  3. #3

    RE: [CLOSED] Create Stateful Portal - Save Position and Collapse of Portlets

    That worked perfectly, Thank You.

    --please mark as [CLOSED]

Similar Threads

  1. Save Portlets Location and Position
    By emrencik in forum 1.x Help
    Replies: 0
    Last Post: Jun 16, 2011, 3:38 PM
  2. [CLOSED] Problem with portal and portlets
    By Pablo_Azevedo in forum 1.x Premium Help
    Replies: 11
    Last Post: Aug 16, 2010, 7:13 PM
  3. [CLOSED] [1.0] Dropping portlets into an empty portal...
    By betamax in forum 1.x Premium Help
    Replies: 3
    Last Post: May 26, 2010, 7:38 PM
  4. [CLOSED] Panel Collapse Stateful
    By Neil_Walters in forum 1.x Premium Help
    Replies: 3
    Last Post: Mar 18, 2010, 6:59 AM
  5. Dynamic portal and portlets in code behind
    By Sofficino in forum 1.x Help
    Replies: 1
    Last Post: Jun 08, 2009, 5:42 AM

Posting Permissions