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

RadGrid defaults to 100% wide

6 Answers 120 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott MacFarlane
Top achievements
Rank 1
Scott MacFarlane asked on 21 May 2009, 01:40 AM

Throw a simple radgrid onto a page, and by default, it takes up 100% or the whole width of the browser window,
even if you have only one or two columns.

Of course you can set the width of the whole grid, then all the columns expand to fill that 100%.

Or you can set the width of each column, but that is tedious and inflexible.

How can you setup the radgrid so each column only takes the exact width needed based on
the cell contents, expanding up to 100% if necessary, but not if it isn't needed.

err....just like the GridView....

Thanks...

6 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 25 May 2009, 11:50 AM
Hi Scott,

Here is how to have a RadGrid, which does not expand to 100% in width, but only takes up the minimum space required:

<%@ Page Language="C#" %> 
<%@ Import Namespace="System.Data" %> 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<script runat="server"
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
    { 
        DataTable dt = new DataTable(); 
        DataRow dr; 
        int colsNum = 3
        int rowsNum = 10
        string colName = "Column"
 
        for (int j = 1; j <= colsNum; j++) 
        { 
            dt.Columns.Add(String.Format("{0}{1}", colName, j)); 
        } 
 
        for (int i = 1; i <= rowsNum; i++) 
        { 
            dr = dt.NewRow(); 
 
            for (int k = 1; k <= colsNum; k++) 
            { 
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); 
            } 
            dt.Rows.Add(dr); 
        } 
 
        (sender as RadGrid).DataSource = dt
    } 
     
</script> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<title>RadControls for ASP.NET AJAX</title> 
<style type="text/css"
 
.AutoExpand 
    float:left; 
 
.AutoExpand, 
.AutoExpand .rgMasterTable 
    width:auto !important; 
 
</style> 
</head> 
<body> 
<form id="form1" runat="server"
<asp:ScriptManager ID="ScriptManager1" runat="server" /> 
 
<p>content before</p> 
 
<telerik:RadGrid 
    ID="RadGrid1" 
    runat="server" 
    CssClass="AutoExpand" 
    OnNeedDataSource="RadGrid_NeedDataSource"
</telerik:RadGrid> 
 
<div style="clear:both"><!-- --></div
 
<p>content after</p> 
 
</form> 
</body> 
</html> 


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Richard Gregg
Top achievements
Rank 1
answered on 27 May 2010, 04:58 AM

I've been using this solution since the end of last year and all was good, however I have just noticed that its not working is some situations. I'm wondering if it's to do with my upgrading from 2009Q2 to 2010Q1.

Based on a user clicking a button or two I call the following methods to allow the user to alter properties of the grid (Note for other reasons AllowDragToGroup is also set else where):

 
        /// <summary>  
        /// Open the grid up to full manipulation by the user (ie. Column order, grouping, etc.)  
        /// </summary>  
        private void Edit_AllowFullGridManipulation()  
        {  
            MyGrid.PagerStyle.AlwaysVisible = true;  
            MyGrid.ClientSettings.AllowColumnsReorder = true;  
            MyGrid.ClientSettings.AllowDragToGroup = true;  
            MyGrid.ClientSettings.Resizing.AllowColumnResize = true;  
 
            // Make all the column fully customisable  
            foreach (GridColumn col in MyGrid.MasterTableView.Columns)  
            {  
                col.Reorderable = true;  
                col.Resizable = true;  
            }  
            MyGrid.Rebind();  
        }  
 
        /// <summary>  
        /// Open the grid up to full manipulation by the user (ie. Column order, grouping, etc.)  
        /// </summary>  
        private void Edit_RemoveFullGridManipulation()  
        {  
            MyGrid.PagerStyle.AlwaysVisible = false;  
            MyGrid.ClientSettings.AllowColumnsReorder = false;  
            MyGrid.ClientSettings.Resizing.AllowColumnResize = false;  
 
            // Remove all the column customisable features  
            foreach (GridColumn col in MyGrid.MasterTableView.Columns)  
            {  
                col.Reorderable = false;  
                col.Resizable = false;  
            }  
            MyGrid.Rebind();  
        }  
 

All my column widths set to a value and after calling Edit_RemoveFullGridManipulation it all works fine but after Edit_AllowFullGridManipulation is called the grid goes to 100% width. The unfortunate thing about this is that thats the worst time to try and resize columns because change one column width effects other columns.
0
Dimo
Telerik team
answered on 28 May 2010, 11:51 AM
Hello Richard,

Please also set

myGrid.ClientSettings.Resizing.ClipCellContentOnResize = false;

ClipCellContentOnResize is true by default and until recenlty, it triggers a fixed TableLayout for the MasterTableView, which causes it to expand. The fixed table layout is actually required for this feature to work, but it was not set automatically in previous versions.

All the best,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Michael Pullella
Top achievements
Rank 1
answered on 28 May 2010, 02:16 PM
I seem to be having the opposite problem

The grids used to take up 100% width, but after upgrading to the latest version, they only take up a portion of the screen until there is a postback.  Once the postback is complete, the grids take up 100% width as they should... Any ideas?
0
Accepted
Dimo
Telerik team
answered on 28 May 2010, 02:20 PM
Hi Michael,

I suppose you are using RadGrid inside a RadSplitter or some other resizing container. This problem is now fixed, please try the latest internal RadControls build and let us know if the issue persists.

http://www.telerik.com/account/downloads/internal-builds.aspx

Best wishes,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Richard Gregg
Top achievements
Rank 1
answered on 31 May 2010, 12:54 AM
Thanks Dimo, That seems to have fixed my issue.
Tags
Grid
Asked by
Scott MacFarlane
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Richard Gregg
Top achievements
Rank 1
Michael Pullella
Top achievements
Rank 1
Share this question
or