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

RadWindow Positioning Issues

13 Answers 164 Views

Window

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

Thiago asked on 23 Nov 2010, 08:23 PM

img3.png

img2.png

img1.png

Hi,

I am developing a report screen for internal use on my company and I need to have the RadWindow functionality enabled, however I ran into an issue with positioning. I've searched a lot about it but couldn't find a solution for the issue.

For the record, I'm using VS2010, Framework 4.0, Windows 7, Telerik RadControls for ASP.NET AJAX Q1 2010 SP1.

I'm calling the rad window through radopen on client-site as you can see below (some parts of the script have been removed):

var ReportHandler = function () {

var lnkExportToExcel;

// other implementation

var GetQueryString = function () {

// other implementation

};

var lnkExportToExcel_Click = function (event) {

window.radopen("ExportOptions.aspx?" + GetQueryString(), "wndExportOptions");

return false;

};

var EndRequestHandler = function () {

InitializeReportHandler();

// other implementation

};

var InitializeReportHandler = function () {

lnkExportToExcel = $("#lnkExportToExcel");

lnkExportToExcel.bind("click", null, lnkExportToExcel_Click);

// other implementation

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

};

this.Start = function () {

InitializeReportHandler();

};

}

$(function () {

new ReportHandler().Start();

});

This is the markup of the content page which uses the script:

[...]

<asp:Content ID="theBody" ContentPlaceHolderID="MainContent" runat="server">

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

<asp:ScriptManager ID="transactionStatisticsScriptManager" runat="server" />

<telerik:RadWindowManager ID="tsWindowManager" Overlay="true" runat="server" Behaviors="Move,Close">

<Windows>

<telerik:RadWindow ID="wndExportOptions" runat="server" Modal="true" Overlay="true" IconUrl="/images/procom.png" Title="Export Options" VisibleStatusbar="false" Height="210px" Width="300px" ShowContentDuringLoad="false">

</telerik:RadWindow>

<telerik:RadWindow ID="wndViewDetails" runat="server" Modal="true" Overlay="true" IconUrl="/images/procom.png" Title="View Details" VisibleStatusbar="false" Height="450px" Width="900px" ShowContentDuringLoad="false">

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

<asp:UpdatePanel ID="transactionStatisticsUpdatePanel" runat="server">

</ContentTemplate>

[...]

<telerik:RadGrid ID="grdSearchResults" Width="968px" runat="server" [...Other definitions...]>

<MasterTableView EnableNoRecordsTemplate="true" CommandItemDisplay="Top">

<CommandItemTemplate>

<a id="lnkExportToExcel" href="#">

<img src="images/excel.gif"

width="22px"

height="22px"

border="0px"

alt="<%= GetGlobalResourceObject("TransactionStatistics", "ExportToExcelAlt").ToString() %>"

title="<%= GetGlobalResourceObject("TransactionStatistics", "ExportToExcelAlt").ToString() %>"/>

</a>

</CommandItemTemplate>

[...Rest of the Grid...]

[...]

</ContentTemplate>

</asp:UpdatePanel>

<script src="scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="scripts/ReportHandler.dev.js" type="text/javascript"></script>

</form>

</asp:Content>

The rad window is being displayed when I click the excel image defined on the CommandItemTemplate section, however, it does not display it on the correct position. I haven't modified anything regarding the position of the window either through markup or css; I was expecting it to be centralized by default.

What happens is that it opens a bit past the center torwards the right side of the page. I can see that the overlay is also being displayed with a huge space (some sort of margin/padding or whatever) from the left side of the browser window, as if it was starting form the actual content page and not from the entire page (which is a merge from master page and content) so I would assume it does not support master page, but I hope is not the case.

Another very annoying issue I'm having is that when I close the RadWindow, if I click the button again, it opens even more on the right, and it happens subsequently until it's completely off the screen. The horizontal scroll bar has a lot more space to be rolled torwards the left and it increases every time I open one of these windows.

Also, if I try to drag the window around, it makes the horizontal scroll bar go nuts and gets even larger. As soon as I drop the window on the position I want, it moves itself to the right, completely going off the screen.

Please see the attached images to have an idea of what's happening on the UI.

img1.png shows the screen before I click the export to excel icon;
img2.png shows the screen when I click the export to excel icon for the first time;
img3.png shows the screen when I click the export to excel icon for the second time.

I haven't added more images, but the behaviour is the same, it keeps going torwards the right until it's completely off the screen and the scroll bar gets huge.

I really need some help with this guys.

Thanks

Update: It seems to have a normal behavior when I run the app using a one-monitor computer with small screen resolution (1024x768). The screenshots I sent previously where from a two-monitor computer on a 1920x1080 screen resolution. I have added an attachment (problem with safari, had to add attachment on other post of this same thread) which shows the expected behavior.

13 Answers, 1 is accepted

answered on 25 Nov 2010, 04:10 PM

Hi Thiago,

The code that you posted looks OK and at this point I could only suggest to make sure that you are using XHTML - compliant doctype on the page where the RadWindow is
e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If this doesn't help, please try isolating the problem in a separate project - this blog post will help you in this task. We don't need your real database, a simple "dummy" one will do the trick. There is a link in the blog post to a code library where you can get such database as well.
Once you have the problem isolated, please send it to us and we will check it right away.

Kind regards,
Georgi Tunev
the Telerik team

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 01 Dec 2010, 03:22 PM

Hello Thiago,

I checked your project and I found the reason for the problem. It comes from the #MainContainer selector in your global CSS that has position:relative:

#MainContainer {

position: relative;

margin: 0 auto;

height:auto;

height: 100%;

min-height:100%;

width:1010px;

}

If you remove that property, RadWindow will be shown and behave as expected. I am not sure why you need that property in the selector though - I checked the application with one of our frontend-ers but we were not able to see why you would need position:relative in that case.

Regards,
Georgi Tunev
the Telerik team