but didnt success althoug i follow the steps in tutorial
http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Styles/HeaderFooterPagerStyles/DefaultCS.aspx
and
http://www.telerik.com/help/aspnet-ajax/grdcreatingnewskins.html
please help me in this,
best regards,
Ahmad
5 Answers, 1 is accepted
We will need your graphic design and the CSS code/RadGrid declaration, which do not seem to work.
Sincerely yours,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
hi
i use telerik CSS
/*Telerik RadGrid Telerik Skin*/
/*global*/
.RadGrid_Telerik
{
background:#fff;
color:#333;
}
.RadGrid_Telerik
,
.MasterTable_Telerik
,
.DetailTable_Telerik
,
.GroupPanel_Telerik
table,
.GridEditForm_Telerik
table
{
font:11px arial,sans-serif;
}
.RadGrid_Telerik
,
.DetailTable_Telerik
{
border:1px solid #828282;
}
.MasterTable_Telerik
,
.DetailTable_Telerik
{
border-collapse:separate !important;
}
.GridRow_Telerik
td,
.GridAltRow_Telerik
td,
.GridEditRow_Telerik
td,
.GridFooter_Telerik
td,
.GridGroupFooter_Telerik
td,
.GridFilterRow_Telerik
td,
.GridHeader_Telerik
,
.ResizeHeader_Telerik
,
.GroupHeader_Telerik
td
{
padding-left:4px;
padding-right:4px;
}
.RadGrid_Telerik
.rgAdd,
.RadGrid_Telerik
.rgRefresh,
.RadGrid_Telerik
.rgEdit,
.RadGrid_Telerik
.rgDel,
.RadGrid_Telerik
.rgFilter,
.RadGrid_Telerik
.rgPagePrev,
.RadGrid_Telerik
.rgPageNext,
.RadGrid_Telerik
.rgExpand,
.RadGrid_Telerik
.rgCollapse,
.RadGrid_Telerik
.rgSortAsc,
.RadGrid_Telerik
.rgSortDesc,
.RadGrid_Telerik
.rgUpdate,
.RadGrid_Telerik
.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;
cursor:pointer;
}
.GroupPanelItems_Telerik
input,
.GridCommandRow_Telerik
img,
.GridHeader_Telerik
input,
.GridFilterRow_Telerik
img,
.GridPager_Telerik
img
{
vertical-align:middle;
}
/*header*/
.GridHeaderDiv_Telerik
{
background:#fff url('Grid/sprite.gif') 0 -300px repeat-x;
}
.GridHeader_Telerik
,
.ResizeHeader_Telerik
{
border-bottom:1px solid #828282;
padding-top:9px;
padding-bottom:8px;
background:#f4f4f4 url('Grid/sprite.gif') 0 0 repeat-x;
font-size:13px;
text-align:left;
}
.GridHeader_Telerik
,
.GridHeader_Telerik
a
{
color:#333;
text-decoration:none;
}
/*rows*/
.GridAltRow_Telerik
{
background:#efefef;
}
.GridRow_Telerik
td,
.GridAltRow_Telerik
td,
.GridEditRow_Telerik
td,
.GridFooter_Telerik
td,
.GridGroupFooter_Telerik
td
{
padding-top:4px;
padding-bottom:4px;
}
.GridRow_Telerik
a,
.GridAltRow_Telerik
a,
.GridEditRow_Telerik
a,
.GridFooter_Telerik
a,
.GridGroupFooter_Telerik
a,
.GridEditForm_Telerik
a
{
color:#333;
}
.GridRow_Telerik
td
{
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
.GridAltRow_Telerik
td
{
border-top:1px solid #efefef;
border-bottom:1px solid #efefef;
}
.SelectedRow_Telerik
{
background:#50a834 url('Grid/sprite.gif') 0 -1816px repeat-x;
}
.SelectedRow_Telerik
,
.SelectedRow_Telerik
a
{
color:#fff;
}
.ActiveRow_Telerik
,
.GridRowOver_Telerik
,
.GridEditRow_Telerik
.ActiveRow_Telerik
a,
.GridRowOver_Telerik
a,
.GridEditRow_Telerik
a
{
color:#208600;
}
.ActiveRow_Telerik
{
background:#d3f8c7;
}
.ActiveRow_Telerik
td
{
border-top:1px solid #87df6c;
border-bottom:1px solid #87df6c;
}
.GridRowOver_Telerik
,
.GridEditRow_Telerik
{
background:#a3db91 url('Grid/sprite.gif') 0 -1316px repeat-x;
}
.GridRowOver_Telerik
td,
.GridEditRow_Telerik
td
{
border-top:1px solid #87df6c;
border-bottom:1px solid #4ba82f;
}
.SelectedRow_Telerik
td
{
border-top:1px solid #186700;
border-bottom:1px solid #064c00;
}
/*footer*/
.GridFooter_Telerik
td,
.GridGroupFooter_Telerik
td
{
border-top:1px solid #828282;
}
/*status*/
.GridPager_Telerik
span
{
color:#666;
}
/*paging*/
.GridPager_Telerik
{
background:#e1e1e1 url('Grid/sprite.gif') 0 -600px repeat-x;
line-height:20px;
}
.GridPager_Telerik
td
{
border-top:1px solid #828282;
border-bottom:1px solid #f2f2f2;
padding:0 5px;
}
.GridPager_Telerik
div span,
.GridPager_Telerik
a,
.GridPager_Telerik
.sliderPagerLabel_Telerik
{
color:#333;
}
.PagerLeft_Telerik
{
float:left;
}
.PagerRight_Telerik
{
float:right;
}
.PagerCenter_Telerik
{
text-align:center;
}
.PagerCenter_Telerik
span
{
vertical-align:middle;
}
.RadGrid_Telerik
.rgPagePrev
{
background-position:5px -993px;
}
.RadGrid_Telerik
.rgPageNext
{
background-position:-21px -993px;
}
/*sorting, reordering*/
.GridHeader_Telerik
.rgSortAsc
{
background-position:-18px -929px;
height:12px;
}
.GridHeader_Telerik
.rgSortDesc
{
background-position:3px -929px;
height:12px;
}
.TopReorderIndicator_Telerik
,
.BottomReorderIndicator_Telerik
{
width:11px !important;
height:11px !important;
margin-left:-5px;
background:url('Grid/sprite.gif') 0 -900px no-repeat;
}
.BottomReorderIndicator_Telerik
{
background-position:-21px -900px;
}
/*filtering*/
.GridFilterRow_Telerik
{
background:#fff;
}
.GridFilterRow_Telerik
td
{
border-bottom:1px solid #828282;
padding-top:3px;
padding-bottom:5px;
}
.RadGrid_Telerik
.rgFilter
{
background-position:2px -1025px;
}
.GridFilterRow_Telerik
input[type="text"]
{
border:1px solid #828282;
font:12px arial,sans-serif;
color:#333;
vertical-align:middle;
}
/*grouping*/
.GroupPanel_Telerik
{
border-top:1px solid #b1b1b1;
border-bottom:1px solid #545454;
background:#7c7c7c url('Grid/sprite.gif') 0 -2316px repeat-x;
color:#fff;
}
.GroupPanel_Telerik
.rgSortAsc
{
background-position:-21px -862px;
}
.GroupPanel_Telerik
.rgSortDesc
{
background-position:4px -861px;
}
.GroupPanel_Telerik
td
{
border-bottom:1px solid #878787;
padding:6px 5px;
}
.GroupPanel_Telerik
td td
{
border:0;
padding:0;
}
.GroupHeader_Telerik
{
color:#48ae28;
font-size:12px;
}
.GroupHeader_Telerik
td
{
border-bottom:1px solid #75c45d;
padding-top:6px;
padding-bottom:3px;
}
.RadGrid_Telerik
.rgExpand
{
background-position:5px -1057px;
}
.RadGrid_Telerik
.rgCollapse
{
background-position:3px -1088px;
}
.GroupHeader_Telerik
td div
{
top:-0.6em;
}
.GroupHeader_Telerik
td div div
{
top:0;
}
/*editing*/
.GridEditForm_Telerik
{
border-bottom:1px solid #828282;
}
.GridEditForm_Telerik
input[type="text"],
.GridEditForm_Telerik
input[type="password"],
.GridEditForm_Telerik
textarea
{
border:1px solid #828282;
font:12px arial,sans-serif;
color:#333;
}
.RadGrid_Telerik
.rgUpdate
{
background-position:3px -1249px;
}
.RadGrid_Telerik
.rgCancel
{
background-position:3px -1280px;
}
/*hierarchy*/
.DetailTable_Telerik
{
border-right:0;
}
/*command row*/
.GridCommandRow_Telerik
{
background:#2aa404 url('Grid/sprite.gif') 0 -2614px repeat-x;
color:#fff;
}
.GridCommandRow_Telerik
td
{
border:0;
border-top:1px solid #79c262;
border-bottom:1px solid #186500;
padding:0;
}
.GridCommandRow_Telerik
td td
{
border:0;
padding:3px 5px;
}
.GridCommandRow_Telerik
td td td
{
padding:1px;
}
.GridCommandRow_Telerik
table
{
border:0;
border-bottom:1px solid #47b127;
}
.GridCommandRow_Telerik
table table
{
border:0;
}
.GridCommandRow_Telerik
a
{
color:#fff;
text-decoration:none;
}
.RadGrid_Telerik
.rgAdd
{
background-position:0 -1220px;
}
.RadGrid_Telerik
.rgRefresh
{
background-position:0 -1124px;
}
.RadGrid_Telerik
.rgEdit
{
background-position:0 -1155px;
}
.RadGrid_Telerik
.rgDel
{
background-position:0 -1188px;
}
/*loading*/
.LoadingPanel_Telerik
{
background:#efefef url('Grid/loading.gif') center center no-repeat;
}
/*multirow select*/
.GridRowSelector_Telerik
{
background:#555 !important;
}
/*row drag n drop*/
.GridItemDropIndicator_Telerik
{
border-top:1px dashed #666;
}
/*rtl*/
.RadGridRTL_Telerik
.GridHeader_Telerik,
.RadGridRTL_Telerik
.ResizeHeader_Telerik
{
text-align:right;
}
.RadGridRTL_Telerik
.PagerLeft_Telerik,
.RadGridRTL_Telerik
.GridPager_Telerik .radslider
{
float:right;
}
.RadGridRTL_Telerik
.PagerRight_Telerik
{
float:left;
}
OK, and what are you trying to accomplish? Please, be more specific.
Greetings,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Rank 1
hello telerik
the problem is i try to create customize css for grid.
i solve it by put skin="" in property of grid
now i am try to creat css for
EditFormSettings
how i can create it ?
You have two options:
1) Use Skin="" and set the CssClass at runtime:
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
if (e.Item is GridEditableItem && e.Item.IsInEditMode)
{
(e.Item as GridEditableItem).CssClass = "MyEditClass";
}
}
This will add a CSS class to the table row, which contains the edit form. Afterwards, you can add styles to the row and its content according to your preference.
2) Use a custom Skin="MySkinName" and EnableEmbeddedSkins="false". In this case the edit form is wrapped in a <div> element with a CSS class
GridEditForm_MySkinName
which you can use to style the edit form. In case you are using inline editing, the CSS class of the edit row is
GridEditRow_MySkinName
Kind regards,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.