Modify CSS to show only horizontal grid lines

[pavan pemmaraju]

Hi,

I am using a custom skin that is basically the Office2007 skin provided by telerik. I have looked at other forum post, which imply that the css can be changed to modify the grid lines. I need to be able to show only the horizontal grid lines. Please let me know how this can be achieved or which classes reflect the grid lines in the css.

Thanks,
Pavan.

[Dimo]

Hi Pavan,

Here is the list of RadGrid CSS classes:

http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html

In your RadGrid CSS file, you should have something like this:

.RadGrid_Office2007 .rgHeader,
.RadGrid_Office2007 th.rgResizeCol
{
    border-width:0 0 1px 1px;
}

The border width values should be changed 0 0 1px 0.

In addition, you should remove the following border and padding styles. Note that they are not adjacent in the CSS file.

.RadGrid_Office2007 .rgRow td,
.RadGrid_Office2007 .rgAltRow td,
.RadGrid_Office2007 .rgEditRow td,
.RadGrid_Office2007 .rgFooter td
{
    border-left-width:1px;
}


.RadGrid_Office2007 .rgSelectedRow td,
.RadGrid_Office2007 .rgActiveRow td,
.RadGrid_Office2007 .rgHoveredRow td,
.RadGrid_Office2007 .rgEditRow td
{
    border-left:0;
    padding-left:8px;
}


.RadGrid_Office2007 .rgFooter td
{
    padding-left:8px;
}

.RadGrid_Office2007 .rgHeader:first-child,
.RadGrid_Office2007 th.rgResizeCol:first-child,
.RadGrid_Office2007 .rgFilterRow>td:first-child,
.RadGrid_Office2007 .rgRow>td:first-child,
.RadGrid_Office2007 .rgAltRow>td:first-child
{
    border-left-width:0;
    padding-left:8px;
}

All the best,
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.

[pavan pemmaraju]

Thanks Dino.

But I have a different version of RadControls: Q3 2008 and the css looks as follows. Not sure which ones correspond to the ones you indicated. Please help.

Pavan.

/*Telerik RadGrid Office2007 Skin*/

/*global*/

.RadGrid_MyCustomSkin
{
    border:1px solid #3b5a82;
    background:#fff;
    color:#27413e;
}

.RadGrid_MyCustomSkin,
.MasterTable_MyCustomSkin,
.DetailTable_MyCustomSkin,
.GroupPanel_MyCustomSkin table,
.GridCommandRow_MyCustomSkin table,
.GridEditForm_MyCustomSkin table,
.GridToolTip_MyCustomSkin
{
    font:11px tahoma,verdana,arial,sans-serif;
}

.MasterTable_MyCustomSkin,
.DetailTable_MyCustomSkin
{
    border-collapse:separate !important;
}

.GridRow_MyCustomSkin td,
.GridAltRow_MyCustomSkin td,
.GridEditRow_MyCustomSkin td,
.GridFooter_MyCustomSkin td,
.GridGroupFooter_MyCustomSkin td,
.GridFilterRow_MyCustomSkin td,
.GridHeader_MyCustomSkin,
.ResizeHeader_MyCustomSkin
{
    padding-left:4px;
    padding-right:4px;
}

.RadGrid_MyCustomSkin .rgAdd,
.RadGrid_MyCustomSkin .rgRefresh,
.RadGrid_MyCustomSkin .rgEdit,
.RadGrid_MyCustomSkin .rgDel,
.RadGrid_MyCustomSkin .rgFilter,
.RadGrid_MyCustomSkin .rgPagePrev,
.RadGrid_MyCustomSkin .rgPageNext,
.RadGrid_MyCustomSkin .rgPageFirst,
.RadGrid_MyCustomSkin .rgPageLast,
.RadGrid_MyCustomSkin .rgExpand,
.RadGrid_MyCustomSkin .rgCollapse,
.RadGrid_MyCustomSkin .rgSortAsc,
.RadGrid_MyCustomSkin .rgSortDesc,
.RadGrid_MyCustomSkin .rgUpdate,
.RadGrid_MyCustomSkin .rgCancel
{
    width:16px;
    height:16px;
    border:0;
    padding:0;
    background-color:transparent;
    background-image:url('Grid/sprite.gif');
    background-repeat:no-repeat;
    vertical-align:middle;
    font-size:1px;
    cursor:pointer;
}

