Open RadWindow Client-Side from Dock CustomCommand

[Sean]

Hi Telerik,

Currently I have this:

protected void RadDock_Command(object sender, DockCommandEventArgs e)
{
    switch (e.Command.Name)
    {
        case "Settings":
            RadAjaxManager1.ResponseScripts.Add("openRadWindow(\"RadDockSettings.aspx\", \"400\", \"400\")");
            break;
    }
  }

<script type="text/javascript">
    function openRadWindow(args, width, height) {
        var oWnd = radopen(args, "RadWindow1");
        oWnd.setSize(width, height);
        oWnd.center();
        oWnd.add_close(OnClientClose);
    }

    function OnClientClose(oWnd) {
        window.location.reload();
    }

    function GetRadWindow() {
        var oWindow = null;

        if (window.radWindow) oWindow = window.radWindow;
        else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
        return oWindow;
    }

    function returnToParent() {
        var oWnd = GetRadWindow();
        oWnd.close();
    }

</script>

This code is causing me a couple of issues:

1) The RadWindow reopens every time the page reloads -- I need to remove the ResponseScript somewhere, but where?
2) Flickering - The entire page reloads when the RadWindow is closed. I would like to just pass some information back to the page without the entire page reloading.

What's best practice for these? I've seen examples on how to open RadWindow client-side, but not through a CustomCommand click.

Thanks

[Shinu]

Hello Sean,


Try "RegisterStartupScript" method to invoke client code for opening window.
More information: Want to pop up window from server side


The following documentation will be helpful in passing parameter to parent page:
Using RadWindow as a Dialog


-Shinu.

[Georgi Tunev]

Hello Sean,

In your case, I would suggest to remove window.location.reload() from the OnClientClose function. Actually, this is what is causing the problem on your side. When reload() is executed, it causes the page to be refreshed - i.e. the same what will happen if you press F5 on your keyboard or select Refresh from the browser's View menu. In such case however, if you have made a postback on a page, the POSTDATA request will be sent again, which on the other hand causes the window to be shown again.

What you could do is to ajaxify the page with RadAjaxManager and use its client-side API to invoke ajax requests that will update only parts of the page. Such approach is used in this demo where when we close the RadWindow, we call the refreshGrid() function on the parent page, which invokes Ajax request and rebinds the grid.

Regards,
Georgi Tunev
the Telerik team

[Sean]

Hi Shinu/Georgi,

So, a couple of things. I went ahead and tried Shinu's suggestion, but it did not yield the results I had hoped for. I believe the proper solution to my issue is to set the RadDock's Command's OnClientCommand property to javascript which opens the RadWindow.

Something like "OnClientCommand="ShowWindow"".

So, I have this, which is working mostly, but I have a few questions:

<script type="text/javascript">

    var radDock = null;

 

    function ShowWindow(sender, eventArgs) {

        radDock = sender;

        var oWindow = window.radopen(null, "RadWindow1");

        oWindow.center();

    }

 

    function OnClientShow(sender, eventArgs) {

 

    }

 

    function OnClientClose(sender, eventArgs) {

        //resultArguments structure: [0]: AutoRefresh Enabled [1]: AutoRefresh Interval [2]: ChartType [3]: Restricted Time Interval Enabled [4]: Date/Time1 [5]: Date/Time2 [6]: Show Points

        if (eventArgs.get_argument() != null) {

            var results = eventArgs.get_argument();

            var settings = new Array();

            settings[0] = "Update Settings";

            settings[1] = radDock.get_uniqueID();

            settings[2] = results;

 

            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest(settings);

        }

    }

