Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 210
  • Last Modified:

Open a auto sizeable window

I've got a page with an ASP datagrid on it that currently opens in a pop-up using a script.
What I want to do is size this window based on the size of the datagrid. I've been able to do this
with images in the past, but i haven't been able to get the code to work for the datagrid.
How would I do this?


TIA
0
Mike Miller
Asked:
Mike Miller
1 Solution
 
Mike MillerSoftware EngineerAuthor Commented:
that looks like a great way to open a 400 x 400 window. can you answer my question?
0
 
system_downCommented:
<html>
<head>
<script type="text/javascript">

function open_win(h,w)
{
window.open("http://www.w3schools.com","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width="+w+", height="+h+")
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win("+datagrid.height+","+datagrid.width+")">
</form>
</body>

</html>

0
 
RozanaZCommented:
Ok, if you have dynamic datagrid dimensions:

<html>
<head>
<script type="text/javascript">
function open_win()
{
  winObj = window.open("2.html","_blank","toolbar=yes, location=yes, directories=no, status=no, menubar=yes, scrollbars=yes, resizable=no, copyhistory=yes, width=400, height=400");
  winWidth = winObj.document.getElementById("test1").width;
  winHeight = winObj.document.getElementById("test1").height;
  winObj.resizeTo(winWidth,winHeight);
}
</script>
</head>

<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>

</html>


Where 'test1' is id of your datagrid.
0
 
gops1Commented:
Here is sample script which you can try out:
 
Code for the Parent Window:
==================

<html>
      <head>
            <title>Script Demo</title>
            <script language="JavaScript">
                  function openWin(){
                        var child=window.open("Q_22058597-child.html","_blank","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=no, copyhistory=yes");
                  }
            </script>
      </head>
<body>
      <a href="#" onclick="openWin();return false;">Open Child</a>
</body>
</html>



Code for the Child:
============

<html>
      <head>
            <title>Script Demo</title>
            <style>
                  body{
                        margin:0;
                  }
            </style>
            <script language="JavaScript">
                  function getWinResized(){
                        var dataObj=document.getElementById('childData');
                        var ht=dataObj.offsetHeight+40;
                        var wd=dataObj.offsetWidth+35;
                        window.resizeTo(wd,ht);
                  }
            </script>
      </head>
<body onload="getWinResized()">
      <table cellpadding="0" cellspacing="10" border="0" id="childData">
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
            <tr>
                  <td>col1</td>
                  <td>col2</td>
                  <td>col3</td>
            </tr>
      </table>
</body>
</html>

=================================

Experiment it by adding more rows to the table inside child window.
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now