This is a migrated thread and some comments may be shown as answers.

How can I get whole the radgrid width?

4 Answers 78 Views
Grid
This is a migrated thread and some comments may be shown as answers.
skywillnosky
Top achievements
Rank 1
skywillnosky asked on 25 Aug 2014, 02:10 AM

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.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 1
answered on 25 Aug 2014, 03:55 AM
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
0
skywillnosky
Top achievements
Rank 1
answered on 25 Aug 2014, 06:05 AM
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.


0
skywillnosky
Top achievements
Rank 1
answered on 25 Aug 2014, 06:28 AM
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.
0
Princy
Top achievements
Rank 1
answered on 26 Aug 2014, 04:54 AM
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
Tags
Grid
Asked by
skywillnosky
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 1
skywillnosky
Top achievements
Rank 1
Share this question
or