Column width not working when grouping is enabled

2 posts, 0 answers
  1. Ryan Means
    Ryan Means avatar
    32 posts
    Member since:
    Dec 2006

    Posted 16 Jun 2009 Link to this post

    I have created a RadGrid with 4 columns and grouping enabled.  The last two columns have a width specified using the ItemStyle-Width property.  When the grid renders the width's are not honored and end up drawing wider than the specified width.  Using the IE development toolbar I found the <p> tag that renders in the GridGroupHeaderItem and set the css attribute display:none.  As soon as I do that the widths are rendered correctly.

    There appears to be an issue with having a <p> tag inside of the <td> tag of the group header row.  However, I do not know how to prevent this <p> tag from rendering.

    I am using the default skin and 2009.1.402.35 version of the controls.
    <rad:RadGrid ID="rgBuySell" runat="server" Width="100%" AutoGenerateColumns="false" onitemdatabound="rgBuySell_ItemDataBound" onneeddatasource="rgBuySell_NeedDataSource" onitemcommand="rgBuySell_ItemCommand" onprerender="rgBuySell_PreRender">  
        <MasterTableView ShowGroupFooter="true" DataKeyNames="fkAssetFrom">  
                <rad:GridBoundColumn DataField="ProductToName" HeaderText="Product" UniqueName="Product" /> 
                <rad:GridBoundColumn DataField="ProductToTicker" HeaderText="Ticker" /> 
                <rad:GridBoundColumn DataField="Percent" HeaderText="Percent" ItemStyle-Width="55px" HeaderStyle-Width="55px" /> 
                <rad:GridBoundColumn DataField="Amount" HeaderText="Amount" ItemStyle-Width="55px" HeaderStyle-Width="55px" /> 
  2. Dimo
    Dimo avatar
    8406 posts

    Posted 19 Jun 2009 Link to this post

    Hello Ryan,

    I am not very sure how to reproduce this problem locally - it looks like the column widths are applied as expected. Here is my test page.

    (Note that column widths should be set with HeaderStyle-Width only).

    <%@ Page Language="C#" %> 
    <%@ Import Namespace="System.Data" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="rad" %> 
    <script runat="server"
        protected void rgBuySell_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
            DataTable dt = new DataTable(); 
            DataRow dr; 
            int colsNum = 4
            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); 
            (sender as RadGrid).DataSource = dt
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    <html xmlns=""
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <rad:RadGrid ID="rgBuySell" runat="server" Width="100%" AutoGenerateColumns="false" OnNeedDataSource="rgBuySell_NeedDataSource">   
        <MasterTableView ShowGroupFooter="true">   
                <rad:GridBoundColumn DataField="Column1" HeaderText="Product" UniqueName="Product" />  
                <rad:GridBoundColumn DataField="Column2" HeaderText="Ticker" />  
                <rad:GridBoundColumn DataField="Column3" HeaderText="Percent" HeaderStyle-Width="55px" />  
                <rad:GridBoundColumn DataField="Column4" HeaderText="Amount" HeaderStyle-Width="55px" />  
                        <rad:GridGroupByField FieldName="Column1" /> 
                        <rad:GridGroupByField FieldName="Column1" /> 

    Best wishes,
    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.
Back to Top