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

RadWindow - OffsetElementID not working

3 Answers 186 Views
Window
This is a migrated thread and some comments may be shown as answers.
Jinisha
Top achievements
Rank 1
Jinisha asked on 10 Dec 2012, 07:58 PM
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

3 Answers, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 11 Dec 2012, 01:18 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Jinisha
Top achievements
Rank 1
answered on 11 Dec 2012, 02:43 PM

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%;  
}
0
Marin Bratanov
Telerik team
answered on 13 Dec 2012, 01:37 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Window
Asked by
Jinisha
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Jinisha
Top achievements
Rank 1
Share this question
or