This is a migrated thread and some comments may be shown as answers.

RadWindow problem after Ajax call

2 Answers 195 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Julie T Back
Top achievements
Rank 1
Julie T Back asked on 31 Jul 2008, 01:01 AM
Hello, I am new to Telerik controls, and need some help.  I am a science teacher, and trying to be a programmer.  I am having a problem with the RadWindow losing its vertical scroll bars after an Ajax return.  The page I have written is fairly complex:

Main window has a RadSplitter with a left pane containing a RadTree, and the right pane containing a targeted page from whatever the client clicked on the tree view.  The process would be something like this:  User clicks tree node, client side target of the right content pane with a new page.  The page contains a RadGrid.  When the user selects a row in the Grid and Clicks Edit, a new RadWindow is opened maximized over the right pane.  That sets the stage for the problem I am having.  I picked up a nice trick for full screen from the Telerik examples:

<style type="text/css">

html, body, form

{

height: 100%;

margin: 0px;

padding: 0px;

overflow: hidden;

}

</style>



Now in this page there is a RadText box, and three Images.  When a user clicks on the image client side code goes to the parent page (right pane), and gets a handle on the main browser window, and opens a modal maximized RadWindow over the whole screen.  The page it loads is similar to the above, having a splitter (left pane a tree view housing image categories), and the right pane a page targeted from whatever the user selected in the tree view.  Everything works fine as the user selects a tree item, the right pane loads the page, and if the user wants to select a color for the image, then they click on a link which opens a RadWindow Modal Maximized over the right pane.  The user goes on until they have selected a skin and container for their site.

Once they are done, and the user selects a container, the container selector page makes an Ajax call to save their selection, and then on the Ajax return all the windows are closed all the way back to the original opened window over the two pane main window, which if the argument from the "Skin Selector" has a given value, the page makes an Ajax call to the server to save the selections, and refresh the page with the correct images that they selected.  This is where the problem lies.  The page is rather long, and before the Skin Selector window is opened there are vertical and based on whether their window is full screen or not, they may have a horizontal scroll bar.  When the AjaxManager Ajax request is completed and returned to the client all of my scroll bars go away and the user cannot see or click on the save button at the bottom of the page.

Am I doing something wrong here?  This didn't seem to happen until I started using the Ajax call back for the window.

My System is as follows:
Windows XP SP3
Visual Studio 2005 Pro
SQL Server 2005 ENTERPRISE
Internet Explorer 6.0.2900.5512.xpsp.080413-2111

I have not tried this in IE 7.0 yet or the other browsers I use to test the site before deployment (Firefox, Opera, Netscape 7).

2 Answers, 1 is accepted

Sort by
0
Julie T Back
Top achievements
Rank 1
answered on 31 Jul 2008, 03:53 AM
To update this issue, I was able to somewhat work around the problem of losing my scroll bars by opening the windows a different way, which I don't think is the best way to do it, but it does work.

Now I am getting a javascript error whenever the opened window closes, and I cannot figure out why.  The error is:

Line: 6267
Char: 1
Error: Object Expected
Code: 0

I have tried to look at the line number in notepad, but it says the line number is out of range.

Again, the problem is that when a RadWindow I opened to do some selections is closed, and I validate that I need to take action based on the argument returned from that window, I use the AjaxManager to make a request.  When the request is done, I get the above javascript error.  Now, to determine that it is in fact the Ajax manager, I placed a hidden image button on my form, and replaced the ajax call with a standard postback calling "__doPostback('','');" and I don't get the javascript error.  I am using a RadScriptBlock, and in reading the help documents, it seems that I should be using the RadCodeBlock if using Ajax.  (BTW, I am not using a RadAjaxPanel, but rather a standard ASP.NET Panel, RadAjaxManager, and RadAjaxLoadingPanel).  I tried changing the RadScriptBlock to a RadCodeBlock and it didn't help.  Can someone please help me?  Here is the client code and the server code:

Client:

<

body>

<form id="form1" runat="server">

<div>

<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadScriptBlock ID="radScriptBlock1" runat="server" EnableViewState="true">

<script type="text/javascript">

var wizardWindow = null;

var urlskin = '<%=GetSkinWizardURL() %>';

var urlcontainer = '<%=GetContainerWizardURL() %>';

var isFromTree = '<%=IsFromTreeView %>';

