Rename coulmns headers?

[stephenk1973]

Very new to javasript, so please understand if i ask stupid questions?

How do i dynamically rename a Gridview column header?

I am calling a function on mouse over event, the funciton pulls a value from hidden column which i would like to use as the header text.

All help and suggestions much appreciated.

Thanks
Stephen

 

[theniteowl]

Give the TD for that column header an ID.

<td id="Column1">Some Text</td>

Then, in your javascript to change that column you can use:

document.getElementById('Column1').innerText = 'Other Text';

innerHTML would work also but if you are just swapping out the text, innerText would be best.

There are other ways to accomplish this also but this works well.


Google, you're my hero!

 

[BillyRayPreachersSon]

innerHTML would work also but if you are just swapping out the text, innerText would be best.

innerText is worse because it only works in IE, AFAIK.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

P.S. The cross-browser implementation of "innerText" is "firstChild.nodeValue" - but that assumes no whitespace nodes, etc.

Dan


Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[theniteowl]

innerText is worse because it only works in IE, AFAIK.

Really? I did not realize that. But I develop exclusively for IE at work and am just beginning to do cross-browser stuff as I work on the local junior high web site. I have not yet used any javascript on that site so...
It's funny, I am most familiar with Javascript and ASP/VBScript and on the school web site I am working only in PHP.

Google, you're my hero!

 

[stephenk1973]

Hi folk cheers for the help. I think i am probably missing something obvious....my gridview defined the bound field....


<asp:BoundField DataField="S1"
HeaderText="S1">
</asp:BoundField>

Viewing the source of the page this return as .......

<th scope="col">S1</th>

So i do not get the the ID to identify the header field, how would i introduce this to the gridview definition?

 

[BillyRayPreachersSon]

You could refer to the th via an offset from the main table, but at SOME point, you're really going to want to have an ID, so that if your page structure changes, your JS code will still work.

I'd ask in the ASP / ASP.Ney forums about passing an ID through to the page.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[stephenk1973]

Okay got it sorted, BillyRay thanks for getting me thinking downn the right path.

Changed the gridview column into a template column into which i could put a label and convert via the watchmans method quoted at the start....so if your interested...


Script called on the mouseover.....

<script type="text/javascript">
function fnSizescale(S1)
{
document.getElementById('label5').firstChild.nodeValue = S1;
}
</script>


In the gridview...

<asp:TemplateField HeaderText="S1">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("S1") %>'></asp:TextBox>
</EditItemTemplate>
<HeaderTemplate><label for="EditBox" id="label5">S1</label></HeaderTemplate>
<ItemStyle HorizontalAlign="Right" />
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("S1") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

Code is cut down a bit, work nicely on the 12 size columns i have.

Thanks again

Stephen