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 207 Views
Grid
This is a migrated thread and some comments may be shown as answers.
SP
Top achievements
Rank 1
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

Sort by
0
Dimo
Telerik team
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.
Tags
Grid
Asked by
SP
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or