Hi Telerik,
Currently I have this:
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
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
7 Answers, 1 is accepted
0
Shinu
Top achievements
Rank 2
answered on 25 Feb 2011, 08:50 AM
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.
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.
0
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.
Regards,
Georgi Tunev
the Telerik team
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Sean
Top achievements
Rank 2
answered on 25 Feb 2011, 08:55 PM
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:
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?
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?
0
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:
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
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
0
Sean
Top achievements
Rank 2
answered on 03 Mar 2011, 12:19 AM
Hi Telerik,
All of this seems to be working well. I have encountered one issue, though.
I was curious why this code works:
but this code does not
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:
Sean
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
0
Sean
Top achievements
Rank 2
answered on 03 Mar 2011, 08:55 PM
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
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.
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
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.
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.
0
Accepted
Hello Sean,
To respond to your previous thread, I think JS error occurs and this breaks the code. The error occurs at
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
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
Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!