LBGUC04
asked on
GetelementById javascript Gridview Label
Hi all,
I have the below code which is a good example of changing the font size to fit the window and adjusts as the window size is changed however i cant get it to work on a label inside a gridview.
I have googled this and kept finding this piece of code but this just throws an error.
var myHeight = pageHeight();
var controlId = '<%= ((Label)GridMain.FindContr ol("lblGro upName")). ClientID %>';
How can i get this to work?
Code example
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<script type="text/javascript">
function pageHeight()
{
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.c lientHeigh t ? document.documentElement.c lientHeigh t : document.body != null? document.body.clientHeight : null;
}
function SizeMe() {
var myHeight=pageHeight();
document.getElementById('a 10').style .fontSize= myHeight * 0.1 + 'px';
document.getElementById('a 15').style .fontSize= myHeight * 0.15 + 'px';
document.getElementById('a 20').style .fontSize= myHeight * 0.2 + 'px';
document.getElementById('a 30').style .fontSize= myHeight * 0.3 + 'px';
}
</script>
</head>
<body onLoad="SizeMe();" onResize="SizeMe();">
<div id="body-content">
<div id="a10">10% Text</div>
<div id="a15">15% Text</div>
<div id="a20">20% Text</div>
<div id="a30">30% Text</div>
</div>
</body>
</html>
I have the below code which is a good example of changing the font size to fit the window and adjusts as the window size is changed however i cant get it to work on a label inside a gridview.
I have googled this and kept finding this piece of code but this just throws an error.
var myHeight = pageHeight();
var controlId = '<%= ((Label)GridMain.FindContr
How can i get this to work?
Code example
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Document</title>
<script type="text/javascript">
function pageHeight()
{
return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.c
}
function SizeMe() {
var myHeight=pageHeight();
document.getElementById('a
document.getElementById('a
document.getElementById('a
document.getElementById('a
}
</script>
</head>
<body onLoad="SizeMe();" onResize="SizeMe();">
<div id="body-content">
<div id="a10">10% Text</div>
<div id="a15">15% Text</div>
<div id="a20">20% Text</div>
<div id="a30">30% Text</div>
</div>
</body>
</html>
ASKER
I have pasted my page below but this is the error i get. If i change to a label outside of the gridview it works but its the label in the item templte i want to reference
Microsoft JScript runtime error: Object required
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACD.aspx.cs" Inherits="ACD" %>
<!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 id="Head1" runat="server">
<title>ACD Statictics</title>
<link href="css/1024x768.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function pageHeight() {
return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.c lientHeigh t ? document.documentElement.c lientHeigh t : document.body != null ? document.body.clientHeight : null;
}
function SizeMe() {
var myHeight = pageHeight();
document.getElementById('l blGroupNam e').style. fontSize = myHeight * 0.1 + 'px';
}
</script>
</head>
<body style="margin: 0px" onload="SizeMe();" onResize="SizeMe();">
<form id="form1" runat="server">
<div>
<asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />
<asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
</Triggers>
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeOut="600" >
</asp:ScriptManager>
<div id="body-content" height="95%">
<asp:GridView ID="GridMain" runat="server"
AutoGenerateColumns="False "
GridLines="Horizontal"
onrowcreated="GridMain_Row Created"
cssclass="mGrid"
AlternatingRowStyle-cssCla ss="alt"
RowStyle-cssclass="row"
Headerstyle-cssclass="head ">
<Columns>
<asp:TemplateField itemstyle-HorizontalAlign= "Left">
<HeaderTemplate>
<asp:Label id="HdArea" class="HdArea" runat="server" Text="Area"></asp:Label>
<asp:Label id="hdCallsQ" class="hdCallsQ" runat="server" Text="Calls Q"></asp:Label>
<asp:Label id="hdLongWait" class="hdLongWait" runat="server" Text="Long Wait"></asp:Label>
<asp:Label id="hdLogIn" class="hdLogIn" runat="server" Text="Log In"></asp:Label>
<asp:Label id="hdAvail" class="hdAvail" runat="server" Text="Avail"></asp:Label>
<asp:Label id="hdCalls" class="hdCalls" runat="server" Text="Calls"></asp:Label>
<asp:Label id="hdLCR" class="hdLCR" runat="server" Text="LCR%"></asp:Label>
<asp:Label id="hdGOS" class="hdGOS" runat="server" Text="GOS%"></asp:Label>
<asp:Label id="hdHours" class="hdHours" runat="server" Text="Hours"></asp:Label>
<asp:Label id="hdAHT" class="hdAHT" runat="server" Text="AHT"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblGroupName" runat="server" Text='<%# Eval("groupname") %>'></asp:Label>
<asp:Label ID="lblCallQ" class="DataCallsQ" runat="server" Text='<%# Eval("call_in_queue") %>'></asp:Label>
<asp:Label ID="lblLongWait" class="DataLongWait" runat="server" Text='<%# Eval("long_wait") %>'></asp:Label>
<asp:Label ID="lblLogIn" class="DataLogin" runat="server" Text='<%# Eval("Logged_in") %>'></asp:Label>
<asp:Label ID="lblAvail" class="DataAvail" runat="server" Text='<%# Eval("agents_avail") %>'></asp:Label>
<asp:Label ID="lblOffered" class="DataOffered" runat="server" Text='<%# Eval("offered","{0:n0}") %>'></asp:Label>
<asp:Label ID="lblLCR" class="DataLCR" runat="server" Text='<%# Eval("LCR","{0:n1}") %>'></asp:Label>
<asp:Label ID="lblGOS" class="DataGOS" runat="server" Text='<%# Eval("GOS","{0:n0}") %>'></asp:Label>
<asp:Label ID="lblHrs" class="DataHours" runat="server" Text='<%# Eval("Hours","{0:n0}") %>' Width="8%"></asp:Label>
<asp:Label ID="lblAHT" class="DataAHT" runat="server" Text='<%# Eval("AHT") %>'></asp:Label>
</ItemTemplate>
<ItemStyle horizontalalign="Left" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div style="top: 750px; position: absolute; left: 5px;"><asp:Label ID="lblACDDate" runat="server" Font-Names="Verdana" Text="Label"></asp:Label>< /div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<%--Div to display any errors--%>
<div runat="server" id="divError"
style="position:absolute; top:200px; left:100px; height:240px; background-color:White; font-size: small; font-family: Verdana; color: #FF0000;">
</div>
</form>
</body>
</html>
Microsoft JScript runtime error: Object required
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ACD.aspx.cs" Inherits="ACD" %>
<!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 id="Head1" runat="server">
<title>ACD Statictics</title>
<link href="css/1024x768.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function pageHeight() {
return window.innerHeight != null ? window.innerHeight : document.documentElement && document.documentElement.c
}
function SizeMe() {
var myHeight = pageHeight();
document.getElementById('l
}
</script>
</head>
<body style="margin: 0px" onload="SizeMe();" onResize="SizeMe();">
<form id="form1" runat="server">
<div>
<asp:Timer runat="server" id="UpdateTimer" interval="5000" ontick="UpdateTimer_Tick" />
<asp:UpdatePanel runat="server" id="TimedPanel" updatemode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger controlid="UpdateTimer" eventname="Tick" />
</Triggers>
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeOut="600"
</asp:ScriptManager>
<div id="body-content" height="95%">
<asp:GridView ID="GridMain" runat="server"
AutoGenerateColumns="False
GridLines="Horizontal"
onrowcreated="GridMain_Row
cssclass="mGrid"
AlternatingRowStyle-cssCla
RowStyle-cssclass="row"
Headerstyle-cssclass="head
<Columns>
<asp:TemplateField itemstyle-HorizontalAlign=
<HeaderTemplate>
<asp:Label id="HdArea" class="HdArea" runat="server" Text="Area"></asp:Label>
<asp:Label id="hdCallsQ" class="hdCallsQ" runat="server" Text="Calls Q"></asp:Label>
<asp:Label id="hdLongWait" class="hdLongWait" runat="server" Text="Long Wait"></asp:Label>
<asp:Label id="hdLogIn" class="hdLogIn" runat="server" Text="Log In"></asp:Label>
<asp:Label id="hdAvail" class="hdAvail" runat="server" Text="Avail"></asp:Label>
<asp:Label id="hdCalls" class="hdCalls" runat="server" Text="Calls"></asp:Label>
<asp:Label id="hdLCR" class="hdLCR" runat="server" Text="LCR%"></asp:Label>
<asp:Label id="hdGOS" class="hdGOS" runat="server" Text="GOS%"></asp:Label>
<asp:Label id="hdHours" class="hdHours" runat="server" Text="Hours"></asp:Label>
<asp:Label id="hdAHT" class="hdAHT" runat="server" Text="AHT"></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblGroupName" runat="server" Text='<%# Eval("groupname") %>'></asp:Label>
<asp:Label ID="lblCallQ" class="DataCallsQ" runat="server" Text='<%# Eval("call_in_queue") %>'></asp:Label>
<asp:Label ID="lblLongWait" class="DataLongWait" runat="server" Text='<%# Eval("long_wait") %>'></asp:Label>
<asp:Label ID="lblLogIn" class="DataLogin" runat="server" Text='<%# Eval("Logged_in") %>'></asp:Label>
<asp:Label ID="lblAvail" class="DataAvail" runat="server" Text='<%# Eval("agents_avail") %>'></asp:Label>
<asp:Label ID="lblOffered" class="DataOffered" runat="server" Text='<%# Eval("offered","{0:n0}") %>'></asp:Label>
<asp:Label ID="lblLCR" class="DataLCR" runat="server" Text='<%# Eval("LCR","{0:n1}") %>'></asp:Label>
<asp:Label ID="lblGOS" class="DataGOS" runat="server" Text='<%# Eval("GOS","{0:n0}") %>'></asp:Label>
<asp:Label ID="lblHrs" class="DataHours" runat="server" Text='<%# Eval("Hours","{0:n0}") %>' Width="8%"></asp:Label>
<asp:Label ID="lblAHT" class="DataAHT" runat="server" Text='<%# Eval("AHT") %>'></asp:Label>
</ItemTemplate>
<ItemStyle horizontalalign="Left" />
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div style="top: 750px; position: absolute; left: 5px;"><asp:Label ID="lblACDDate" runat="server" Font-Names="Verdana" Text="Label"></asp:Label><
</ContentTemplate>
</asp:UpdatePanel>
</div>
<%--Div to display any errors--%>
<div runat="server" id="divError"
style="position:absolute; top:200px; left:100px; height:240px; background-color:White; font-size: small; font-family: Verdana; color: #FF0000;">
</div>
</form>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
if i want to apply to other columns is it just a case of changing the cells[0] and increment up for each coloumn?
I tried cells[1] but got the following
Microsoft JScript runtime error: 'gridViewCtl.rows[...].cel ls.1.style ' is null or not an object
I tried cells[1] but got the following
Microsoft JScript runtime error: 'gridViewCtl.rows[...].cel
Yes
It should work the same :
If you want to apply it to every column you could also do :
Note : I have changed the variable i for variable k because EE would not let me post.
It should work the same :
If you want to apply it to every column you could also do :
Note : I have changed the variable i for variable k because EE would not let me post.
function SizeMe() {
var myHeight = pageHeight();
gridViewCtl = document.getElementById("<%=GridMain.ClientID%>");
for (var k = 0; k < gridViewCtl.rows.length; k++) {
for (var j = 0; j < gridViewCtl.rows[k].cells.length; j++) {
gridViewCtl.rows[k].cells[j].style.fontSize = myHeight * 0.1 + 'px';
}
}
}
ASKER
ok thanks ive just removed the font setting from the class for each of the labels and it seems that the original code acually already changes the font sixe for all columns anyway.
I was also wondering how i could apply the same to the header labels?
I was also wondering how i could apply the same to the header labels?
Hi,
My last solution is resizing header labels as well.
My last solution is resizing header labels as well.
ASKER
thanks i would like to make the header font smaller than the main data how could i split ths out in the code? thank you for your assistance im nealry there with it
I believe by adding an if k == 0 (first row so should be the header), you can achieve it.
function SizeMe() {
var myHeight = pageHeight();
gridViewCtl = document.getElementById("< %=GridMain .ClientID% >");
for (var k = 0; k < gridViewCtl.rows.length; k++) {
for (var j = 0; j < gridViewCtl.rows[k].cells. length; j++) {
if (k == 0) {
gridViewCtl.rows[k].cells[ j].style.f ontSize = myHeight * 0.1 + 'px'; // Set your smaller font here
}
else {
gridViewCtl.rows[k].cells[ j].style.f ontSize = myHeight * 0.1 + 'px';
}
}
}
}
function SizeMe() {
var myHeight = pageHeight();
gridViewCtl = document.getElementById("<
for (var k = 0; k < gridViewCtl.rows.length; k++) {
for (var j = 0; j < gridViewCtl.rows[k].cells.
if (k == 0) {
gridViewCtl.rows[k].cells[
}
else {
gridViewCtl.rows[k].cells[
}
}
}
}
ASKER
thanks
IE8 8.0.6001.18702
FF 3.6.13
Safari 4.0.5 (531.22.7)
Chrome 8.0.552.237
Opera 11.01
What is the error you're seeing?