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
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
0
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:
Regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
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.