How can I get whole the radgrid width?

[skywillnosky]

For example

There is a radgrid whose width is 3000 px, and the resolution of my scree is 1920 * 1080.

Because of 1920 < 3000,  there is scroll bar in this radgrid.

This problem is that the grid's width is not set  (Means Auto? I guess...).

I tried to get value from RadGrid1Width but get nothing.

I also tried count all column width with loop like...

-----------------------------------------------------
double TotalSize = 0;

foreach (GridItem tmpIt in p_Grid.MasterTableView.Columns)
{
    TotalSize += tmpIt.Width.Value;
}
//TotalSize == 0.0
-----------------------------------------------------

How can I get 3000 px from the radgrid?

If I need to count all the column's width, what event I could use?

Thanks.

[Princy]

Hi Skywillnosky,

Indeed using the above code you can retrieve the column width of the columns that have specified width. You can retrieve the widths of all columns on client-side, store them in an object and store this object in a hidden field. Then you can access this field on server and get the desired widths.

You can get the width of the columns by using the method offsetWidth as it is shown bellow:

JS:

var grid = $find("<%= p_Grid.ClientID %>");
alert(grid._element.offsetWidth); //Grid Width
var mtv = grid.get_masterTableView();
var columns = mtv.get_columns();
for (var i = 0; i < columns.length; i++) {
    var element = columns[i].get_element();
    alert(element.offsetWidth);//Coulumn Width
}

Thanks,
Princy

[skywillnosky]

Dear Princy :

Thanks for your reply.

Unfortunately, the code you give is not working.

Let me confirm about "offsetWidth", is it RadGrid data member in client-side?

I've never seen it in Telerik Help Website.

[skywillnosky]

Well...if

alert(grid._element.offsetWidth); //Grid Width

change to 

alert(grid.get_element().offsetWidth); //Grid Width

It's working, but I still get width which is smaller than 1920px.

And

for (var i = 0; i < columns.length; i++) {
    var element = columns[i].get_element();
    alert(element.offsetWidth);//Coulumn Width
}

if the column isn't set (Means auto?) in .aspx, they still get 0.

[Princy]

Hi Skywillnosky,

the offsetWidth is a javascript property to get the width, you may also try to use clientWidth property. If you haven't set a width for the RadGrid, the default width will be obtained. Please try the below sample code snippet and find the difference by setting width and without width.

ASPX:

<telerik:RadGrid ID="rgrdSample" runat="server" AutoGenerateColumns="false" DataSourceID="SqlDataSource1" AllowPaging="true" AllowSorting="true">
    <MasterTableView DataKeyNames="OrderId" CommandItemDisplay="Top">
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderId" DataField="OrderId" HeaderText="OrderId">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn UniqueName="ShipName" DataField="ShipName" HeaderText="ShipName">
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID">
            </telerik:GridBoundColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings>
        <ClientEvents OnGridCreated="OnGridCreated" />
    </ClientSettings>
</telerik:RadGrid>

JS:

<script type="text/javascript">
    function OnGridCreated() {
        var grid = $find("<%=rgrdSample.ClientID %>");
        alert(grid.get_element().offsetWidth);
        var mtv = grid.get_masterTableView();
        var columns = mtv.get_columns();
        for (var i = 0; i < columns.length; i++) {
            var element = columns[i].get_element();
            alert(element.offsetWidth);
        }
    }
</script>

Thanks,
Princy