.GroupPanelItems_MyCustomSkin input,
.GridCommandRow_MyCustomSkin img,
.GridHeader_MyCustomSkin input,
.GridFilterRow_MyCustomSkin img,
.GridPager_MyCustomSkin img
{
    vertical-align:middle;
}

/*header*/

.GridHeaderDiv_MyCustomSkin
{
    background:url('Grid/sprite.gif') 0 -1616px repeat-x #fafafa;
}

.GridHeader_MyCustomSkin,
.ResizeHeader_MyCustomSkin
{
    border-left:1px solid #9eb6ce;
    border-bottom: solid 1px #9eb6ce;
    padding-top:3px;
    padding-bottom:2px;
    background:url('Grid/sprite.gif') 0 -200px repeat-x #d3dbe9;
    text-align:left;
    font-size:12px;
    font-weight:normal;
}

.GridHeader_MyCustomSkin:first-child,
.ResizeHeader_MyCustomSkin:first-child
{
    border-left:0;
    padding-left:5px;
}

.GridHeader_MyCustomSkin a
{
    color:#27413e;
    text-decoration:none;
}

/*rows*/

.GridFilterRow_MyCustomSkin td,
.GridRow_MyCustomSkin td,
.GridAltRow_MyCustomSkin td,
.GridEditRow_MyCustomSkin td,
.GridFooter_MyCustomSkin td,
.GridGroupFooter_MyCustomSkin td
{
    border:1px #d0d7e5;
    border-style:none none solid solid;
    padding-top:3px;
    padding-bottom:3px;
}

.GridFilterRow_MyCustomSkin>td:first-child,
.GridRow_MyCustomSkin>td:first-child,
.GridAltRow_MyCustomSkin>td:first-child,
.GridEditRow_MyCustomSkin>td:first-child,
.GridFooter_MyCustomSkin>td:first-child,
.GridGroupFooter_MyCustomSkin>td:first-child
{
    border-left-color:#fff;
}

.GridRow_MyCustomSkin a,
.GridAltRow_MyCustomSkin a,
.GridEditRow_MyCustomSkin a,
.GridFooter_MyCustomSkin a,
.GridGroupFooter_MyCustomSkin a,
.GridEditForm_MyCustomSkin a
{
    color:#27413e;
}

.SelectedRow_MyCustomSkin
{
    background:url('Grid/sprite.gif') 0 -800px repeat-x #f1c15f;
}

.SelectedRow_MyCustomSkin td,
.SelectedRow_MyCustomSkin>td:first-child
{
    border-color:#f29536;
}

.ActiveRow_MyCustomSkin,
.GridRowOver_MyCustomSkin
{
    background:none #f9d99f;
}

.ActiveRow_MyCustomSkin td,
.ActiveRow_MyCustomSkin>td:first-child,
.GridRowOver_MyCustomSkin td,
.GridRowOver_MyCustomSkin>td:first-child
{
    border-left-color:#f9d99f;
    border-right-color:#f9d99f;
}

.GridEditRow_MyCustomSkin
{
    background:#ffffe1;
}

.GridEditRow_MyCustomSkin td,
.GridEditRow_MyCustomSkin>td:first-child
{
    border-left-color:#ffffe1;
    border-bottom-color:#d0d7e5;
}

/*footer*/

.GridFooter_MyCustomSkin,
.GridGroupFooter_MyCustomSkin,
.GridFooter_MyCustomSkin a,
.GridGroupFooter_MyCustomSkin a
{
    color:#666;
}

/*status*/

.GridPager_MyCustomSkin span
{
    color:#193d65;
}

/*pager*/

.GridPager_MyCustomSkin
{
    background:url('Grid/sprite.gif') 0 -600px repeat-x #d7e5f7;
    line-height:20px;
}

.GridPager_MyCustomSkin td
{
    border-top:1px solid #567db0;
    border-bottom:1px solid #fff;
    padding:1px 4px 2px;
}

.GridPager_MyCustomSkin div span,
.GridPager_MyCustomSkin a,
.GridPager_MyCustomSkin .sliderPagerLabel_MyCustomSkin
{
    color:#01285c;
}

.PagerLeft_MyCustomSkin
{
    float:left;
}