</script>

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function CloseAndSave(args) {
                var oWindow = GetRadWindow();
                var resultArguments = new Array();
                //resultArguments structure: [0]: AutoRefresh Enabled [1]: AutoRefresh Interval [2]: ChartType [3]: Restricted Time Interval Enabled [4]: Date/Time1 [5]: Date/Time2 [6]: Show Points
                resultArguments[0] = CheckBox1.checked;
                resultArguments[1] = $find("<%= RadNumericTextBox1.ClientID %>").get_value();
                resultArguments[2] = $find("<%= RadComboBox1.ClientID %>").get_value();
                resultArguments[3] = CheckBox2.checked;
                resultArguments[4] = $find("<%= RadDateTimePicker1.ClientID %>").get_selectedDate();
                resultArguments[5] = $find("<%= RadDateTimePicker2.ClientID %>").get_selectedDate();
                resultArguments[6] = CheckBox3.checked;
                oWindow.close(resultArguments);
            }

            function CloseAndCancel() {
                var oWindow = GetRadWindow();
                oWindow.argument = null;
                oWindow.close();
            }

            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow;
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
                return oWindow;
            }
    </script>
    </telerik:RadCodeBlock>


protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
{
    string[] arguments = e.Argument.Split(',');
    if (arguments[0] == "Update Settings")
    {
        string dockID = arguments[1];
        CormantRadDock dock = Utilities.FindControlRecursive(Page, dockID) as CormantRadDock;
        bool refreshEnabled = bool.Parse(arguments[2]);
        int refreshInterval = int.Parse(arguments[3]);

        switch (arguments[4])
        {
            case "Line Chart":
                dock.ChartType = Charts.LineChart;
                break;
            case "Pie Chart":
                dock.ChartType = Charts.PieChart;
                break;
            case "Bar Chart":
                dock.ChartType = Charts.BarChart;
                break;
            default:
                Debug.Assert(false, "Unhandled chart type.");
                break;
        }

        bool restrictedTime = bool.Parse(arguments[5]);
        if (arguments[6] != string.Empty)
        {
            DateTime timeOne = DateTime.Parse(arguments[6]);
        }
        if (arguments[7] != string.Empty)
        {
            DateTime timeTwo = DateTime.Parse(arguments[7]);
        }
        bool showPoints = bool.Parse(arguments[8]);
    }
}

Okay, so, a couple of things. 

First off, having to pass all my settings back by shoving them into an array and parsing out of the array seems really forced. Am I missing something here that would let me do this in a more succinct manner?

Secondly, I would like to be able to fill in the code for OnClientShow -- That is, I would like to be able to pass properties of my RadDock to the RadWindow. How would I go about doing this?

Regards,

Sean

EDIT: On a side note, I am also seeing this weird behavior: http://imgur.com/eLjhZ.png  I press the custom command button to open the RadWindow, but then the RadWindow starts loading under the loading screen for the RadDock. Any idea how to bring it to the front?

[Pero]

Hi Sean,

You could serialize any JavaScript object, pass the serialized object as argument to the ajaxRequest method, and then deserialized on the server. Here is an example:

<!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">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="RadScriptManager1" runat="server">
    </asp:ScriptManager>
    <script type="text/javascript">
        function Ajax()
        {
            var panel = $find("RadAjaxPanel1");
            var argument = new Object();
            argument.Name = "Peter";
            argument.Checked = true;

            var serializedArgument = Sys.Serialization.JavaScriptSerializer.serialize(argument);

            panel.ajaxRequest(serializedArgument);
        }
    </script>

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel1_AjaxRequest">
    <div>
        <input type="button" onclick="Ajax();" value="AjaxRequest" />
    </div>
        <asp:Label ID="Label1" runat="server" />
    </telerik:RadAjaxPanel>
    </form>
</body>
</html>

using System.Web.Script.Serialization;
using System.Collections.Generic;

public partial class Default : System.Web.UI.Page
{
    protected void RadAjaxPanel1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        JavaScriptSerializer serializer = new JavaScriptSerializer();
        Dictionary<string, object> arguments = serializer.Deserialize<Dictionary<string, object>>(e.Argument);
        Label1.Text = arguments["Name"].ToString();
    }
}

For some of the RadDock's server-side properties there are corresponding client-side properties, and you can use them to get the needed values to pass to the RadWindow. A list of the most important properties that are exposed on the client can be found here: http://www.telerik.com/help/aspnet-ajax/dock_clientraddock.html. The other properties that are not exposed can be passed as an HTML attribute (RadDock1.Attributes.Add) to the dock, and then retrieved on the client.

