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

RadWindow problem after Ajax call

2 Answers 218 Views

General Discussions

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

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:

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

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>

<div>

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

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

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

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>

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

<tr>

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

</td>

</tr>

<tr>

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

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

</telerik:RadTextBox>

</td>

</tr>

<tr>

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

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

</telerik:RadTextBox>

</td>

</tr>

<tr>

<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>

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

<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>

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

</td>

</tr>

<tr>

<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>  

<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>

<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">

<telerik:AjaxSetting AjaxControlID="radScriptBlock1">

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

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

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="panContent">

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

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

<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()));

}