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

Grouping and/or StaticHeaders cause grid clipping?

4 Answers 166 Views

Grid

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

4 Answers, 1 is accepted

answered on 31 Dec 2008, 11:41 AM

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.

Accepted

answered on 06 Jan 2009, 10:46 AM

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Grouping and/or StaticHeaders cause grid clipping?

4 Answers, 1 is accepted