Solved

GetelementById javascript Gridview Label

Posted on 2011-02-13
10
894 Views
Last Modified: 2012-06-27
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.FindControl("lblGroupName")).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.clientHeight ?  document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function SizeMe() {
 
 var myHeight=pageHeight();
 
  document.getElementById('a10').style.fontSize=myHeight * 0.1 + 'px';
  document.getElementById('a15').style.fontSize=myHeight * 0.15 + 'px';
  document.getElementById('a20').style.fontSize=myHeight * 0.2 + 'px';
  document.getElementById('a30').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>
0
Comment
Question by:LBGUC04
  • 5
  • 4
10 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 34882739
It works fine in:

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?
0
 

Author Comment

by:LBGUC04
ID: 34882779
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.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null;
    }

    function SizeMe() {

        var myHeight = pageHeight();

        document.getElementById('lblGroupName').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_RowCreated"
            cssclass="mGrid"
            AlternatingRowStyle-cssClass="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>
0
 
LVL 16

Accepted Solution

by:
BurnieP earned 500 total points
ID: 34883211
Hi,

You cannot access a gridview column directly in javascript like you are trying to do.

I have modified your SizeMe function to loop through the gridview rows, then applying the style to the first cell.

I have tested it and seem to be working fine.
function SizeMe() {
    var myHeight = pageHeight();
    gridViewCtl = document.getElementById("<%=GridMain.ClientID%>");
    for (var i = 0; i < gridViewCtl.rows.length; i++) {
        gridViewCtl.rows[i].cells[0].style.fontSize = myHeight * 0.1 + 'px';
    }
}

Open in new window

0
NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

 

Author Comment

by:LBGUC04
ID: 34883276
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[...].cells.1.style' is null or not an object
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34883307
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.
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';
        }
    }
}

Open in new window

0
 

Author Comment

by:LBGUC04
ID: 34883337
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?
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34883353
Hi,

My last solution is resizing header labels as well.

0
 

Author Comment

by:LBGUC04
ID: 34883380
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
0
 
LVL 16

Expert Comment

by:BurnieP
ID: 34883393
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.fontSize = myHeight * 0.1 + 'px'; // Set your smaller font here
            }
            else {
                gridViewCtl.rows[k].cells[j].style.fontSize = myHeight * 0.1 + 'px';
            }
        }
    }
}
0
 

Author Comment

by:LBGUC04
ID: 34883418
thanks
0

Featured Post

NAS Cloud Backup Strategies

This article explains backup scenarios when using network storage. We review the so-called “3-2-1 strategy” and summarize the methods you can use to send NAS data to the cloud

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question