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

Grid Height And Width Is Not Getting Reduce According To Window Size

1 Answer 240 Views

Grid

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

SP asked on 13 Jan 2009, 11:36 AM

Hi there,

i am working on telerik. I want the height and width of my grid should reduce according to window size. For this i am using one java script. This javascript is working for IE and opera,but not working for mozilla. Means, i want to say that by using javascript my grid height and width is getting reduce for IE and opera, but when i will come to Mozilla the height and width is not getting reduce. The javascript coding i am using is:
<script type="text/javascript">
             window.onresize = reSize;
             function reSize()
             {
               grid = document.getElementById('<%=rgCustomer.ClientID %>');
               h = 0;
               if(!window.innerWidth)
               {
               if(!(document.documentElement.clientWidth == 0))
               {
                   w = document.documentElement.clientWidth;
                  h = document.documentElement.clientHeight;
              }
              else
              {
                  w = document.body.clientWidth;
                  h = document.body.clientHeight;
              }
           }
           else
           {
               w = window.innerWidth-20;
               h = window.innerHeight-50;
           }

           if(h-185 > 120)
           {
               grid.style.height = h-185;
           }
           else
           {
               gridhgt = 15+(grid.getRowCount()*grid.getRowHeight())+grid.getHeaderHeight();
               if(120>gridhgt)
               {
                   if(gridhgt<75 && grid.getRowCount()>=1)
                       grid.setStyle("height", 75);
                   else if(gridhgt<75)
                       grid.setStyle("height", 57);
               }
                 else
                 {
                   grid.style.height = 120;
                 }
           }
           if(w-40 > 100)
           {
               grid.style.width = w-40;
           }
           else
           {
                grid.style.width = 100;
           }
             };
            </script>

Can anybody help me to come out of this problem.

Regards.
Vimal Kumar Srivastava
Madhepura,Bihar

1 Answer, 1 is accepted

answered on 13 Jan 2009, 04:49 PM

Hello SP,

When you set width and height styles with Javascript, you must also include the measure unit, e.g:

grid.style.height = h-185 + "px";

By the way, I have the feeling that you are doing things the harder way. Please review the following example and see whether you can optimize your resizing scripts:

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <script runat="server"> 
        
                protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 5; 
        
                    int rowsNum = 400; 
        
                    string colName = "Column"; 
        
                    for (int j = 1; j <= colsNum; j++) 
        
                    { 
        
                        dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        
                    } 
        
                    for (int i = 1; i <= rowsNum; i++) 
        
                    { 
        
                        dr = dt.NewRow(); 
        
                        for (int k = 1; k <= colsNum; k++) 
        
                        { 
        
                            dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
        
                        } 
        
                        dt.Rows.Add(dr); 
        
                    } 
        
                    (sender as RadGrid).DataSource = dt; 
        
                } 
        
            </script> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
            <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
        
            <title>RadControls for ASP.NET AJAX</title> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <p>Set width and height and click on the button:</p> 
        
            Width (1 - 1000): 
        
            <telerik:RadNumericTextBox 
        
                ID="RadNumericTextBox1" 
        
                runat="server" 
        
                MinValue="1" 
        
                MaxValue="1000" 
        
                Value="800" 
        
                NumberFormat-DecimalDigits="0" /> 
        
            <br /><br /> 
        
            Height (1 - 1000): 
        
            <telerik:RadNumericTextBox 
        
                ID="RadNumericTextBox2" 
        
                runat="server" 
        
                MinValue="1" 
        
                MaxValue="1000" 
        
                Value="300" 
        
                NumberFormat-DecimalDigits="0" /> 
        
            <br /><br /> 
        
            <asp:Button ID="Button1" runat="server" Text="Resize RadGrid" OnClientClick="ResizeRadGrid();return false;" /> 
        
            <script type="text/javascript"> 
        
            function ResizeRadGrid() 
        
            { 
        
                var gridObject = $find("<%= RadGrid1.ClientID %>"); 
        
                var gridElement = gridObject.get_element(); 
        
                var newWidth = $find("<%= RadNumericTextBox1.ClientID %>").get_value(); 
        
                var newHeight = $find("<%= RadNumericTextBox2.ClientID %>").get_value(); 
        
                gridElement.style.width = newWidth + "px"; 
        
                gridElement.style.height = newHeight + "px"; 
        
                gridObject.repaint(); 
        
            } 
        
            </script> 
        
            <br /><br /><br /> 
        
            <telerik:RadGrid 
        
                ID="RadGrid1" 
        
                runat="server" 
        
                Width="800px" 
        
                Height="300px" 
        
                AllowPaging="true" 
        
                PageSize="40" 
        
                OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                <MasterTableView TableLayout="Fixed" /> 
        
                <ClientSettings> 
        
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                </ClientSettings> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Regards,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.