I am using Radgrid with hierarchy in my application. My problem is now the seperator lines between the rows disappear. Previously it was there.Right now I am using skin vista which I include in my appliaction and now I am refering that only by making enable embedded skins as false. Can anyone tell why that lines disappear?
Regards,
jincy
5 Answers, 1 is accepted
As far as I can see, the Vista skin for RadGrid has never had horizontal gridlines between the grid rows in the previous versions. I suppose that you have used a modified Vista skin before. Please find attached a screenshot how RadGrid should look like when in hierarchy mode with the Vista skin applied.
If you want to have horizontal gridlines, please add the following CSS rule somewhere in your application stylesheets (and you can continue using the embedded Vista skin):
.RadGrid_Vista .GridRow_Vista td,
.RadGrid_Vista .GridAltRow_Vista td
{
border-bottom:1px solid #ededed;
}
Let us know if you need further advice or if I have not understood your question correctly.
Sincerely yours,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
I gave in the stylesheet as per your suggestion but then also there is no horizontal lines in the grid. The Grid.Vista.CSS is as follows.
.RadGrid_Vista
{
border:1px solid #a7bac5;
/* background:#fcfcfc;*/
color:#333;
}
.RadGrid_Vista
,
.MasterTable_Vista
,
.GroupPanel_Vista
,
.GridFilterMenu_Vista
table,
.GridEditForm_Vista
,
.GridEditForm_Vista
table,
.GridEditForm_Vista
table input,
.GridEditForm_Vista
table textarea
{
font:11px/14px "segoe ui",arial,sans-serif;
}
.MasterTable_Vista
{
border-collapse:separate !important;
}
.MasterTable_Vista
th,
.MasterTable_Vista
td
{
padding-left: 9px;
padding-right:0;
}
.MasterTable_Vista
.GridHeader_Vista,
.MasterTable_Vista
.ResizeHeader_Vista
{
/*background:url(Grid/headerBg.gif) repeat-x #f1f2f4;*/
border-bottom:1px solid #d5d5d5;
padding:4px 1px 4px 10px;
text-align:left;
}
/*hierarchy*/
.MasterTable_Vista
table
{
border-left:2px solid #ededed;
border-bottom:1px solid #ededed;
}
.MasterTable_Vista
td:first-child,
.MasterTable_Vista
table td{overflow:visible !important}
*
html .MasterTable_Vista table{border-left-width:1px}
*+html
.MasterTable_Vista table{border-left-width:1px}
.MasterTable_Vista
.GridCommandRow_Vista table,
.MasterTable_Vista
.GridEditForm_Vista table,
.MasterTable_Vista
.GridRow_Vista table,
.MasterTable_Vista
.GridAltRow_Vista table
{
border:0;}
.GridHeader_Vista
,
.GridHeader_Vista
a
{
color:#333;
font-weight:normal;
text-decoration:none;
}
.GridRow_Vista
td,
.GridAltRow_Vista
td,
.GridEditRow_Vista
td
{
padding-top:3px;
padding-bottom:3px;
}
.GridRow_Vista
td,
.GridAltRow_Vista
td
{
border:1px solid;
border-color:#fcfcfc #fff #fcfcfc #ededed;
}
.GridRow_Vista
a,
.GridAltRow_Vista
a,
.SelectedRow_Vista
a,
.ActiveRow_Vista
a,
.GridEditRow_Vista
a,
.GridEditForm_Vista
a
{
color:#333;
}
.GridRow_Vista
.ResizeItem_Vista,
.GridAltRow_Vista
.ResizeItem_Vista
{
border-left:0;
padding-left:10px;
}
.SelectedRow_Vista
{
background:url(Grid/selectedBg.gif) 0 100% repeat-x #f6fbfd;
}
.SelectedRow_Vista
td
{
border-left:0;
border-right:0;
padding-left:10px;
padding-right:1px;
border-top:1px solid #99defd;
border-bottom:1px solid #99defd;
}
.GridRowOver_Vista
,
.ActiveRow_Vista
{
background:url(Grid/activeBg.gif) 0 100% repeat-x #f6fbfd;
}
.GridRowOver_Vista
td,
.ActiveRow_Vista
td,
.GridEditRow_Vista
td
{
border-left:0;
border-right:0;
padding-left:10px;
padding-right:1px;
border-top:1px solid #d8f0fa;
border-bottom:1px solid #d8f0fa;
}
.GridEditRow_Vista
{
background:url(Grid/activeBg.gif) repeat-x #e7f5fd;
}
.GridFooter_Vista
,
.RadGrid_Vista
.GridFooterDiv tr
{
color:#999;
}
.GridFooter_Vista
td
{
border-top:1px solid #dbe4e9;
padding-top:3px;
padding-bottom:3px;
padding-left:10px;
padding-right:1px;
}
.GridPager_Vista
{
/*background:url(Grid/pagerBg.gif) repeat-x #f1fbfe;*/
}
.GridPager_Vista
td
{
border-top:1px solid #9db6c5;
padding-top:3px;
padding-bottom:3px;
}
.GridPager_Vista
a
{
color:#333;
}
.PagerLeft_Vista
*,
.PagerRight_Vista
*,
.PagerCenter_Vista
*
{
vertical-align:middle;
}
.PagerLeft_Vista
,
.PagerRight_Vista
,
.sliderPagerLabel_Vista
{
line-height:17px;
padding-top:2px;
}
.GridPager_Vista
.radInput_Vista
{
vertical-align:middle;
}
.PagerLeft_Vista
{
float:left;
}
.PagerRight_Vista
,
.sliderPagerLabel_Vista
{
float:right;
padding-right:4px;
}
.GridPager_Vista
.radslider
{
float:left;
}
.GridPager_Vista
img
{
border:0;
}
.PagerCenter_Vista
{
display:block;
text-align:center;
}
.GroupPanel_Vista
,
.GridCommandRow_Vista
td
{
background:url(Grid/groupBg.gif) repeat-x #4b92aa;
border-top:1px solid #032941;
color:#fff;
font-weight:normal;
height:30px;
padding-top:0;
padding-bottom:0px;
}
.GroupPanel_Vista
{
font-weight:bold;
}
.GridCommandRow_Vista
td td
{
background:transparent none;
border-top:0;
height:27px;
}
.GridCommandRow_Vista
div
{
padding-top:0 !important;
padding-bottom:0 !important;
}
.GridCommandRow_Vista
a
{
color:#fff;
text-decoration:none;
}
.GridCommandRow_Vista
a img
{
vertical-align:bottom;
}
.GroupHeader_Vista
{
font-size:1.27em;
font-weight:bold;
background:url(Grid/groupHeaderBg.gif) left center repeat-x #fcfcfc;
color:#039;
}
.GroupHeader_Vista
td
{
padding:6px 11px 6px 0;
}
.GroupHeader_Vista
td p
{
display:inline;
padding:0 10px;
background:#fcfcfc;
}
.GroupHeader_Vista
td div div
{
top:-0.5em;
padding:0 15px;
background:#fcfcfc;
}
.GroupHeader_Vista
td div div div
{
top:0;
padding:0;
border:0;
}
.GridFilterRow_Vista
td
{
padding-top:4px;
padding-bottom:4px;
border-left:1px solid #ededed;
border-right:1px solid #fff;
}
.GridFilterRow_Vista
input
{
border:1px solid;
border-color:#abadb3 #dbdfe6 #e3e9ef #e2e3ea;
margin:0 4px 0 0;
}
.GridFilterMenu_Vista
{
cursor:default;
border:1px solid #979797 !important;
}
.GridFilterMenu_Vista
td
{
background:url(Grid/filterMenuSeparator.gif) repeat-y 22px 0 #f0f0f0;
}
.GridFilterMenu_Vista
table
{
border-collapse:separate;
}
.GridFilterMenu_Vista
td td
{
background:none transparent;
}
.GridFilterMenu_Vista
.GridFilterMenuSelectColumn_Vista,
.GridFilterMenu_Vista
.GridFilterMenuTextColumn_Vista
{
padding:4px 4px;
}
.GridFilterMenu_Vista
.GridFilterMenuSelectColumn_Vista
{
text-align:center;
/*border-right:1px solid #e2e3e3;*/
}
.GridFilterMenu_Vista
.GridFilterMenuTextColumn_Vista
{
color:#333;
/*border-left:1px solid #fff;*/
}
.GridFilterMenu_Vista
.GridFilterMenuHover_Vista
{
background:url(Grid/filterMenuHoverBg.gif) repeat-x #e3eff4;
}
.TopReorderIndicator_Vista
{
background: url(Grid/MoveDown.gif) no-repeat;
margin-left:-5px;
}
.BottomReorderIndicator_Vista
{
background: url(Grid/MoveUp.gif) no-repeat;
margin-left:-5px;
}
/*AJAX Loading*/
.GridLoadingTemplate_Vista
{
background:#fff !important;
font:normal 24px/54px arial,sans-serif;
color:#039;
}
/* rtl support */
.RadGridRTL_Vista
.GridHeader_Vista,
.RadGridRTL_Vista
td
{
text-align:right;
}
.RadGridRTL_Vista
.GridPager_Vista td
{
padding-right:11px;
padding-left:1px;
}
.RadGridRTL_Vista
.PagerLeft_Vista,
.RadGridRTL_Vista
.GridPager_Vista .radslider
{
float:right;
}
.RadGridRTL_Vista
.PagerRight_Vista,
.RadGridRTL_Vista
.sliderPagerLabel_Vista
{
float:left;
}
.RadGrid_Vista
.GridRow_Vista td,
.RadGrid_Vista
.GridAltRow_Vista td
{
border-bottom:1px solid #ededed;
}
Do I need to make any chnages to this? I had added the bit you send inside this.You can see that also in it.
Regards,
Jincu
Yes, you need to make one more change. Please replace
.MasterTable_Vista
{
border-collapse:separate !important;
}
with
.MasterTable_Vista ,
.DetailTable_Vista
{
border-collapse:separate !important;
}
By the way, I see that you are using an old version of the Vista skin. I recommend switching to the latest version, which is embedded in the Telerik.Web.UI assembly. The latest version has the above CSS code included out-of-the-box and contains a lot of improvements and optimizations as well. If you do this, you will only have to add the CSS rule for the horizontal gridlines somewhere in you web application:
.RadGrid_Vista .GridRow_Vista td,
.RadGrid_Vista .GridAltRow_Vista td
{
border-bottom:1px solid #ededed;
}
Hope everything is OK now.
All the best,
Dimo
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center
Rank 1
It is still not working, even after adding those lines.I am using the prometheus controls.Do I need to go to the latest version?
Regards,
Jincy
It is always recommended to upgrade to the latest version because it includes new features/enhancements/bugfix from which you can benefit. Hence I suggest you update your RadControls for ASP.NET AJAX version (formerly known as Prometheus) to 2008.1.415. Migration instructions can be found here.
Best regards,
Stephen
the Telerik team
Instantly find answers to your questions at the new Telerik Support Center