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

hiding expand/collapse images

7 Answers 87 Views
Grid
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 04 May 2010, 09:37 PM
Hi I tried the code shown in http://www.telerik.com/help/aspnet-ajax/grdpreventgroupsexpansion.html
to hide the expand collapse button in my grouped grid.

However I was not able to remove the padding which shows up in IE7.

Can you help me with CSS to remove the padding for the grid. I have several other grids in my project. Is there something I can specify in the grid declaration itself?

Thanks.


7 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 07 May 2010, 04:20 PM
Hi,

The cell padding of the group splitter column is removed as shown in the help article:

.rgGroupCol
{
  padding-left: 0 !important;
  padding-right: 0 !important;
}


Does this work in your case? Is this the padding that you are talking about, or some other padding?

Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
newbie
Top achievements
Rank 1
answered on 10 May 2010, 10:27 PM
Unfortunately, I cannot find where to put this piece of code.
can you give me a working example of this.
0
Dimo
Telerik team
answered on 12 May 2010, 07:10 AM
Hi Anumeha,

The provided code is CSS code. You can put it in a <style> tag in the <head> of the page or in some external CSS file that you have in the application (create a new one if you don't have).

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
newbie
Top achievements
Rank 1
answered on 18 May 2010, 08:58 PM
Hi Dimo,

I already tried the code in an external css file and in a style tag but the padding still shows up in IE7.
0
Dimo
Telerik team
answered on 19 May 2010, 11:08 AM
Hi Anumeha,

Here is a demo that works. I suppose you are not using a RadGrid version older than Q1 2009. If this is the case you should set HeaderStyle-CssClass="GridHeader_SkinName rgGroupCol" and ItemStyle-CssClass="rgGroupCol" for the GroupSpliterColumn in the ColumnCreated event.

<%@ 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 = 4;
        int rowsNum = 2;
        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"
 
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
<style type="text/css">
 
/*used for demonstration purposes only.
The group expand/collapse icons should be hidden like in the help topic*/
.rgExpand,
.rgCollapse
{
    display:none !important;
}
 
/*remove group splitter column padding*/
.rgGroupCol
{
    padding-left:0 !important;
    padding-right:0 !important;
}
 
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<p>The following RadGrid has the padding of its GroupSplitterColumn cells removed:</p>
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <MasterTableView>
        <GroupByExpressions>
            <telerik:GridGroupByExpression>
                <GroupByFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </GroupByFields>
                <SelectFields>
                    <telerik:GridGroupByField FieldName="Column1" />
                </SelectFields>
            </telerik:GridGroupByExpression>
        </GroupByExpressions>
    </MasterTableView>
</telerik:RadGrid>
 
</form>
</body>
</html>


Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
newbie
Top achievements
Rank 1
answered on 19 May 2010, 05:35 PM
Hi Dimo,

This solution does not work for me.
I am using Telerik version 2008, 3, 1504, 35
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" 
    CodeFile="SOCalendar.aspx.cs" Inherits="SOCalendar" Title="M Lightning" Theme="MLightning" %> 
 
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderContent" runat="Server">  
     
    <style type="text/css">  
        /*used for demonstration purposes only.The group expand/collapse icons should be hidden like in the help topic*/  
        .rgExpand, .rgCollapse  
        {  
            display: none !important;  
        }  
        /*remove group splitter column padding*/  
        .rgGroupCol  
        {  
            padding-left: 0 !important;  
            padding-right: 0 !important;  
        }  
    </style> 
      
    <br /> 
    <div style="width: 100%; text-align: center;">  
        <table border="0" class="calendar" style="margin-left: auto; margin-right: auto;  
            text-align: left"> 
              
             
            <tr> 
                <td colspan="3" style="text-align: left">  
                    <telerik:RadGrid ID="RadGridCalendar" runat="server" GridLines="None" AllowPaging="true" 
                        AllowFilteringByColumn="true" Width="975px" ShowHeader="true" OnColumnCreated="RadGridCalendar_ColumnCreated" 
                        OnItemCreated="RadGridCalendar_ItemCreated" OnItemDataBound="RadGridCalendar_ItemDataBound" 
                        AutoGenerateColumns="False" EnableLinqExpressions="false" ShowGroupPanel="false" 
                          
                        OnNeedDataSource="RadGridCalendar_NeedDataSource">  
                        <ClientSettings Resizing-AllowColumnResize="true">  
                            <ClientEvents OnGridCreated="function(sender) {sender.get_masterTableView().hideFilterItem(); }" /> 
                        </ClientSettings> 
                        <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="false" 
                            FileName="ContactsExport">  
                            <Pdf AllowAdd="false" AllowCopy="true" AllowModify="true" AllowPrinting="true" Author="Anonymous" 
                                Keywords="None" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in" 
                                PageTopMargin="1in" PageTitle="Contacts" Subject="Contacts Grid Export" Title="Contacts" 
                                PaperSize="Letter" /> 
                        </ExportSettings> 
                        <MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ActivityID" 
                            CommandItemDisplay="Top" DataKeyNames="ActivityID">  
                            <GroupByExpressions> 
                                <telerik:GridGroupByExpression> 
                                    <SelectFields> 
                                        <telerik:GridGroupByField FieldName="ActivityDate"></telerik:GridGroupByField> 
                                    </SelectFields> 
                                    <GroupByFields> 
                                        <telerik:GridGroupByField FieldName="Date" FormatString="{0:d}" SortOrder="Descending">  
                                        </telerik:GridGroupByField> 
                                        <telerik:GridGroupByField FieldName="ActivityDate" FormatString="{0:d}" SortOrder="None">  
                                        </telerik:GridGroupByField> 
                                    </GroupByFields> 
                                </telerik:GridGroupByExpression> 
                            </GroupByExpressions> 
                            <Columns> 
                                 
                                <telerik:GridTemplateColumn UniqueName="Subject" HeaderText="Subject">  
                                    <ItemStyle BorderStyle="None"></ItemStyle> 
                                    <ItemTemplate> 
                                        <div> 
                                            
                                                
                                            <%# Eval("Subject")%> 
                                        </div> 
                                    </ItemTemplate> 
                                </telerik:GridTemplateColumn> 
                                  
                                 
                                <telerik:GridTemplateColumn UniqueName="Description" HeaderText="Description">  
                                    <ItemStyle BorderStyle="None"></ItemStyle> 
                                    <ItemTemplate> 
                                        <div> 
                                            <%# Eval("Description")%> 
                                        </div> 
                                    </ItemTemplate> 
                                </telerik:GridTemplateColumn> 
                                <telerik:GridBoundColumn DataField="ActivityID" Visible="false" UniqueName="ActivityID">  
                                </telerik:GridBoundColumn> 
                                <telerik:GridDateTimeColumn DataField="Date" AllowFiltering="true" Visible="false" 
                                    DataFormatString="{0:MM/dd/yyyy}" UniqueName="Date">  
                                </telerik:GridDateTimeColumn> 
                                <telerik:GridBoundColumn DataField="ActivityStatus" AllowFiltering="true" Visible="false" 
                                    UniqueName="Status">  
                                </telerik:GridBoundColumn> 
                                 
                            </Columns> 
                            <CommandItemTemplate> 
                                <asp:ImageButton ID="ImageButtonAdd" runat="server" ImageUrl="~/App_Themes/MLightning/Layout/plus-icon.png" 
                                    AlternateText="Add" PostBackUrl="~/Calendar/CalendarActivityAddSettings.aspx" /> 
                            </CommandItemTemplate> 
                            <PagerStyle Position="TopAndBottom" PrevPageText="Prev" NextPageText="Next" Mode="NextPrev" /> 
                        </MasterTableView> 
                    </telerik:RadGrid> 
                </td> 
            </tr> 
             
        </table> 
    </div> 
</asp:Content> 
 

I am attaching my grid css for your reference and my aspx page.

css:
/* Telerik RadGrid Telerik / embedded skin */  
 
.RadGrid_MLightning  
{  
    background: #F9F9F9;      
}  
 
.RadGrid_MLightning,  
.RadGrid_MLightning table,  
.GridFilterMenu_MLightning table  
{  
    font: normal 9pt Tahoma;      
      
}  
 
.MasterTable_MLightning  
{  
    border: 0px !important;  
    border-collapse: separate !important;  
    color: #000;  
      
    /*-moz-user-select: none;*/ /*disables text selecting in Firefox to combat unpleasant visual appearance*/  
}  
 
 
 
.MasterTable_MLightning td  
{     
    padding:0px 0px 7px 0px;  
    background:#ffffff;  
    border-right :0px;  
}  
 
.MasterTable_MLightning th  
{  
    background:#ffffff;  
    text-align: left;  
}  
 
.RadGrid_MLightning td,  
.RadGrid_MLightning td a  
{   
    color: #000;      
}  
 
 
 
th.GridHeader_MLightning, th.ResizeHeader_MLightning  
{  
    background: #003e7e repeat-x 0 100%;  
    border-right: solid 1px #FFFFFF;  
    border-bottom: solid 1px #003e7e;  
    border-top: solid 1px #003e7e;  
    height: 20px;  
    color: #ffffff;  
    font-family:Tahoma;  
    font-size:10pt;  
}  
 
th.GridHeader_MLightning,  
th.ResizeHeader_MLightning  
{  
    padding:3px;  
}  
 
.GridHeader_MLightning a  
{  
    color: #ffffff;  
    text-decoration: none;  
}  
 
td.GridHeader_MLightning input  
{  
    float: left;  
    border: solid 1px #666;  
    background: #fafafa;  
    font: bold 11px Verdana, Arial, Sans-serif;  
    color: #989cb0;  
    height: 20px;  
    vertical-align:middle;  
}  
 
.GridFilterRow_MLightning td  
{  
    border-left: 1px solid #f9f9f9;   
    background-color: #8FBCD1;    
    empty-cells: hide;  
    text-align:center;  
    height: 16px;  
    padding:0px 0px 0px 0px;  
}  
 
.GridRow_MLightning td,  
.GridAltRow_MLightning td,  
.SelectedRow_MLightning td,  
.ActiveRow_MLightning td,  
.GridEditRow_MLightning td  
{  
    padding-top:2px;  
    padding-bottom:2px;  
}  
.GridRow_MLightning  
{  
    background: #ffffff;  
}  
 
.GridRow_MLightning td  
{  
    white-space: normal;  
    text-align: center;  
    color: #898a8c;  
    font-family: Tahoma;  
    font-size: 8pt;  
    padding: 10px 0px 10px 0px;  
    border: solid 1px #C4C4C4;  
      
}  
 
.GridRow_MLightning td div  
{  
    text-align: left;  
    padding-left: 5px;  
}  
 
.GridRow_MLightning td a  
{  
    color: #73abc9;  
    font-family:Tahoma;  
    font-size:8pt;  
}  
 
 
.GridAltRow_MLightning  
{  
    background: #ffffff;  
}  
.GridAltRow_MLightning td  
{  
    white-space:normal;       
    text-align: center;  
    color:#898a8c;  
    font-family:Tahoma;  
    font-size:8pt;  
    padding: 10px 0px 10px 0px;   
    border: solid 1px #C4C4C4;  
}  
 
.GridAltRow_MLightning td a  
{  
    color: #73abc9;  
    font-family:Tahoma;  
    font-size:8pt;  
}  
 
.GridAltRow_MLightning td div  
{  
    text-align: left;  
    padding-left: 6px;  
}  
 
.SelectedRow_MLightning  
{  
    background: #707070 url( '../../App_Themes/UTC/Grid/selectedRow.gif' ) repeat-x 50% bottom;  
}  
.SelectedRow_MLightning td  
{  
    border-top: solid 1px #eaeaea;  
    border-left: none;  
    border-bottom: solid 1px #83c60b;  
    padding-left:4px;  
}  
 
.GridEditRow_MLightning  
{  
    background-color: #ffffe1;  
}  
.GridEditRow_MLightning input  
{  
    font-size: 11px;  
}  
 
.ActiveRow_MLightning  
{  
    background: #edf2d9;  
}  
.ActiveRow_MLightning td,  
.GridEditRow_MLightning td  
{  
    border-top: solid 1px #eaeaea;  
    border-left: solid 1px #eaeaea;  
    border-bottom: solid 1px #fefefe;  
}  
 
.GridRowOver_MLightning  
{  
    background:none #fff;  
}  
 
.GridPager_MLightning  
{  
    background: #898a8c;  
    color: #ffffff;  
      
}  
.GridPager_MLightning td  
{  
    /*border: solid 1px #fff;*/  
    border: 1px solid #c7c7c7;  
    border-right: 0;  
    color: #999;  
    height: 14px;  
    padding-top: 1px;  
    padding-bottom: 1px;  
    font-family: Tahoma;  
    font-size: 8pt;  
    background: #898a8c;  
}  
.GridPager_MLightning td div  
{  
    padding-left:0px;  
    color: #ffffff;  
}  
 
.GridPager_MLightning td a  
{  
    padding-left:1px;  
    color: #ffffff;  
}  
 
.GridPager_MLightning td a:hover,  
.GridFooter_MLightning td a:hover  
{  
    color: #333;  
}  
 
.PagerLeft_MLightning *,  
.PagerRight_MLightning *,  
.PagerCenter_MLightning *  
{  
    vertical-align:middle;  
}  
 
.PagerLeft_MLightning,  
.PagerRight_MLightning,  
.sliderPagerLabel_MLightning  
{  
    line-height:17px;  
    padding-top:2px;  
}  
 
.PagerLeft_MLightning  
{  
    float:left;  
}  
.PagerRight_MLightning,  
.sliderPagerLabel_MLightning  
{  
    float:right;  
    padding-right:4px;  
}  
.GridPager_MLightning .radslider  
{  
    float:left;  
}  
.GridPager_MLightning img  
{  
    border:0;  
}  
 
.GridPager_MLightning .radInput_MLightning  
{  
    vertical-align:middle;  
}  
 
.PagerCenter_MLightning  
{  
    display:block;  
    text-align:center;  
}  
 
.GridFooter_MLightning  
{  
    background: #6dabaa;  
    height: 16px;  
    color: #666;  
    line-height: 10px;  
}  
.GridFooter_MLightning td  
{  
    border: solid 2px #6dabaa;  
    border-top: 1px solid #6dabaa;  
    border-left: 7px solid #6dabaa;  
    border-right: 7px solid #6dabaa;  
}  
.GridFooter_MLightning td a  
{  
    color: #666;  
}  
 
tr.GroupHeader_MLightning  
{  
    background: white;  
    height: 22px;  
}  
tr.GroupHeader_MLightning td  
{  
    border-left:1px solid #fff;  
    border-right:0;  
    border-bottom: solid 1px #c2c2c2;  
    padding-top: 7px;  
}  
 
.GroupHeader_MLightning td div div{top:-0.5em;}  
* html .GroupHeader_MLightning td div div{top:0.4em;}  
*+html .GroupHeader_MLightning td div div{top:0.4em;}  
.GroupHeader_MLightning td div div div{top:0;}  
 
 
 
.GroupPanel_MLightning  
{  
    background-color: #e8e8e8;  
    width: 100%;  
    border-collapse: collapse;  
    border-bottom: 1px solid #b1b1b1;  
}  
 
.GroupPanel_MLightning td  
{  
    padding: 2px 4px;  
}  
 
.GroupPanelItems_MLightning  
{  
    background: #efefef;  
    color: #999999;  
    border: solid 1px white;  
    border-right: solid 1px #c6c6c6;  
    border-bottom: solid 1px #c6c6c6;  
    white-space:  nowrap;  
    font-size: 10px;  
}  
 
.TopReorderIndicator_MLightning  
{  
    background: url('../../App_Themes/UTC/Grid/MoveDown.gif') no-repeat;  
}  
 
.BottomReorderIndicator_MLightning  
{  
    background: url('../../App_Themes/UTC/Grid/MoveUp.gif') no-repeat;  
}  
 
.GridFilterMenu_MLightning  
{  
    cursor:default;  
      
}  
 
.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning,  
.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning  
{  
    padding:3px 4px;  
}  
 
.GridFilterMenu_MLightning .GridFilterMenuSelectColumn_MLightning  
{  
    background:#f9f9f9;  
    text-align:center;  
}  
 
.GridFilterMenu_MLightning .GridFilterMenuTextColumn_MLightning  
{  
    background: #FFFFFF;  
    color: #333;  
}  
 
.GridFilterMenu_MLightning .GridFilterMenuHover_MLightning  
{  
    background:#c1f320;  
}  
 
/*AJAX Loading*/  
 
.GridLoadingTemplate_MLightning  
{  
    background:#fff !important;  
    font:normal 24px/54px arial,sans-serif;  
    color:#b5ea0e;  
}  
 
/*loading*/  
 
.LoadingPanel_MLightning {  
    background: url( 'Grid/loading.gif' ) center center no-repeat #fff;  
}  
 
/* rtl support */  
 
.RadGridRTL_MLightning th,  
.RadGridRTL_MLightning td  
{  
    text-align:center;  
}  
 
.RadGridRTL_MLightning .PagerLeft_MLightning,  
.RadGridRTL_MLightning .GridPager_MLightning .radslider  
{  
    float:left;  
}  
.RadGridRTL_MLightning .PagerRight_MLightning,  
.RadGridRTL_MLightning .sliderPagerLabel_MLightning  
{  
    float:left;  
}  
.GridCommandRow_MLightning  
{  
    background: #a7a7a9;  
    color: #ffffff;  
}  
 
.GridCommandRow_MLightning td  
{  
    background: #a7a7a9;  
    border: solid 1px #c7c7c7;  
    color: #ffffff;  
    height: 16px;  
    padding-top: 1px;  
    padding-bottom: 1px;  
    font-family: Tahoma;  
    font-size: 9pt;  
    text-align:right;  
}  
 
.GridCommandRow_MLightning td a  
{  
    /*color: #73abc9;*/  
    text-align:right;  


Let me know if you find something that doesn't seem right.

Thanks.
0
Dimo
Telerik team
answered on 20 May 2010, 01:30 PM
Hello Anumeha,

I inspected the RadGrid code and it turned out that you can't set the rgGroupCol CSS class to the GroupSplitterColumn programmatically, because it will be removed in the control's render stage.

So the only option is to remove the paddings client-side with Javascript, however, this will require a large number of DOM operations, which will slow down the browser. I suggest you to consider upgrading RadControls.

Another option is to completely hide the GroupSplitterColumn like this:

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
    {
        if (e.Column is GridGroupSplitterColumn)
            e.Column.Display = false;
    }

Greetings,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Tags
Grid
Asked by
newbie
Top achievements
Rank 1
Answers by
Dimo
Telerik team
newbie
Top achievements
Rank 1
Share this question
or