The RadAjaxLoadingPanel has greater z-index (the exact value is 90000) than the RadWindow, and that's why it is shown over the window. Setting greater z-index to the Window will show it over the loading panel. Any value greater than 90000 will do the trick. The z-index can be set globally by using the .RadWindow selector, or specifically to the window using the Style property. Note that you might need to apply !important flag to your z-index, cause the built-in CSS might be stronger or applied after.

Greetings,
Pero
the Telerik team

[Sean]

Hi Telerik,

All of this seems to be working well. I have encountered one issue, though. 

I was curious why this code works:

function CloseAndSave(args) {
    var oWindow = GetRadWindow();
    var properties = [];
    properties[0] = "Foo";
    oWindow.close(properties);
}

but this code does not

function CloseAndSave(args) {
    var oWindow = GetRadWindow();
    var properties = [];
    properties["AutoRefreshEnabled] = "Foo";
    oWindow.close(properties);
}

When I say alert(eventArgs.get_argument()) over in OnClientClose I see no arguments when using the second means. I don't see what's different between these two -- why does the indexing method matter to the object?

In OnClientShow I am able to do this fine:

function OnClientShow(sender, eventArgs) {
                        var properties = [];

                        properties["AutoRefreshEnabled"] = radDock.get_element().getAttribute("AutoRefreshEnabled");
                        properties["AutoRefreshInterval"] = radDock.get_element().getAttribute("AutoRefreshInterval");
                        properties["ChartType"] = radDock.get_element().getAttribute("ChartType");
                        properties["TimeRestrictionEnabled"] = radDock.get_element().getAttribute("TimeRestrictionEnabled");
                        properties["TimeStart"] = radDock.get_element().getAttribute("TimeStart");
                        properties["TimeEnd"] = radDock.get_element().getAttribute("TimeEnd");
                        properties["DataPointsEnabled"] = radDock.get_element().getAttribute("DataPointsEnabled");

                        sender.argument = properties;
                    }

Sean

[Sean]

In addition, I am experiencing this issue and I don't know if I am using the Telerik controls in a proper fashion.

First, a brief overview:

I have a RadDock that has a chart displayed in it. The user clicks a custom command to open a dialog. The dialog has settings in it which reflect possible settings for the chart being displayed inside the RadDock. 

The user has just now changed one of those settings. They selected "Pie Chart" from the combo box and have now clicked 'Apply' to close & save the RadWindow. I pass the information back from the RadWindow to the main page's client-side 

<script type="text/javascript">
    var radDock = null;

    function ShowWindow(sender, eventArgs) {
        radDock = sender;
        var oWindow = window.radopen(null, "RadWindow1");
        oWindow.center();
    }

    function OnClientShow(sender, eventArgs) {
        var properties = [];

        properties["AutoRefreshEnabled"] = radDock.get_element().getAttribute("AutoRefreshEnabled");
        properties["AutoRefreshInterval"] = radDock.get_element().getAttribute("AutoRefreshInterval");
        properties["ChartType"] = radDock.get_element().getAttribute("ChartType");
        properties["TimeRestrictionEnabled"] = radDock.get_element().getAttribute("TimeRestrictionEnabled");
        properties["TimeStart"] = radDock.get_element().getAttribute("TimeStart");
        properties["TimeEnd"] = radDock.get_element().getAttribute("TimeEnd");
        properties["DataPointsEnabled"] = radDock.get_element().getAttribute("DataPointsEnabled");

        sender.argument = properties;
    }

    function OnClientClose(sender, eventArgs) {
        //resultArguments structure: [0]: AutoRefresh Enabled [1]: AutoRefresh Interval [2]: ChartType [3]: Restricted Time Interval Enabled [4]: Date/Time1 [5]: Date/Time2 [6]: Show Points

        if (eventArgs.get_argument() != null) {
            var properties = eventArgs.get_argument();
            var settings = new Array();
            settings[0] = "Update Settings";
            settings[1] = radDock.get_uniqueID();
            settings[2] = properties;

            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            var uniqueID = radDock.get_uniqueID();
            ajaxManager.ajaxRequest(settings);
            ajaxManager.ajaxRequestWithTarget(uniqueID, '');
        }
    }
</script>

At the bottom of the OnClientClose function you see "ajaxManager.ajaxRequest(settings)." Here I pass the new chart type back to the server side so that it may be set.

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            string[] arguments = e.Argument.Split(',');
            if (arguments[0] == "Update Settings")
            {
                string dockID = arguments[1];
                CormantRadDock dock = Utilities.FindControlRecursive(Page, dockID) as CormantRadDock;
                dock.AutoRefreshEnabled = bool.Parse(arguments[2]);
                dock.AutoRefreshInterval = int.Parse(arguments[3]);

                switch (arguments[4])
                {
                    case "LineChart":
                        dock.ChartType = Charts.LineChart;
                        break;
                    case "PieChart":
                        dock.ChartType = Charts.PieChart;
                        break;
                    case "BarChart":
                        dock.ChartType = Charts.BarChart;
                        break;
                    default:
                        Debug.Assert(false, "Unhandled chart type.");
                        break;
                }

                dock.TimeRestrictionEnabled = bool.Parse(arguments[5]);
                if (dock.TimeRestrictionEnabled)
                {
                    switch (dock.ChartType)
                    {
                        case Charts.LineChart:
                            dock.TimeStart = DateTime.Parse(arguments[6]);
                            dock.TimeEnd = DateTime.Parse(arguments[7]);
                            break;
                        case Charts.PieChart:
                            dock.TimeStart = DateTime.Parse(arguments[6]);
                            break;
                        case Charts.BarChart:
                            break;
                        default:
                            Debug.Assert(false, "Unhandled chart type");
                            break;
                    }
                }

                dock.DataPointsEnabled = bool.Parse(arguments[8]);
            }
        }

