JavaScript getClientRects() does not work in Content Page

[CVMichael]

I have a aspx page with a table with scrollable rows.
I achived this by having a "header" table, and a "rows" table. The rows table has a div with "overflow:auto" so get the scroll bar.

When data is loaded in the rows table, the columns have diferent sizes, and since the columns are not fixed width, the header columns don't match with rows columns.

To fix this, using JavaScript, I loop through the first row in the "rows" table, and I call the getClientRects() function to get the cell bownds, calculate the column width and assign that value to the header table columns.

This works perfectly when I use a regular aspx page. I decided to switch to a master-content achitecture, because I have a tab menu at the top of the page, and I copied and pasted the code into the content page.

Everything works fine, but the getClientRects() returns all values as 0 (zeros).


So how can I get the getClientRects() to return the propper values ?



Here is the relevant code:

<script language="JavaScript" type="text/javascript">
    function SetTableColWidth() {
        var th = document.getElementById("tbl_SearchResult_Header");
        var tr = document.getElementById("tbl_SearchResult_Rows");
 
        if (tr != null) {
            if (tr.rows.length > 0) {
                for (i = 0; i < 7; i++) {
                    rcts = tr.rows[0].children[i].getClientRects();
                    th.rows[1].children[i].style.width = (rcts[0].right - rcts[0].left) + "px";
                }
 
                for (i = 0; i < 7; i++) {
                    rcts = th.rows[1].children[i].getClientRects();
                    tr.rows[0].children[i].style.width = (rcts[0].right - rcts[0].left) + "px";
                }
            }
        }
    }
</script>
 
 
<table id="tbl_SearchResult_Header" cellpadding="2" cellspacing="1" width="750px" style="background: #99B4F1; padding: 0px; border-style: solid solid none solid; border-width: 2px; border-color: #000000">
<tr class="SectionTableTitle">
    <td colspan="7">Search results</td>
</tr>
<tr class="SectionTableTitle">
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
    <td>aaaaaaaaaa</td>
</tr>
</table>
<div style="width:770px;height:255px;overflow:auto;">
<asp:Repeater ID="rptSearchResults" runat="server">
<HeaderTemplate>
    <table id="tbl_SearchResult_Rows" cellpadding="2" cellspacing="1" width="750px" style="background: #99B4F1; padding: 0px; border-style: none solid solid solid; border-width: 2px; border-color: #000000">
</HeaderTemplate>
<ItemTemplate>
    <tr align="left" bgcolor='#E0E0E0'
            onmouseover="this.bgColor='#C8C8C8'" onmouseout="this.bgColor='#E0E0E0'"
            onclick="SubmitChoice(<%#Container.DataItem("aaaaaaaaaa_ID")%>);" style="cursor:pointer;">
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td align="center"><%#Container.DataItem("aaaaaaaaaa")%></td>
    </tr>
</ItemTemplate>
<AlternatingItemTemplate>
    <tr align="left" bgcolor='#F0F0F0'
            onmouseover="this.bgColor='#C8C8C8'" onmouseout="this.bgColor='#F0F0F0'"
            onclick="SubmitChoice(<%#Container.DataItem("aaaaaaaaaa_ID")%>);" style="cursor:pointer;">
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td><%#Container.DataItem("aaaaaaaaaa")%></td>
        <td align="center"><%#Container.DataItem("aaaaaaaaaa")%></td>
    </tr>
</AlternatingItemTemplate>
<FooterTemplate>
    </table>
</FooterTemplate>
</asp:Repeater>
</div>
 
 
<script language="JavaScript" type="text/javascript">
        SetTableColWidth();
</script>

I attached an image to get an idea how it looks (when it works)

[sapator]

Hi.Read this:
http://www.codeproject.com/Articles/...-getElementByI

Also if you don't have a specification on having everything in one row you could css your columns with a specified width so they will go on the next line when end of cell is reached or you can specify them to cut the word if they reach the end of the cell.

[CVMichael]

Thanks for your reply, but...

getElementById returns the objects of both tables... I debugged the app, and the values are there...

The problem is with getClientRects() function returning rects of "0 0 0 0" when the code is in the content page.

Also if you don't have a specification on having everything in one row you could css your columns with a specified width so they will go on the next line when end of cell is reached or you can specify them to cut the word if they reach the end of the cell.

So your saying to have the columns fixed length, and have the data roll to next line if it does not fit?

That is not an option for me when my code works fine in an aspx page, it re-sizes columns just fine with dynamic data, and the header will match the data column sizes.

[sapator]

You debugged on the server or on your local PC?Master Page or content page?
I would suggest to give the values one try just to be sure because even if it works now you may have trouble when server deploying.Won't hurt i guess

[CVMichael]

I debugged on my local PC. The code is in the content page.

I would suggest to give the values one try just to be sure because even if it works now you may have trouble when server deploying.Won't hurt i guess

I'm not sure what you mean by that?

[sapator]

It means that the values you get local may not work when deploying on the actual server.

[CVMichael]

I published the web-site to the server, and I get the same results. It works in the regular aspx page, but it does not work in the content page.

This is how I expected, because the problem is with javascript function, which executes on the client side...

[sapator]

Ok my last thought is to try to pass the javascript through the server side:
http://www.codeproject.com/Articles/...-RegisterStart
and for getting the placeholders:
http://msdn.microsoft.com/en-us/library/xxwa0ff0.aspx