Grid style for radcontrols for asp.net ajax

6 posts, 0 answers
  1. aabdan
    aabdan avatar
    26 posts
    Member since:
    Apr 2007

    Posted 25 Aug 2008 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 25 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. aabdan
    aabdan avatar
    26 posts
    Member since:
    Apr 2007

    Posted 25 Aug 2008 Link to this post

    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;

    }

  5. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 26 Aug 2008 Link to this post

    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.
  6. aabdan
    aabdan avatar
    26 posts
    Member since:
    Apr 2007

    Posted 26 Aug 2008 Link to this post

    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 ?

  7. Dimo
    Admin
    Dimo avatar
    8331 posts

    Posted 28 Aug 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017