var changeType = '';

var hdField = '<%=hdAction.ClientID %>';

function OpenWizard(utype)

{

changeType = utype;

if(utype == 'skin')

{

wizardWindow = GetRadWindow().BrowserWindow.OpenWizard(urlskin);

}

else

{

wizardWindow = GetRadWindow().BrowserWindow.OpenWizard(urlcontainer);

}

wizardWindow.add_close(OnClientClose);

}

function OnClientClose(window)

{

if(window.argument != null && window.argument != 'undefined')

{

if(window.argument == true || window.argument == 'true')

{

//var field = document.getElementById(hdField);

//field.value = changeType;

// __doPostBack('<%=btnSkinSelected.ClientID %>','');

$find(

"<%= RadAjaxManager1.ClientID %>").ajaxRequest(changeType);

}

}

}

function CloseAndRebind(args)

{

GetRadWindow().Close();

GetRadWindow().BrowserWindow.refreshGrid(args);

}

function GetRadWindow()

{

var oWindow = null;

if (window.radWindow)

{

oWindow = window.radWindow;

//Will work in Moz in all cases, including clasic dialog

}

else if (window.frameElement.radWindow)

{

oWindow = window.frameElement.radWindow;

//IE (and Moz as well)

}

return oWindow;

}

function CancelEdit()

{

if(isFromTree == 'false')

{

GetRadWindow().Close();

return false;

}

return true;

}

</script>

</telerik:RadScriptBlock>

<input type="hidden" runat="server" id="hdAction" value="" />

<asp:Panel ID="panContent" runat="server">

<table cellpadding="0" cellspacing="5" border="0" width="100%">

<tr>

<td valign="top" colspan="2">

<asp:Label id="lblError" runat="server" ForeColor="red"></asp:Label>

</td>

</tr>

<tr>

<td valign="top" align="left">Canvas Name:</td>

<td valign="top" align="left">

<telerik:RadTextBox ID="txtCanvasName" runat="server" Skin="Office2007" Width="200px">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td valign="top" align="left">Canvas Title:</td>

<td valign="top" align="left">

<telerik:RadTextBox ID="txtTitle" runat="server" Skin="Office2007" Width="200px">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td valign="top" align="left">Skin:</td>

<td valign="top" align="left">

<!-- Skin Selector -->

<telerik:RadToolTip ID="ttSkin" runat="server" Skin="Office2007" Animation="FlyIn" IsClientID="true" Position="TopCenter" TargetControlID="imgSkin">

<asp:Image ID="ttSkinImage" runat="server" style="width:400px;"/>

</telerik:RadToolTip>

<asp:Image ID="imgSkin" runat="server" Width="150px"/>

<br />

<asp:LinkButton ID="btnSelectSkin" runat="server" OnClientClick="OpenWizard('skin');return false;"

CausesValidation="true">

<img style="border:0px;vertical-align:middle;" alt="Select Skin" id="skinImage"

src='<%=TeacherCanvas.Common.PathProviders.PathProvider.GetAdminIconPath()%>/paintbrush.gif' />

Change Skin

</asp:LinkButton>

</td>

</tr>

<tr id="trContainer" runat="server">

<td valign="top" align="left">Container:</td>

<td valign="top" align="left">

<!-- Container Selector -->

<telerik:RadToolTip ID="ttContainer" runat="server" Skin="Office2007" Animation="FlyIn" IsClientID="true" Position="TopCenter" TargetControlID="imgContainer">

<asp:Image ID="ttContainerImage" runat="server" style="width:400px;"/>

</telerik:RadToolTip>

<asp:Image ID="imgContainer" runat="server" Width="150px"/>

<br />

<asp:LinkButton ID="btnSelectContainer" runat="server" OnClientClick="OpenWizard('container');return false;"

CausesValidation="true">

<img style="border:0px;vertical-align:middle;" alt="Select Container"

src='<%=TeacherCanvas.Common.PathProviders.PathProvider.GetAdminIconPath()%>/paintbrush.gif' />

Change Container

</asp:LinkButton>

</td>

</tr>

<tr>

<td valign="top" align="left">Header Image:</td>

<td valign="top" align="left">

<asp:Image ID="imgHeader" runat="server" AlternateText="Skin Header Image" />

</td>

</tr>

<tr>

<td valign="top" align="left"></td>

