Welcome Guest Search | Active Topics | Sign In | Register

Essential Objects Product Support Forum » All Products » Support » Working with the Dialog Control

Working with the Dialog Control Options
Previous Topic · Next Topic
Padishar
Posted: Wednesday, July 18, 2007 7:49:54 AM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
Greetings,
I am investigating the use of your dialog control, and am wondering how to properly handle the sizing of the dialog container itself when using a stand-alone page as the content (i.e. ContentURL="somepage.aspx"). I am aware of the Min/Max Hight/Width attributes of the class which limit the resize minimum and maximum boundaries. However, I would prefer not to allow the users the capability of resizing and have the dialog render itself sized appropriately for the content as referenced by the URL.
The design theory is, that we utilize a dialog control (packaged under a site control that maintains the same look-&-feel) for a multitude of stand alone form pages that generate resultant output for the user. Each form can be and usually is different in size. So here's the issue at hand:

How do I ensure the dialog control dynamically determines it's size depending on the size of the content, when using the ContentURL property?
Back to top
 
eo_support
Posted: Wednesday, July 18, 2007 8:18:15 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Hi Padishar,

I do not see an easy solution for this. The dialog does automatically resize to fit the contents when the content is not in a separate frame, however when you use ContentUrl, the Url is actually rendered in a separate iframe. Since the iframe's size and the iframe's content page's size are independent, so the iframe itself does not automatically resize to fit the content page.

One possible solution is to use some javascript to automatically resize the iframe. In order to do this you will first need to clear ContentUrl and use ContentTemplate:

Code: HTML/ASPX 
<ContentTemplate>
    <iframe id="dlg_frame" src="somepage.aspx" />
</ContentTemplate>


This way it exposes the iframe so that you will be able to access it via javascript.

The next step would be adjusting the iframe's size. If you know the size, then its very easy. You can put the following function in the page and then call it appropriately:

Code: JavaScript 
function adjust_dialog_size(w, h)
{
    var dlg_frame = document.getElementById("dlg_frame");
    dlg_frame.style.width = w.toString() + "px";
    dlg_frame.style.height = h.toString() + "px";
}


If you want to automatically adjust the size, you will need to figure out the size of the content page and then call this function. How to get the content page size various depending on the type of the browsers and whether the page is in quirk mode or not. Usually you should be able to do:

Code: JavaScript 
function adjust_parent_dialog_size()
{
    var w = document.body.clientWidth;
    var h = document.body.clientHeight;
    parent.adjust_dialog_size(w, h);
}


This function will be inside your content page and you can call this function from the onload event of the content page's body element.

Putting all these together should give you something close to what you had in mind.

Thanks
Back to top
 
Padishar
Posted: Wednesday, July 18, 2007 2:40:50 PM

Rank: Newbie
Groups: Member

Joined: 7/18/2007
Posts: 8
Thank you,
That approach was right on the money with a small client/server namespace issue that had to be resolved and the size post-rendering in the iframe. I am sure there may be a couple ways around this. But the solution derived from your guidence will be quite adaquate for now.

First, the ContentTemplate's iframe needed to be ran server-side so that the "src" attribute could be dynamically set. Therefore the resultant ContentTemplate's markup code is as follows:

Code: HTML/ASPX 
<ContentTemplate>
    <iframe id="dlg_frame" runat="server" frameborder="0"></iframe>
</ContentTemplate>

Naturally, since that control in the template executes on the server's side, the exposure to iframe ends up being nested in the ASP.NET namespacing convention. And as a result the client-side script on the dialog page that actually adjusts the frame needed to be generated dynamically at the page's server-side load event, like so: (note the ID for the dialog used within the control is "ReportOptionsDialog" and observe setting the "src" attribute)

Code: Visual Basic.NET 
'...class instantiation
Private _ReportForm As String = "login.aspx"
'...page event region
Protected Sub Page_Load(ByVal sender As Object, _
                        ByVal e As System.EventArgs) _
                        Handles Me.Load
    'some code before hand...
    Dim crtl As Web.UI.HtmlGenericControl = _
        Me.ReportOptionsDialog.ContentContainer.FindControl("dlg_frame")
    ctrl.Attributes.Add("src", _ReportForm)
    Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), _
            "Adjust-Dialog-Size-Function", _
            "<script type='text/javascript'>" & vbCrLf & _
                "function adjust_dialog_size(w, h) {" & vbCrLf & _
                    "var dlg_frame = document.getElementById('" & ctrl.ClientID & "');" & vbCrLf & _
                    "dlg_frame.style.width = w.toString() + 'px';" & vbCrLf & _
                    "dlg_frame.style.height = h.toString() + 'px';" & vbCrLf & _
                "}" & vbCrLf & _
            "</script>")
    'some more code to finish the handler up...
End Sub

Lastly, when attempting to determine the frame's size post-rendering, I remembered that a similar issue will apply, when generating the frame contents on the server side. And noticed that the client-page's javascript resulted in height & width attributes of zero. But all was not a loss. We already have implanted the client script into the control page. and therefore, all that had to be done was call that parent function in the onload of the content page. like so...

Code: HTML/ASPX 
<body onload="parent.adjust_dialog_size('280','180');">

So, that did the trick for now... I was hoping for something a little more dynamic, but all is not a loss. Especially considering, with this hurdle overcome, the control class (that contains the site-formatted dialog control) can be set aside, and the content pages retain the data for the frame they will be rendered in (even though it is static, it is still by design, in it's proper place).

Thank you pleanty for the insite & expertise...
Back to top
 
eo_support
Posted: Wednesday, July 18, 2007 3:00:18 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,194
Wow! That made it complete! Thanks for the update and please feel free to let us know if you have any other questions.
Back to top
 


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.