Dock Close Confirmation?

[PapaSmurf]

Hi,

i'm using the portal example, but is there code how to demonstrate
a DockWindow Close(hide?) confirmation dialog (client side?).

Thanx.

[Obi-Wan Kenobi]

You should add a handler to the Close command, where you should show the confirm dialog.
You can find an example which illustrates similar behavior here(click over the custom commands):
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Dock/Examples/Commands/DefaultCS.aspx

[brad]

I've been trying for a few hours to get this working with no success. Like the OP I'm building on the portal example and would like to have a js prompt to confirm that the user wants to remove the dock.

When creating the dock a command is added, the client side command to run is added. The js runs, prompts the user ... and the dock always closes. Can someone point out if there is something obvious that I've missed?

In the js I've tried returning true/false, firing and not firing a postback, setting the set_close property all to no avail.

aspx.vb

Private Sub LoadWidget(ByVal dock As RadDock)
    If String.IsNullOrEmpty(dock.Tag) Then
        Return
    End If

    'Add user control to the dock content
    Dim contentPanel As textOnly2
    contentPanel = CType(c, textOnly2)
    contentPanel.myLabelText = "controlled text"
    dock.ContentContainer.Controls.Add(contentPanel)

    dock.DefaultCommands = Telerik.Web.UI.Dock.DefaultCommands.None

    'Add close command
    Dim closeDock As New DockCommand()
    closeDock.OnClientCommand = "CloseDock"
    closeDock.AutoPostBack = False
    closeDock.Name = "Close"
    closeDock.Text = "closeText"
    dock.Commands.Add(closeDock)

    AddHandler dock.Command, AddressOf dock_Command

End Sub

Sub dock_Command(ByVal sender As Object, ByVal e As DockCommandEventArgs)
    If e.Command.Name = "Close" Then
        ScriptManager.RegisterStartupScript(UpdatePanel1, Me.[GetType](), "RemoveDock", String.Format("function _removeDock() {{" & Chr(13) & "" & Chr(10) & "" & Chr(9) & "Sys.Application.remove_load(_removeDock);" & Chr(13) & "" & Chr(10) & "" & Chr(9) & "$find('{0}').undock();" & Chr(13) & "" & Chr(10) & "" & Chr(9) & "$get('{1}').appendChild($get('{0}'));" & Chr(13) & "" & Chr(10) & "" & Chr(9) & "$find('{0}').doPostBack('DockPositionChanged');" & Chr(13) & "" & Chr(10) & "}};" & Chr(13) & "" & Chr(10) & "Sys.Application.add_load(_removeDock);", (DirectCast(sender, RadDock)).ClientID, UpdatePanel1.ClientID), True)
    End If
End Sub

aspx

<script type="text/javascript">
    function CloseDock(dock, args)
    {
        if (confirm('Remove ' + dock.get_title() + ' from page?'))
        {
            alert('ok clicked ... closing');
            //return(true);
            //dock.set_close = true;
            dock.doPostBack();
        }
        else
        {
            alert('cancel clicked ... do nothing');
            return(false);
            //dock.doPostBack();
        }
    }
</script>

[Sophy]

Hello Brad,

The problem you experience is due to dock_Command server-side command handler being executed in both cases - when you confirm closing the dock and when you deny the operation which causes the dock being undocked from the corresponding zone and moved to the invisible UpdatePanel.
To avoid command's code being executed you need to call 
args.set_cancel(true);
and to close the dock you need to execute 
dock.set_closed(true);
instead of doing a postback.
Please, note that in this case the command should have its AutoPostBack property set to true.
You need to change the CloseDock handler in the following way:

<script type="text/javascript">
    function CloseDock(dock, args)
    {
        if (confirm('Remove ' + dock.get_title() + ' from page?'))
        {
            alert('ok clicked ... closing');
            dock.set_closed(true);
        }
        else
        {
            alert('cancel clicked ... do nothing');
            args.set_cancel(true);
        }
    }
</script>

Another way to achieve the same result is to simply modify the dock_Command handler and remove the CloseDock ClientCommand handler, e.g.:

Private Sub dock_Command(ByVal sender As Object, ByVal e As DockCommandEventArgs)
    If e.Command.Name = "Close" Then
        ScriptManager.RegisterStartupScript(UpdatePanel1, Me.[GetType](), "RemoveDock", String.Format("function _removeDock() {{ " & Chr(13) & "" & Chr(10) & " Sys.Application.remove_load(_removeDock);" & Chr(13) & "" & Chr(10) & " var dock = $find('{0}');" & Chr(13) & "" & Chr(10) & " if (confirm('Remove ' + dock.get_title() + ' from page?')) " & Chr(13) & "" & Chr(10) & " {{ " & Chr(13) & "" & Chr(10) & " alert('ok clicked ... closing'); " & Chr(13) & "" & Chr(10) & " dock.set_closed(true);" & Chr(13) & "" & Chr(10) & " dock.undock();" & Chr(13) & "" & Chr(10) & " $get('{1}').appendChild($get('{0}'));" & Chr(13) & "" & Chr(10) & " dock.doPostBack('DockPositionChanged'); " & Chr(13) & "" & Chr(10) & " }} " & Chr(13) & "" & Chr(10) & " else " & Chr(13) & "" & Chr(10) & " {{ " & Chr(13) & "" & Chr(10) & " alert('cancel clicked ... do nothing'); " & Chr(13) & "" & Chr(10) & " //dock.doPostBack(); " & Chr(13) & "" & Chr(10) & " }} " & Chr(13) & "" & Chr(10) & " }};" & Chr(13) & "" & Chr(10) & " Sys.Application.add_load(_removeDock);", DirectCast(sender, RadDock).ClientID, UpdatePanel1.ClientID), True)
    End If
