CODEWITHSUNDEEP
javascriptasp.netmodal-dialog
MF Luder
MF Luder

Reputation: 379

ASP.NET - How to Dynamically Size Javascript Modal Window

I have an ASP.net page with a button that creates a modal window onclick:

Dim sURL As String = System.Configuration.ConfigurationManager.AppSettings("APP_Path") & "Detail.aspx"
btnDone.Attributes.Add("onclick", "javascript:window.showModalDialog('" & sURL & "',null,'status:no;dialogWidth:auto;dialogHeight:auto;dialogHide:true;help:no;scroll:yes;center:yes');return false;")

I am not using jQuery. This is launching an entirely new .aspx page, not a new layer in the current page.

The data in the modal window is a datagrid bound to a datatable. It can contain 5 lines to 50 lines - there is no way to know until runtime, when the datatable is created and bound.

<asp:DataGrid ID="grdHeader" runat="server" Width="100%" CssClass="grdGrid"
Font-Size="12px" Allowpaging="false" GridLines="None" AutoGenerateColumns="true"
Font-Names="Verdana" CellPadding="0" ShowHeader="false"></asp:DataGrid>

Code behind:

Dim dvHeader as DataView
Dim dtHeader as DataTable

dvHeader = dtHeader.DefaultView
grdHeader.DataSource = dvHeader
grdHeader.DataBind()

I would like for the modal window to size to the data being displayed, without scroll bars. I'm sure I can do this via Javascript, but Javascript is really not my strong suit.

Any help would be much appreciated!

Upvotes: 1

Views: 1505

Answers (1)

Geneb
Geneb

Reputation: 417

Add an onload event to the body of the popup window and have it call the following function:

function resizeWindow()
{
    var containerElement = document.getElementById('<%=grdHeader.ClientID%>');
    window.resizeTo(containerElement.offsetWidth, containerElement.offsetHeight);
}

Unfortunately offsetHeight doesn't take into account the height of elements in the browser (such as bookmark bars, url bars, etc.) so you do need to add some concrete amount to make sure all of the data is displayed. I think this might be the only way you can do what you hope to do, though, short of estimating the height of the window based on the number of rows in your data source (i.e. 25 rows x 25 pixels per row = 625 pixels)

Edit: Just a note, you are using showModalDialog to essentially open a new window. The above function will not work unless you use window.open(...) to open the window, which would be the best option anyway since you aren't actually making a true modal dialog.

Upvotes: 1

Related Questions