<td valign="top" align="left">

<br /><br />

<!-- Update Buttons -->

<asp:LinkButton Style="vertical-align: bottom"

ID="btnUpdate" runat="server"

CausesValidation="true" OnClick="btnUpdate_Click">

<img style="border:0px;vertical-align:middle;" alt="Save Changes"

src='<%=TeacherCanvas.Common.PathProviders.PathProvider.GetAdminIconPath()%>/Update.gif' />Save Canvas

</asp:LinkButton>&nbsp;&nbsp;

<asp:LinkButton Style="vertical-align: bottom"

ID="btnCancel" runat="server"

CausesValidation="true" OnClientClick="javascript:return CancelEdit();" OnClick="btnCancel_Click">

<img style="border:0px;vertical-align:middle;" alt="Cancel Edits"

src='<%=TeacherCanvas.Common.PathProviders.PathProvider.GetAdminIconPath()%>/Cancel.gif' />Cancel

</asp:LinkButton>

</td>

</tr>

</table>

</asp:Panel>

<div style="display:none;">

<asp:LinkButton ID="btnSkinSelected" runat="server" OnClick="btnSkinSelected_Click">Select Skin</asp:LinkButton>

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" HorizontalAlign="Center">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0px;" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1"

OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="radScriptBlock1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="radScriptBlock1" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="panContent" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="panContent">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="panContent" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

<ClientEvents OnResponseEnd="SetRadWindowProperties();" />

</telerik:RadAjaxManager>

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="Vista" DestroyOnClose="true" Behaviors="Default" InitialBehavior="Maximize" Modal="true" KeepInScreenBounds="true" VisibleStatusbar="false">

<Windows>

<telerik:RadWindow ID="GeneralForm" runat="server"></telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

</div>

</form>

</

body>

Server Code:

public

partial class CanvasEditor : System.Web.UI.Page

{

protected ActionEnum PageAction

{

get

{

return (ActionEnum)Enum.Parse(typeof(ActionEnum), Request.QueryString["Action"].ToString(), true);

}

}

private int _teacherID = 0;

private int TeacherID

{

get

{

if (_teacherID == 0)

{

_teacherID =

int.Parse(Session["TeacherID"].ToString());

}

return _teacherID;

}

}

public Guid SkinID

{

get

{

return (Guid)ViewState["SkinID"];

}

set

{

ViewState[

"SkinID"] = value;

}

}

public bool SkinChanged

{

get

{

return bool.Parse(ViewState["SkinChanged"].ToString());

}

set

{

ViewState[

"SkinChanged"] = value;

}

}

public bool SkinContainerChanged

{

get

{

return bool.Parse(ViewState["SkinContainerChanged"].ToString());

}

set

{

ViewState[

"SkinContainerChanged"] = value;

}

}

private int _canvasID = 0;

private int CanvasID

{

get

{

if (_canvasID == 0)

{

_canvasID =

int.Parse(Request.QueryString["CanvasID"].ToString());

}

return _canvasID;

}

}

public string IsFromTreeView

{

get

{

if (Request.QueryString["IsFromTree"] == null)

{

return "false";

}

return "true";

}

}

public string GetSkinWizardURL()

{

return string.Format("{0}Wizards/Skin/SkinWizard.aspx",

PathProvider.GetAbsolueAdminPath());

}

public string GetContainerWizardURL()

{

return string.Format("{0}Wizards/Skin/ContainerSelector.aspx?SkinID={1}&Action=ContainerOnly",

PathProvider.GetAbsolueAdminPath(),

this.SkinID.ToString());

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

if (PageAction == ActionEnum.Add)

{

//get the default skin

IPredicateExpression filter = new PredicateExpression();

filter.Add(

PredicateFactory.CompareValue(TeacherPortalFieldIndex.TeacherId, ComparisonOperator.Equal, this.TeacherID));

filter.Add(

PredicateFactory.CompareValue(TeacherPortalFieldIndex.IsParentPortal, ComparisonOperator.Equal, true));

TeacherPortalCollection col = new TeacherPortalCollection();

col.GetMulti(filter);

//now set the defaults

this.setupSkins(col[0]);

}

else

{

//edit

TeacherPortalEntity tpe = new TeacherPortalEntity(this.TeacherID, this.CanvasID);

this.txtCanvasName.Text = tpe.Name;

this.txtTitle.Text = tpe.Title;

this.setupSkins(tpe);

}

}

}

