RadWindow - OffsetElementID not working

[Jinisha]

RadWindow issue

I have a page with consists of two columns. In the right column I want to display a pdf when an image in a grid is clicked in the left column.

The problem is even though I use OffsetElementID="divDisplayPDFDocument" ...its not displaying the PDF Document underneath the div I created under the 2nd column.

It always show the pdf document at the top left corner of the page.

If I set it using SetOffSetElementById in the client side function it works the 1st time I click the image but the 2nd time again it shows the pdf at the top left corner of the page

function  ShowPDFDocument(title, url) {
 var oWnd = $find("<%= PDFDocument.ClientID %>");
 oWnd.set_title(title);
 oWnd.setUrl(url);
 oWnd.SetOffsetElementId('divDisplayPDFDocument');
 oWnd.show();
}

Please advice!!

Thanks in advance

[Marin Bratanov]

Hello Jinisha,

Do you have other code attached to the RadWindow that is related to its position? Also, can you confirm that the ID you pass is actually the Client ID of an existing HTML element on the page?

The OffsetElementID property is related to the first time the RadWindow is shown and thus it is best if it is set in the code-behind or markup. Once the popup is moved, closed and then shown again it retains the position at which it was closed, so the offset element ID will not be in effect. Thus, what I can suggest is that you move it so that it matches your requirements, e.g.:

<telerik:RadWindow ID="RadWindow1" runat="server">
</telerik:RadWindow>
<asp:Button ID="Button1" Text="open the RadWindow" OnClientClick="showRw(); return false;" runat="server" />
<div style="position:relative; width: 100%; border: 1px solid black;">
    <div id="divDisplayPDFDocument" style="border: 1px solid red; position: relative; left: 600px; width: 400px; height: 400px;"></div>
</div>
<script type="text/javascript">
    function showRw()
    {
        var oWnd = $find("<%=RadWindow1.ClientID %>");
        oWnd.show();
        var offsetElementBounds = $telerik.getBounds($get("divDisplayPDFDocument"));
        oWnd.moveTo(offsetElementBounds.x, offsetElementBounds.y);
    }
</script>

More on the method that is used to get the desired position is available in this article that lists the Telerik static client library.


All the best,
Marin Bratanov
the Telerik team

[Jinisha]

Hi Mark,

Thanks for the quick reply. The code you sent works in IE...but in Firefox...the 1st time I click the image button the RadWindow looks fine however, the second time the width increased to almost double the size...why is that? Also when I try to resize the browser...the 1st column gets resized. How can I display the RadWindow where the 2nd column div is in any browser? Here is the code I have so far.

<telerik:RadAjaxPanel>
<div ID="displayPDFDocument"/>
</telerik:RadAjaxPanel>
<telerik:RadWindow runat="server" OffsetElementID="divDisplayPDFDocument" ID="PDFDocument" Modal="false"   Behaviors="Default"
VisibleStatusbar="false" VisibleTitlebar="True" InitialBehaviors="Close, Resize">
</telerik:RadWindow>

          function ShowPDFDocument(title, url) {
                var oWnd = $find("<%= PDFDocument.ClientID %>");
                oWnd.set_title(title);
                oWnd.setUrl(url);
                oWnd.show();
                SetPDFSizenPosition(oWnd, null);
            }

            function SetPDFSizenPosition(sender, args) {
                var oWnd = $find("<%= PDFDocument.ClientID %>");
                if (oWnd.BrowserWindow.screen.availWidth > 0)
                    oWnd.set_width(oWnd.BrowserWindow.screen.availWidth - divDocuments.offsetWidth - 100);
                else
                    oWnd.set_width(500);
                var divDocumentsHeight = divDocuments.offsetHeight;
                if (divDocumentsHeight > 600)
                    oWnd.set_height(600);
                else if (divDocumentsHeight < 300)
                    oWnd.set_height(450);
                else
                    oWnd.set_height(divDocuments.offsetHeight);
                var offsetElementBounds = $telerik.getBounds($get("divDisplayPDFDocument"));
                oWnd.moveTo(offsetElementBounds.x, offsetElementBounds.y);

                //Force a window to render under its opener element
//                var target = $get(oWnd.get_offsetElementID());
//                oWnd.MoveTo(target.offsetLeft, target.offsetTop)
            }


#divDisplayPDFDocument
{
    float: left;
    width: auto;
    position: relative;
    min-width: 350px;
    max-width: 45%;
}

[Marin Bratanov]

Hi Jinisha,

In my previous post I explained how the OffsetElement works and thus if you want it used every time you should use JavaScript and remove it from the RadWindow declaration, as in my sample.

Another issue I see with your script is that the divDocuments variable is not defined in the function. I advise that you debug your function and see why your code returns undesired values that you set to the RadWindow.

On the size of your columns - what I see from your CSS snippet is dynamic width with a maximal value set in percent. This means that depending on the entire page layout the browser resize may affect that element as well. How you layout your page and what dimensions you set to it is a task the developer should take care of, depending on the project's needs and limitations.


Kind regards,
Marin Bratanov
the Telerik team