.PagerRight_MyCustomSkin
{
    float:right;
}

.PagerCenter_MyCustomSkin
{
    text-align:center;
}

.PagerCenter_MyCustomSkin span
{
    vertical-align:middle;
}

.RadGrid_MyCustomSkin .rgPagePrev
{
    background-position:5px -1388px;
}

.RadGrid_MyCustomSkin .rgPageNext
{
    background-position:-22px -1388px;
}

.RadGrid_MyCustomSkin .rgPageFirst
{
    background-position:4px -1356px;
}

.RadGrid_MyCustomSkin .rgPageLast
{
    background-position:-20px -1356px;
}

/*sorting, reordering*/

.GridHeader_MyCustomSkin .rgSortAsc
{
    background-position:-21px -1262px;
    height:10px;
}

.GridHeader_MyCustomSkin .rgSortDesc
{
    background-position:4px -1262px;
    height:10px;
}

.TopReorderIndicator_MyCustomSkin,
.BottomReorderIndicator_MyCustomSkin
{
    width:9px !important;
    height:12px !important;
    margin-left:-4px;
    background:url('Grid/sprite.gif') 0 -1232px no-repeat;
}

.BottomReorderIndicator_MyCustomSkin
{
    background-position:-23px -1232px;
}

/*filtering*/

.GridFilterRow_MyCustomSkin
{
    background:#fafafa;
}

.RadGrid_MyCustomSkin .rgFilter
{
    background-position:2px -1196px;
}

.GridFilterRow_MyCustomSkin input[type="text"]
{
    border:1px solid #7f9db9;
    font:12px arial,verdana,sans-serif;
    color:#27413e;
    vertical-align:middle;
}

/*grouping*/

.GroupPanel_MyCustomSkin
{
    border-bottom:1px solid #688caf;
    background:url('Grid/sprite.gif') repeat-x #9ebde5;
    color:#fff;
}

.GroupPanel_MyCustomSkin td
{
    padding:2px 4px;
}

.GroupPanel_MyCustomSkin td td
{
    padding:0;
}

.GroupPanelItems_MyCustomSkin
{
    border:1px solid #325373;
    background:#fff;
    color:#000;
    padding:1px 2px;
}

.GroupPanel_MyCustomSkin .rgSortAsc
{
    background-position:-21px -1259px;
}

.GroupPanel_MyCustomSkin .rgSortDesc
{
    background-position:4px -1258px;
}

.GroupHeader_MyCustomSkin
{
    background:#e4ecf7;
    color:#567db0;
    font:bold 11px verdana,sans-serif;
}

.GroupHeader_MyCustomSkin td
{
    border-bottom:1px solid #d0d7e5;
    padding:1px 4px 2px 5px;
}

.GroupHeader_MyCustomSkin p
{
    padding:0;
    margin:0;
}

.RadGrid_MyCustomSkin .rgExpand
{
    background-position:2px -1294px;
}

.RadGrid_MyCustomSkin .rgCollapse
{
    background-position:2px -1326px;
}

.GroupHeader_MyCustomSkin td div
{
    top:-0.6em;
}

.GroupHeader_MyCustomSkin td div div
{
    top:0;
}

/*editing*/

.GridEditForm_MyCustomSkin
{
    border-bottom:1px solid #d0d7e5;
}

.RadGrid_MyCustomSkin .rgUpdate
{
    background-position:3px -1549px;
}

.RadGrid_MyCustomSkin .rgCancel
{
    background-position:2px -1581px;
}

/*hierarchy*/

.DetailTable_MyCustomSkin
{
    border:1px solid #9eb6ce;
    border-right:0;
}

.DetailTable_MyCustomSkin .GridRow_MyCustomSkin
{
        background: #BDD7FF;
}

.DetailTable_MyCustomSkin .GridAltRow_MyCustomSkin
{
    background: #BDD7FF;
}


/*command row*/

.GridCommandRow_MyCustomSkin
{
    background:#fafafa;
}

.GridCommandRow_MyCustomSkin td
{
    border-bottom:1px solid #688caf;
    padding:2px 4px;
}

.GridCommandRow_MyCustomSkin td td
{
    border:0;
    padding:1px;
}

.GridCommandRow_MyCustomSkin a
{
    color:#000;
    text-decoration:none;
}