End Sub

Let me know in case you need further assistance.

Best regards,
Sophy
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[brad]

Thanks Sophy. I tried your first suggestion and it works well.

[Trystan]

In case anyone would like to use a radWindow confirm dialog instead of the browser confirm popup, add a radWindowmanager to the page and use this javascript function for the OnClientCommand.

function closeStep(dock, args) {
    args.set_cancel(true);
    //Set up the callback function - called on return of dialog
    var callbackFn = function(arg) {
        if(arg) { //if dialog returned true, close the dock
            dock.set_closed(true);
            dock.doPostBack('Close');
        }
    }
    //Call the confirm dialog
    radconfirm('Are you sure you want to close this control?', callbackFn, 330, 100);
}

[Sean]

Hi,

I attempted to use the code provided by Trystan, but I found that it did not work for my purposes. Just wanted to add onto this discussion a bit. Here's what worked for me:

function ConfirmClose(dock, eventArgs) {
    eventArgs.set_cancel(true);
    //Set up the callback function - called on return of dialog
    var callbackFn = function (arg) {
        if (arg) { //if dialog returned true, close the dock
            dock.doPostBack(eventArgs.Command.get_name());
        }
    }

    radconfirm('Are you sure you want to close this control?', callbackFn, 330, 100);
}

and this was server-side:

CreateAndAttachCommand("Close", "ConfirmClose", false);

public void CreateAndAttachCommand(string commandName, string onClientCommand, bool autoPostBack)
{
    DockCommand command = new DockCommand
                              {
                                  Name = commandName,
                                  Text = commandName,
                                  CssClass = commandName.Replace(" ", string.Empty),
                                  OnClientCommand = onClientCommand,
                                  AutoPostBack = autoPostBack
                              };
    Commands.Add(command);
}

Do note that, while I set AutoPostBack for the command to false, I tested both true and false and didn't notice any differences for my purposes. Also, I intercept the "Close" command server-side once it is posted to the server and close the dock server-side. This is probably why Trystan's version did not work for me -- the Server was not expecting the dock to be closed already. 

[HL]

hi all:
  Is any way to remove dock from widgetstate when I close dock ? Now when I close the dock, the only thing changes is that the dock.close status to true. but the dock id and other information is still inside the dockstate. how can I remove it ?

Thanks
Helena

[Slav]

Hi Helena,

In order to ensure that a RadDock is not persisted in the ViewState after it is closed, please handle the server-side event Command of the RadDock and set the control's property Visible to false, if the Close command is clicked, as shown below:

void dock_Command(object sender, DockCommandEventArgs e)
{
    if (e.Command.Name == "Close")
    {
        RadDock dock = sender as RadDock;
        dock.Visible = false;
    }
}

If you create the dock controls dynamically, on Page_Init you should set the Visible property of the RadDocks, depending on the value of its Closed property. This approach is demonstrated in the following code sample:

protected void Page_Init(object sender, EventArgs e)
{
    for (int i = 0; i < CurrentDockStates.Count; i++)
    {

        RadDock dock = CreateRadDockFromState(CurrentDockStates[i]);
        RadDockLayout1.Controls.Add(dock);
        CreateSaveStateTrigger(dock);
        LoadWidget(dock);

        if (CurrentDockStates[i].Closed == true)
        {
            dock.Visible = false;
        }

    }
}

For your convenience I have attached a sample project, implementing the solution, presented above. You may use it as a reference for your further development.

Greetings,
Slav
the Telerik team

[HL]

Hi Slav:
   Thanks for your reply. actually what I want is to remove the closed dock from the  state. so it will be out from RadDockLayout1 instead of changing the visible status to false. if I can remove it from RadDockLayout1, then I can add it as a new dock next time

so when I get  RadDockLayout1.GetRegisteredDocksState(). I only want all the state are the visible dock and all invisible docks are not in the list.  so how I can remove the closed dock from RadDockLayout1 inside the dock_Command event?

Thanks
Helena

[Sean]

Helena,

By calling RadDockLayout's GetRegisteredDocksState with the optional parameter bool omitClosedDocks set to true you should receive a List of DockStates which have the closed docks omitted.

See the documentation for more information.

Thanks,

Sean

[HL]

thanks Sean !

also Can you please confirm that why we need to call/fire RadDockLayout1_SaveDockLayout event every time? If I load dockstate from the database then load dock based on the state. I am assuming I don't need to call RadDockLayout1_SaveDockLayout since nothing change for the dock since it has been loaded from the state. I only need to call it when any change happened for dock. is it correct?


Thanks
Helena

[Slav]

Hi Helena,

Indeed, the server-side event of the RadDock SaveDockLayout is fired on every page life cycle, even when there aren't changes in the layout of the dock controls. You could use it to save the state on specific conditions, although in such case you will have to detect when a change in the RadDocks' state occurs. This may not be so easy, so I would suggest sticking to the default approach as it is safer and more reliable.

Kind regards,
Slav
the Telerik team

[HL]

HI Slav:
     Thanks. I could add some condition when SaveDockLayout is fired then decide if I need to save to database. The big issue for me now is that I have to find solution to load dock from state which might do the same thing with loadDocklayout . I send you a runable project through the email directly.could you please check ([e-mail]) ?


Thanks
Helena

[Slav]

Hi Helena,

Thank you very much for the provided sample project! Let's discuss the problem at hand in your original forum thread so that our correspondence is easier to follow. I would suggest also using this practice for future reporting of problems in our support system.

Regards,
Slav
the Telerik team