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">  
            <Columns> 
                <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" /> 
            </Columns> 
        </MasterTableView> 
    </rad:RadGrid> 
  2. Dimo
    Admin
    Dimo avatar
    8330 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); 
                } 
                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> 
    </head> 
    <body> 
    <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">   
            <Columns>  
                <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" />  
            </Columns> 
            <GroupByExpressions> 
                <rad:GridGroupByExpression> 
                    <GroupByFields> 
                        <rad:GridGroupByField FieldName="Column1" /> 
                    </GroupByFields> 
                    <SelectFields> 
                        <rad:GridGroupByField FieldName="Column1" /> 
                    </SelectFields> 
                </rad:GridGroupByExpression> 
            </GroupByExpressions> 
        </MasterTableView>  
    </rad:RadGrid> 
     
    </form> 
    </body> 
    </html> 


    Best wishes,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top