[CLOSED] [1.0] Add AjaxEvent to Portlet tool button

[betamax]

There a number of posts related to handling a portlet tool button cllick. The ext:Window Hide Handler thread comes close to what I need, but the tool buttom I am using will have a custom event as opposed to .hide or .collapse. I wish to call a popup ext window from the server in a callback (not full postback) that will handle configuration for the portlet whose "gear" button is clicked.

I am able to use this code

 portlet.Tools.Add(New Ext.Net.Tool(Ext.Net.ToolType.Gear, "CallEdit();", "Edit Portlet"))

to set the button to call the javascript method CallEdit(), but I am not sure where to go from there. With ext windows, one can add an AjaxEvent, as in this code snippet:

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Window with AjaxEvent"
    Closable="true"
    CloseAction="Hide">
    <AjaxEvents>
        <Hide OnEvent="Window1_Hide" />
    </AjaxEvents>
</ext:Window>

Is this possible with the portlet tool button? If you have a suggestion to give, please use codebehind form, not markup.

[jchau]

There a number of posts related to handling a portlet tool button cllick. The ext:Window Hide Handler thread comes close to what I need, but the tool buttom I am using will have a custom event as opposed to .hide or .collapse. I wish to call a popup ext window from the server in a callback (not full postback) that will handle configuration for the portlet whose "gear" button is clicked.
I am able to use this code

 portlet.Tools.Add(New Ext.Net.Tool(Ext.Net.ToolType.Gear, "CallEdit();", "Edit Portlet"))

to set the button to call the javascript method CallEdit(), but I am not sure where to go from there. With ext windows, one can add an AjaxEvent, as in this code snippet:

<ext:Window 
    ID="Window1" 
    runat="server" 
    Title="Window with AjaxEvent"
    Closable="true"
    CloseAction="Hide">
    <AjaxEvents>
        <Hide OnEvent="Window1_Hide" />
    </AjaxEvents>
</ext:Window>

Is this possible with the portlet tool button? If you have a suggestion to give, please use codebehind form, not markup.

You can use DirectMethods. Can your CallEdit() javascript function execute a DirectMethod to the server.

[geoffrey.mcgill]

Hi,

The CallEdit Method will have to be configured server-side.

Example

[DirectMethod]
public void CallEdit ()
{
    // do something ....
}

You Tool button appears to be configured properly, although to directly call the server-side [DirectMethod], you'll need to call use the following client-side function call.

Example

Ext.net.DirectMethods.CallEdit();

Hope this helps.

[betamax]

Thanks geoffrey and jchau, that works exactly as desired, now...how can I pass some info about the portlet back as an argument to the function CallEdit() on the click?
Something like e.panel.id so that I could do something like:

function CallEdit(e){
        var panelId = e.panel.id;
        Ext.net.DirectMethods.CallEdit(panelId);
    }

and on the server side:

<DirectMethod()> _
Public Sub CallEdit(ByVal panelId As String)
        Dim popUp As New VMS.UI.VMSWindow
        Dim url As String = GetWindowContentPage(panelId)
        'Set popUp properties....
        popUp.ID = "Window1"
        popUp.WindowWidth = Unit.Pixel(369)
        popUp.WindowHeight = Unit.Pixel(331)
        popUp.WindowCtlCss = "windowstyle1"
        popUp.ContentUrl = url
        popUp.Render(Me.Form)
    End Sub

[geoffrey.mcgill]

Hi,

What you have there looks perfect. Just pass the .id as an argument to the Method.

[betamax]

Too simple.. I just looked past it.
Solution:

portlet1.Tools.Add(New Ext.Net.Tool(Ext.Net.ToolType.Gear, "CallEdit('" & portlet1.id & "');", "Edit Portlet"))

Thanks for the push.

[geoffrey.mcgill]

Hi Roger,

You should use .ClientID, instead of .ID. And, I don't think you need the extra wrapping single quotes (').

An instance of the Component is always available by using the Components client-side id (.ClientID).

The following should work (theoretically).

Example

"CallEdit(" & portlet1.ClientID & ");"

Hope this helps.

[betamax]

I had to add the single quotes because js threw an error that P1LZQ1001 (that particular portlets id) was undefined. I will change id to ClientId.


This thread has lead up to the creation of a configuraaton window containing an iframe. The page within that window has a "save" button. I click the "Save" button that sends the collected data to a server-side method.

1. Once clicked, I should indicate (this is not a transaction, just a unverified client side indicator) to the user that the data was saved ,
2. close the window.
3. And the big question, how to rerender the portlet who's configuration I just changed.

An example would be a portlet with a google map (an ascx) in it. The config window allows you to change to logitude and latitude of the map. When I click save I'd like the map (which uses asynch callback to load initially) to reload with new coordinates, but without full page postback.

[jchau]

We just implemented a portal "desktop" where widgets (portlets) can be added dynamically and edited via a tool button. Very similar to your scenario. After the widget has been edited, we destroy and recreate the portlet to reflect the changes using DirectMethod and XRender.

EditedPortlet.Render(columnID, rowIndex, RenderMode.InsertTo)

Hope this helps. We have way too much code for me to copy and paste our page.

[betamax]

Okay, I still stumped on this. Can I have a few more hints, or aother code snippet on how I might implement what JChau has suggested. For one, I am not familiar with XRender.