The C1ReportViewer control allows you to specify the Width and Height properties in percentages for flexible sizing. In this example you'll change a parent container's size using client script. The C1ReportViewer layout will adjust accordingly when the parent container size changes.

Complete the following steps:

1. In Source view, add a container around the <cc1:C1ReportViewer> markup so it appears like the following:                

   To write code in Source View

   <div id="parentContainerSample" style="width: 720px; height: 475px;">
              <cc1:C1ReportViewer runat="server" ID="C1ReportViewer1" Height="100%" Width="100%"          
              </cc1:C1ReportViewer>                
   </div>
   

   This parent container will be resized at run time.

2. Add the following markup just below the lightbox markup:        

   To write code in Source View

   <p>Change the parent container size:</p>         
   

   
   <ul>      
   

       
       <li><a href="javascript:changeParentSize(320, 240);">Change the parent size to 320x240px</a><br/>          
       </li>
   
       <li><a href="javascript:changeParentSize(600, 400);">Change the parent size to 600x400px</a><br/>      
       </li>
                   
       <li><a href="javascript:changeParentSize('100%', '475');">Change the parent size to 100% x
                   475px</a><br />                
       </li>
          
   </ul>
   

   This adds three links that will each resize the parent container to varying heights and widths.
3. Add the following markup just below the previous markup:        

   To write code in Source View

   <script language="javascript" type="text/javascript">
            
       function changeParentSize(w, h) {
           $("#parentContainerSample").width(w).height(h);  
           $("#<%=C1ReportViewer1.ClientID%>").c1reportviewer("refresh");                
       }
           
   </script>
   
   

   This script initializes the resizing links.

What You've Accomplished

Run the application and at run time click one of the links to resize the parent container containing the C1ReportViewer. Notice that the C1ReportViewer control resizes with the parent container.