.RadGrid_MyCustomSkin .rgAdd
{
    background-position:2px -1422px;
}

.RadGrid_MyCustomSkin .rgRefresh
{
    background-position:5px -1453px;
}

.RadGrid_MyCustomSkin .rgEdit
{
    background-position:2px -1486px;
}

.RadGrid_MyCustomSkin .rgDel
{
    background-position:2px -1518px;
}

/*loading*/

.LoadingPanel_MyCustomSkin
{
    background:url('Grid/loading.gif') center center no-repeat #fff;
}

/*multirow select*/

.GridRowSelector_MyCustomSkin
{
    background:#336;
}

/*row drag n drop*/

.GridItemDropIndicator_MyCustomSkin
{
    border-top:1px dashed #666;
}

/*tooltip*/

.GridToolTip_MyCustomSkin
{
    border:1px solid #767676;
    padding:3px;
    background:#cad9ee;
    color:#000;
}

/*rtl*/

.RadGridRTL_MyCustomSkin .GridHeader_MyCustomSkin,
.RadGridRTL_MyCustomSkin .ResizeHeader_MyCustomSkin
{
    text-align:right;
}

.RadGridRTL_MyCustomSkin .PagerLeft_MyCustomSkin,
.RadGridRTL_MyCustomSkin .GridPager_MyCustomSkin .radslider
{
    float:right;
}

.RadGridRTL_MyCustomSkin .PagerRight_MyCustomSkin
{
    float:left;
}

.RadGridRTL_MyCustomSkin .GridHeader_MyCustomSkin:first-child,
.RadGridRTL_MyCustomSkin .ResizeHeader_MyCustomSkin:first-child
{
    border-left:1px solid #9eb6ce;
    padding-left:4px;
}

.RadGridRTL_MyCustomSkin .GridFilterRow_MyCustomSkin>td:first-child,
.RadGridRTL_MyCustomSkin .GridRow_MyCustomSkin>td:first-child,
.RadGridRTL_MyCustomSkin .GridAltRow_MyCustomSkin>td:first-child,
.RadGridRTL_MyCustomSkin .GridEditRow_MyCustomSkin>td:first-child,
.RadGridRTL_MyCustomSkin .GridFooter_MyCustomSkin>td:first-child,
.RadGridRTL_MyCustomSkin .GridGroupFooter_MyCustomSkin>td:first-child
{
    border-left-color:#d0d7e5;
}

[Dimo]

Hi Pavan,

The help article that I sent you lists both the old and new CSS classes of RadGrid and you can see which one corresponds to which one there.


Remove or change :

.GridHeader_MyCustomSkin,
.ResizeHeader_MyCustomSkin
{
    border-left:1px solid #9eb6ce;
    border-bottom: solid 1px #9eb6ce;
    padding-top:3px;
    padding-bottom:2px;
    background:url('Grid/sprite.gif') 0 -200px repeat-x #d3dbe9;
    text-align:left;
    font-size:12px;
    font-weight:normal;
}

.GridFilterRow_MyCustomSkin td,
.GridRow_MyCustomSkin td,
.GridAltRow_MyCustomSkin td,
.GridEditRow_MyCustomSkin td,
.GridFooter_MyCustomSkin td,
.GridGroupFooter_MyCustomSkin td
{
    border:1px #d0d7e5;
    border-style:none none solid solid;
    padding-top:3px;
    padding-bottom:3px;
}

.GridFilterRow_MyCustomSkin>td:first-child,
.GridRow_MyCustomSkin>td:first-child,
.GridAltRow_MyCustomSkin>td:first-child,
.GridEditRow_MyCustomSkin>td:first-child,
.GridFooter_MyCustomSkin>td:first-child,
.GridGroupFooter_MyCustomSkin>td:first-child
{
    border-left-color:#fff;
}

.ActiveRow_MyCustomSkin td,
.ActiveRow_MyCustomSkin>td:first-child,
.GridRowOver_MyCustomSkin td,
.GridRowOver_MyCustomSkin>td:first-child
{
    border-left-color:#f9d99f;
    border-right-color:#f9d99f;
}

.GridEditRow_MyCustomSkin td,
.GridEditRow_MyCustomSkin>td:first-child
{
    border-left-color:#ffffe1;
    border-bottom-color:#d0d7e5;
}



All the best,
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.