Grouping and/or StaticHeaders cause grid clipping?

5 posts, 1 answers
  1. Adam L. Ooten
    Adam L. Ooten avatar
    86 posts
    Member since:
    Sep 2005

    Posted 30 Dec 2008 Link to this post

    Telerik ASP.NET AJAX:  Grid v2008.3.1125.35, ASP.NET 3.5

    I am trying to implement a grid with autogenerated columns, Filters, Sorting, StaticHeaders, Scrolling, and has one of level Grouping.  If I implement the grid in this way my Headers and Items get clipped like this "Final..."  If I remove the only the Grouping OR only the StaticHeaders then the data is not clipped.  But then I lose the functionality I need.  I have tried setting the Header and Item Wraps, setting different widths for the grid, and using <nobr> tags around the data, but nothing fixes the issue with the clipping.  What can I do to get rid of this clipping?
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 31 Dec 2008 Link to this post

    Hi Adam,

    Some RadGrid features require fixed table layout, which causes the text clipping. The text is clipped when the column width is too small and there is not enough space for the table cells' content.

    Please increase the column widths by using the HeaderStyle.Width property. You can do this for all columns simultaneously:


        <MasterTableView>
            <HeaderStyle Width="200px" />
        </MasterTableView>


    or per column:


        <MasterTableView>
            <telerik:GridBoundColumn  HeaderStyle Width="200px"  />
        </MasterTableView>



    Best wishes,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Adam L. Ooten
    Adam L. Ooten avatar
    86 posts
    Member since:
    Sep 2005

    Posted 31 Dec 2008 Link to this post

    So is it the Grouping and StaticHeaders that both need the Fixed table layout?  Is there no way to use both of those with Auto table layout?
  5. Answer
    Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Jan 2009 Link to this post

    Hello Adam,

    Yes, both features need fixed table layout, because both features use column widths.

    You can force RadGrid to set an "auto" table-layout for its MasterTable, although it is not a very elegant solution:

    <%@ 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 = 10
            int rowsNum = 20
            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
        } 
     
        protected void Page_PreRenderComplete(object sender, EventArgs e) 
        { 
            (RadGrid1.MasterTableView.Controls[0] as Table).Style["table-layout"] = "auto"; 
        } 
     
    </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"
     
    .RadGridTemp table 
        table-layout:auto !important; 
     
    </style> 
    </head>  
    <body>  
    <form id="form1" runat="server">  
    <asp:ScriptManager ID="ScriptManager1" runat="server" />  
     
    <telerik:RadGrid 
        ID="RadGrid1" 
        runat="server" 
        Width="600px" 
        CssClass="RadGridTemp" 
        GroupingEnabled="true" 
        ShowGroupPanel="true" 
        OnNeedDataSource="RadGrid_NeedDataSource"
        <MasterTableView> 
            <GroupByExpressions> 
                <telerik:GridGroupByExpression> 
                    <GroupByFields> 
                        <telerik:GridGroupByField FieldName="Column1" /> 
                    </GroupByFields> 
                    <SelectFields> 
                        <telerik:GridGroupByField FieldName="Column1" /> 
                    </SelectFields> 
                </telerik:GridGroupByExpression> 
            </GroupByExpressions> 
        </MasterTableView> 
        <ClientSettings AllowDragToGroup="true"
            <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
            <ClientEvents OnGridCreated="GridCreated" /> 
        </ClientSettings> 
    </telerik:RadGrid> 
     
    <script type="text/javascript"
     
    function GridCreated(sender, args) 
        sender.get_masterTableView().get_element().style.tableLayout = "auto"
        sender.get_masterTableViewHeader().get_element().style.tableLayout = "auto"
        sender.get_element().className = sender.get_element().className.replace("RadGridTemp", ""); 
        sender._scrolling.initializeAutoLayout(); 
        sender.repaint(); 
     
    </script> 
     
    </form> 
    </body> 
    </html> 



    Regards,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. Adam L. Ooten
    Adam L. Ooten avatar
    86 posts
    Member since:
    Sep 2005

    Posted 13 Jan 2009 Link to this post

    That does it.  Very wyld solution.  Thanks!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017