Access RadGrid's First Row Cell Item Width in JS

[Juan]

Hey Guys,

We have a project where we are using a static table (<table>) as the header, below that is the RadGrid with its ShowHeader="false". Depending on the amount of data, the grid automatically sizes its columns (ignoring the ItemStyle and HeaderStyle Width property).

What I need to do is to get the first row, and get each cell's width property in Javascript then assign that width to my static table's "header" cells. I have been searching for weeks on end trying to get an article that describes what I'm trying to do but to no avail.

What I have tried is the following:

$(document).ready(function () {
    var MasterTable = $find("<%= RadGridSec31.ClientID %>").get_masterTableView();
    var Rows = MasterTable.get_dataItems();
    var row = Rows[0];
    var testWidth = row.get_element().cells[4].width;

    alert(testWidth); //--> This returns an empty string
});

Obviously this is not correct because the alert shows empty, and there is no javascript errors in the debugging console either. How do I get the width of each cell in the first row of the grid?

[Juan]

So I figured this one out myself. I'm posting the code below for those who might experience similar issues:

$(document).ready(function () {
    var MasterTable = $find("<%= RadGridSec31.ClientID %>").get_masterTableView(); //--> Get the table here, otherwise it will return null
    var Rows = MasterTable.get_dataItems();
    var row = Rows[0];
    var Cells = row.get_element().cells;

    $('#TableCell1').css({ 'width': (Cells[0].offsetWidth - 3) + "px" }); //--> replace Cells[0] with the cell number e.g. Cells[7]
});

Also consider the following:

- When trying to set the width of another table based on the Grid's cell width, ensure that the script (as mentioned above) is executed lastly. So wrap this in the document.ready function, and also place the script at the bottom of the page (not in the Head).