What I had hoped would happen is this: AjaxRequest fires immediately and the dock's properties are updated. RadDockLayout's SaveDockLayout fires and writes the new property values to a storage medium. The page reinitializes, the RadDock is recreated and its graph is recreated using the new settings of the RadDock.

What actually happens: The page reinitializes, the RadDock is recreated and its graph is recreated using the old settings of the RadDock. AjaxRequest fires. The dock's properties are updated. RadDockLayout's SaveDockLayout fires and writes the new property values to a storage medium. The page does not reinitialize again -- the dock's properties are correct, but the graph does not reflected these new changes.

As such, I attempted calling 

ajaxManager.ajaxRequestWithTarget(uniqueID, '');

after the first Ajax call in order to get the required control to refresh itself. I am not very familiar with ajax, however, and apparently this is not a possible thing to do. I am greeted with "Failed to load resource" and other exceptions. 

Am I missing something here? I would like to pass values back from my RadWindow to my main program, change the RadDock affected by these settings, and then refresh the RadDock to display the new settings.

[Pero]

Hello Sean,

To respond to your previous thread, I think JS error occurs and this breaks the code. The error occurs at properties["AutoRefreshEnabled] = "Foo"; line because you have missed the closing quote, around AutoRefreshEnabled keyword.

The following article from our online help explains how exactly the AjaxManager's methods, for initiating ajax requests from the client, work: http://www.telerik.com/help/aspnet-ajax/ajax-client-side-api.html. You will notice that the ajaxRequestWithTarget method should be used to simulate ajax/postback request initiated from another control - i.e. this method is used to specify the Ajax trigger, and not the updated controls. In your scenario, I suppose that we need to update the dock, and not make the dock a trigger.
So, please make sure the dock in question is the one that is affected by the Ajax call. In fact, I believe this is the problem why the dock is not updated by the first ajax request - it is not one of the updated controls. So, make sure the Chart dock gets updated.
If this does not help, please send us a fully working sample so we can observe the problem locally.

Greetings,
Pero
the Telerik team