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

[Solved] Grouping Text Padding

2 Answers 187 Views

Grid

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

2 Answers, 1 is accepted

Accepted

answered on 01 Oct 2009, 03:43 PM

Hi Josh,

Please review the following example.

The following CSS style fixes the misalignment, which is caused by the fact that not all table cells from a given column have the same left/right paddings:

.RadGrid .rgGroupCol,
.RadGrid .rgGroupHeader .rgGroupCol:first-child+td
{
    padding-left:0 !important;
    padding-right:0 !important;
}

The following CSS style shifts the group headers to the left:

.RadGrid .rgGroupHeader div div div
{
    left:-12px;
}

    
            <%@ Page Language="C#" %> 
        
            <%@ Import Namespace="System.Data" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        
            "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <script runat="server"> 
        
                protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) 
        
                { 
        
                    DataTable dt = new DataTable(); 
        
                    DataRow dr; 
        
                    int colsNum = 4; 
        
                    int rowsNum = 3; 
        
                    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> 
        
            <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"> 
        
            .RadGrid .rgGroupCol, 
        
            .RadGrid .rgGroupHeader .rgGroupCol:first-child+td 
        
            { 
        
                padding-left:0 !important; 
        
                padding-right:0 !important; 
        
            } 
        
            .RadGrid .rgGroupHeader div div div 
        
            { 
        
                left:-12px; 
        
            } 
        
            </style> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server"> 
        
            <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
            <telerik:RadGrid ID="RadGrid2" runat="server" 
        
                GroupingEnabled="true" ShowGroupPanel="true" 
        
                Skin="Office2007" 
        
                OnNeedDataSource="RadGrid_NeedDataSource"> 
        
                <MasterTableView> 
        
                    <GroupByExpressions> 
        
                        <telerik:GridGroupByExpression> 
        
                            <GroupByFields> 
        
                                <telerik:GridGroupByField FieldName="Column1" /> 
        
                            </GroupByFields> 
        
                            <SelectFields> 
        
                                <telerik:GridGroupByField FieldName="Column1" /> 
        
                            </SelectFields> 
        
                        </telerik:GridGroupByExpression> 
        
                        <telerik:GridGroupByExpression> 
        
                            <GroupByFields> 
        
                                <telerik:GridGroupByField FieldName="Column2" /> 
        
                            </GroupByFields> 
        
                            <SelectFields> 
        
                                <telerik:GridGroupByField FieldName="Column2" /> 
        
                            </SelectFields> 
        
                        </telerik:GridGroupByExpression> 
        
                    </GroupByExpressions> 
        
                </MasterTableView> 
        
                <ClientSettings AllowDragToGroup="true"> 
        
                    <Scrolling AllowScroll="true" UseStaticHeaders="true" /> 
        
                </ClientSettings> 
        
            </telerik:RadGrid> 
        
            </form> 
        
            </body> 
        
            </html>

Greetings,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.