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

Grid style for radcontrols for asp.net ajax

5 Answers 75 Views
Grid
This is a migrated thread and some comments may be shown as answers.
aabdan
Top achievements
Rank 1
aabdan asked on 25 Aug 2008, 12:27 PM
i am trying to change grid style to new one(i created it)
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

Sort by
0
Dimo
Telerik team
answered on 25 Aug 2008, 12:45 PM
Hello Ahmad,

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.
0
aabdan
Top achievements
Rank 1
answered on 26 Aug 2008, 04:46 AM

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;

}

0
Dimo
Telerik team
answered on 26 Aug 2008, 08:26 AM
Hello Ahmad,

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.
0
aabdan
Top achievements
Rank 1
answered on 26 Aug 2008, 09:28 AM

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 ?

0
Dimo
Telerik team
answered on 28 Aug 2008, 01:08 PM
Hello Ahmad,

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.
Tags
Grid
Asked by
aabdan
Top achievements
Rank 1
Answers by
Dimo
Telerik team
aabdan
Top achievements
Rank 1
Share this question
or