private void setupSkins(TeacherPortalEntity tpe)

{

this.SkinID = tpe.SkinId;

this.imgSkin.ImageUrl = tpe.Skin.IconImagePath;

this.imgContainer.ImageUrl = tpe.SkinContainer.IconImagePath;

((

Image)this.ttSkin.FindControl("ttSkinImage")).ImageUrl = tpe.Skin.ImagePath;

((

Image)this.ttContainer.FindControl("ttContainerImage")).ImageUrl = tpe.SkinContainer.IconImagePath;

this.imgHeader.ImageUrl = string.Format("http://localhost/teachercanvas/Portals/{1}/{2}",

PathProvider.GetAbsolueAdminPath(),

tpe.PortalId.ToString(),

tpe.Files.FileName);

}

private bool validate()

{

if (this.txtCanvasName.Text.Trim().Length == 0)

{

this.lblError.Text = "You must provide a name for your Canvas";

}

return false;

}

protected void btnUpdate_Click(object sender, EventArgs e)

{

//Update clicked

if (validate())

{

}

}

private void rebindSkin()

{

if (Session["SelectedSkinID"] != null)

{

this.SkinID = (Guid)Session["SelectedSkinID"];

this.SkinChanged = true;

SkinEntity se = new SkinEntity((Guid)Session["SelectedSkinID"]);

this.imgSkin.ImageUrl = se.IconImagePath;

((

Image)this.ttSkin.FindControl("ttSkinImage")).ImageUrl = se.ImagePath;

//Temp, update the skins

}

if (Session["SelectedSkinContainerID"] != null)

{

this.SkinContainerChanged = true;

SkinContainerEntity sce = new SkinContainerEntity((Guid)Session["SelectedSkinContainerID"]);

this.imgContainer.ImageUrl = sce.IconImagePath;

((

Image)this.ttContainer.FindControl("ttContainerImage")).ImageUrl = sce.IconImagePath;

}

}

private void rebindContainer()

{

if (Session["SelectedSkinContainerID"] != null)

{

this.SkinContainerChanged = true;

SkinContainerEntity sce = new SkinContainerEntity((Guid)Session["SelectedSkinContainerID"]);

this.imgContainer.ImageUrl = sce.IconImagePath;

((

Image)this.ttContainer.FindControl("ttContainerImage")).ImageUrl = sce.IconImagePath;

}

}

protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

{

//looking for an argument

if (e.Argument == "skin")

{

//changed skin

this.rebindSkin();

}

else

{

//changed container

this.rebindContainer();

}

this.RadAjaxManager1.ResponseScripts.Add(string.Format("urlcontainer='{0}Wizards/Skin/ContainerSelector.aspx?SkinID={1}&Action=ContainerOnly'",

PathProvider.GetAbsolueAdminPath(),

this.SkinID.ToString()));

}

protected void btnCancel_Click(object sender, EventArgs e)

{

//Rebind the control;

}

protected void btnSkinSelected_Click(object sender, EventArgs e)

{

//doing this causes no javascript error, but the ajax call does...?

if (this.hdAction.Value != null && this.hdAction.Value.Trim().Length > 0)

{

if (this.hdAction.Value.Trim() == "skin")

{

//changed skin

this.rebindSkin();

}

else

{

//changed container

this.rebindContainer();

}

this.Page.ClientScript.RegisterStartupScript(typeof(string), "setContainerURL", string.Format("<script>urlcontainer='{0}Wizards/Skin/ContainerSelector.aspx?SkinID={1}&Action=ContainerOnly';</script>",

PathProvider.GetAbsolueAdminPath(),

this.SkinID.ToString()));

}

}

}

0
Maria Ilieva
Telerik team
answered on 04 Aug 2008, 06:14 AM
Hi Julie T Back,

I reviewed your code but was not able to found obvious reason for the problem you are facing. Will it be convenient for you to open a regular support ticket and send us sample runnable project which represents the problem. We will test it locally and advise you further.

All the best,
Maria Ilieva
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
General Discussions
Asked by
Julie T Back
Top achievements
Rank 1
Answers by
Julie T Back
Top achievements
Rank 1
Maria Ilieva
Telerik team
Share this question
or