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.
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
0
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.
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
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.
can you give me a working example of this.
0
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.
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
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.
I already tried the code in an external css file and in a style tag but the padding still shows up in IE7.
0
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.
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.
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"<html xmlns="http://www.w3.org/1999/xhtml"><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
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
I am attaching my grid css for your reference and my aspx page.
css:
Let me know if you find something that doesn't seem right.
Thanks.
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
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.
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.