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

Grouping and/or StaticHeaders cause grid clipping?

4 Answers 164 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Adam L. Ooten
Top achievements
Rank 2
Adam L. Ooten asked on 30 Dec 2008, 07:06 PM
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?

4 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
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.
0
Adam L. Ooten
Top achievements
Rank 2
answered on 31 Dec 2008, 02:49 PM
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?
0
Accepted
Dimo
Telerik team
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.
0
Adam L. Ooten
Top achievements
Rank 2
answered on 13 Jan 2009, 03:49 PM
That does it.  Very wyld solution.  Thanks!
Tags
Grid
Asked by
Adam L. Ooten
Top achievements
Rank 2
Answers by
Dimo
Telerik team
Adam L. Ooten
Top achievements
Rank 2
Share this question
or