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

CssClass at design time

12 Answers 279 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Prathibarani
Top achievements
Rank 1
Prathibarani asked on 19 Mar 2013, 05:05 PM
Hi,

We are using other 3rd party grids for our asp.net web application. We are in the process of testing Telerik RadGrid. Currently, what we are doing is we have grid.css (custom CSS class) at global location which has all the details of styling. This way, we do not need to set styles at element level. For this, what we did is we checked how vendor grid is rendered and then defined styles like this:

caption

 

h2 {

 

 

text-align: left;

 

 

margin: 15px 0 2px 0;

 

 

padding: 15px 0 2px 0;

 

 

line-height: 1.1em;

 

}

caption

 

p {

 

 

text-align: left;

 

 

margin: 1px 0 2px 0;

 

 

padding: 1px 0 2px 0;

 

 

line-height: 1em;

 

}

 

td

 

table th /* styling for grid header row */

 

{

 

padding: .1em .1em .1em .4em;

 

 

vertical-align: top;

 

 

text-align: center;

 

 

border: 1px solid white;

 

 

background-color: #e2dbc8; /*#f0ece3;*/

 

}

td

 

table td /* styling for grid data rows */

 

{

 

padding: .1em .1em .1em .4em;

 

 

vertical-align: top;

 

 

font-size: .85em;

 

 

text-align: left;

 

 

border: 1px solid white;

 

 

background-color: #f0ece3;

 

}

tr.altrow

 

td, .altrow{ background-color: #e2dbc8; }

 

.gridframe

 

{ border: none;}

 


and set the grid style property to this css file like this :

StyleSetPath

 

="~/grid.css"

So, with radgrid, I would like to achieve the same thing instead of dealing at grid level or element within grid. We have many pages using grid. So, I prefer not to do it at grid level. Please let me know how to do this.
I appreciate your response.

Prathiba

 

12 Answers, 1 is accepted

Sort by
0
J
Top achievements
Rank 1
answered on 19 Mar 2013, 05:16 PM
If you go to the folder where you have Telerik ASP.NET installed and then go to the Skins folder (in my case:  C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2013\Skins).  There is a file there called Grid.CSS (or go into one of the theme folders and get the Grid.THEMENAME.CSS file from there).  You can create a new CSS file using the contents of the provided one and name it something more specific like 'RADGrid.css', import the style sheet on the page.  Then, just modify this new 'RADGrid.CSS' file to adhere to the styling you'd want and can then be implemented in any other pages that use the Telerik grid.

You may also need to set EnableEmbeddedSkins to False to achieve full customization.
0
Prathibarani
Top achievements
Rank 1
answered on 19 Mar 2013, 06:52 PM

Hi Juan,

Thanks for response. Please clarify me on this:

1) STEP1 - I went to location C:\Program Files (x86)\Telerik\RadControls for ASP.NET AJAX Q1 2013\Skins.
2)  STEP 2   - I saw a file called Grid.CSS
3)  STEP 3  -  Created a new file with name RADGrid.CSS and copied the contents of Grid.CSS. Where should I save this file. In local project or in 
                            the path mentioned in STEP 1.

4) STEP 4 - How can I import style sheet on the page ? Is there a property to set in RadGrid at design time
5) STEP 5 - Modify RadGrid.css to the style I want - you mean to say STEP 3 file modification ?
6) STEP 6 - Where should I store so that all pages that use RadGrid can access it.

Thanks,
Prathiba.

0
J
Top achievements
Rank 1
answered on 19 Mar 2013, 07:29 PM
Step 3)  Store the new CSS file in your project/web folder.  Wherever you want.  Store it in the same place your current Grid.css file is.
Step 4)  Add the following to your ASCX/ASPX file (no need to do anything special to the grid; the CSS file already has the grid class names that get generated by it):
<link href="MyCSSFolderpath/RADGrid.css" rel="Stylesheet" />

Step 5) Yes, modify the new RADGrid.CSS file so that it uses the styling you want (e.g. change the background color and header images, etc...).
Step 6) Usually I have a dedicated folder for my shared CSS files under the root of the web site (for example: C:\Inetpub\wwwroot\MyWebSite\Styles).  Then, update the stylesheet declaration from Step 4 so that it uses a relative address that is correct for the page using it.  So, if your web page is in 'C:\Inetpub\wwwroot\MyWebSite\MySubPortal\SomeFolder\WebPage.aspx' and your style sheet is in 'C:\Inetpub\wwwroot\MyWebSite\Styles\RADGrid.css', the css declaration line would be:
<link href="../../Styles/RADGrid.css" rel="Stylesheet" />

Hope that helps.
0
J
Top achievements
Rank 1
answered on 19 Mar 2013, 07:38 PM
Also, on your grid's properties, you MIGHT need make sure you set the following for this approach to fully apply your styling to the grid (I had to):

First try:  EnableEmbeddedSkins="false"
If it still gives you issues, add: EnableTheming="false"
0
Prathibarani
Top achievements
Rank 1
answered on 20 Mar 2013, 04:34 PM
Hi Juan,
Thanks for immediate reply. I did as you suggested.
Copied grid.css to local project. Renamed it to RadGrid.css. I set the EnableEmbedded skins to false. I modified RadGrid.css file to this:
I kept everything as is in the file and added at the end like this:
/* styling for grid header row */

.RadGrid

 

 

.rgHeader

 

{

 

 

padding-left: .1em !important;

 

 

 

padding-right:.1em !important;

 

 

 

padding-top: .1em !important;

 

 

 

padding-bottom:.1em !important;

 

 

 

vertical-align: top !important;

 

 

 

text-align: center !important;

 

 

 

border: 1px solid white !important;

 

 

 

background-color: red !important;

 

}



On apsx page I included link like this:

<

 

 

head runat="server">

 

 

 

<link href="~/CSS/RadGrid.css"rel="Stylesheet"/>

 

 

 

<title></title>

 

</

 

 

head>

 


When I switch to design time I see background color of header row as red. When I run the project locally, grid header row is not changed to red. Since we set enableembeddedskins to false, lost all styling of grid.

what should I do
Thanks,
Prathiba
0
Accepted
J
Top achievements
Rank 1
answered on 20 Mar 2013, 04:49 PM
What happens if you leave enableembeddedskins set to True?  Here is an example of what I did which uses a built-in skin but then overrides parts of it so that it displays how I needed it to:

<telerik:RadGrid ID="grdItems" runat="server" AllowAutomaticDeletes="True" AllowSorting="True"
    PageSize="12" AutoGenerateColumns="False" OnNeedDataSource="grdItems_NeedDataSource"
    OnItemCommand="grdItems_ItemCommand" OnPreRender="grdItems_PreRender" OnUpdateCommand="grdItems_UpdateCommand"
    Width="456px" OnDeleteCommand="grdItems_DeleteCommand" OnEditCommand="grdItems_EditCommand"
    OnItemDataBound="grdItems_ItemDataBound" ShowStatusBar="True" AllowAutomaticInserts="True"
    AllowAutomaticUpdates="True" OnItemCreated="grdItems_ItemCreated" Skin="Metro"
    BorderStyle="None" CellSpacing="0" GridLines="None" ForeColor="White" BackColor="Transparent"
    ShowFooter="True" AllowMultiRowEdit="True">
    <ValidationSettings ValidationGroup="ItemsGrid" />
    <ClientSettings AllowKeyboardNavigation="True">
        <Selecting AllowRowSelect="True" />
        <KeyboardNavigationSettings AllowSubmitOnEnter="True" AllowActiveRowCycle="True" />
        <Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />
        <ClientEvents OnKeyPress="OnKeyPress" OnRowSelected="RowSelected" OnRowClick="RowClick"
            OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" OnCommand="GridCommand" />
        <Resizing ShowRowIndicatorColumn="False" />
    </ClientSettings>
    <AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />
    <EditItemStyle BackColor="Gainsboro" BorderStyle="None" />
    <FooterStyle BorderStyle="None" />
    <HeaderStyle BorderStyle="None" Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" />
    <ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />
    <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
    <SelectedItemStyle BorderStyle="None" />
    <FilterMenu EnableImageSprites="False" />
    <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
    <MasterTableView NoMasterRecordsText="No items to display." EditMode="InPlace"
        CommandItemDisplay="None" BorderStyle="None" BackColor="Transparent" ShowFooter="False">
        <HeaderStyle BorderStyle="None" Font-Bold="True" Font-Size="Medium" ForeColor="White"
            Height="48px" HorizontalAlign="Left" VerticalAlign="Middle" Wrap="True" />
        <CommandItemStyle CssClass="rgCommandRow" />
        <FooterStyle BorderStyle="None" CssClass="grid-footer" />
        <CommandItemTemplate>
            <div>
                <asp:LinkButton ID="btnRemoveSelected" runat="server" CommandName="RemoveSelected">
                    <img style="border:0px;vertical-align:middle;" alt="Remove Selected Items" src="Images/GradientCancel_32x32.png" />  Remove Selected Items</asp:LinkButton>  
             </div>
        </CommandItemTemplate>
        <CommandItemSettings ExportToPdfText="Export to PDF" ShowRefreshButton="False" AddNewRecordText="Add Item">
        </CommandItemSettings>
        <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>
        <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
            <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        <EditFormSettings EditFormType="Template">
            <EditColumn FilterControlAltText="Filter EditCommandColumn column" CancelImageUrl="Cancel.gif"
                InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" Visible="true" Display="true">
            </EditColumn>
        </EditFormSettings>
        <ItemStyle BackColor="White" BorderStyle="None" ForeColor="Black" />
        <AlternatingItemStyle BackColor="LightGray" BorderStyle="None" ForeColor="Black" />
        <EditItemStyle BackColor="Gainsboro" BorderStyle="None" />
        <PagerStyle PageSizeControlType="RadComboBox"></PagerStyle>
        <Columns>
            <telerik:GridCheckBoxColumn ConvertEmptyStringToNull="False"
                FilterControlAltText="Filter checked column" SortExpression="Checked"
                UniqueName="Checked">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="32px" CssClass="grid-header grid-header-first" />
                <ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />
            </telerik:GridCheckBoxColumn>
            <telerik:GridNumericColumn DataField="Quantity" DataType="System.Int16"
                DecimalDigits="0" DefaultInsertValue="1"
                FilterControlAltText="Filter Quantity column" HeaderText="Quantity"
                ShowSortIcon="False" SortExpression="Quantity" UniqueName="Quantity">
                <HeaderStyle CssClass="grid-header" HorizontalAlign="Left" Width="80px" Wrap="False" />
                <ItemStyle HorizontalAlign="Center" Width="100%" VerticalAlign="Top" />
            </telerik:GridNumericColumn>
            <telerik:GridBoundColumn DataField="Item" HeaderText="Item" UniqueName="Item"
                ConvertEmptyStringToNull="False" EmptyDataText="" SortExpression="Item"
                ShowSortIcon="False" ReadOnly="True">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="180px" CssClass="grid-header" />
                <ItemStyle HorizontalAlign="Left" Width="100%" VerticalAlign="Top" />
            </telerik:GridBoundColumn>
            <telerik:GridBoundColumn ConvertEmptyStringToNull="False" DataField="Category" EmptyDataText=""
                FilterControlAltText="Filter Category column" HeaderText="Category" SortExpression="Category"
                UniqueName="Category" ReadOnly="True">
                <HeaderStyle CssClass="grid-header" Width="80px"  />
                <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />
            </telerik:GridBoundColumn>
            <telerik:GridNumericColumn dataFormatString="{0:$###,##0.00}" DataField="Price"
                DataType="System.Decimal" NumericType="Currency"
                HeaderText="Price" SortExpression="Price" UniqueName="Price" Aggregate="Sum"
                FooterAggregateFormatString="{0:C}" ReadOnly="True">
                <HeaderStyle CssClass="grid-header" Width="60px"  />
                <ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100%" />
            </telerik:GridNumericColumn>
            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" FilterControlAltText="Filter DeleteColumn column"
                ImageUrl="Images/305_Close_16x16_72.png" Text="" UniqueName="DeleteColumn" Resizable="false"
                ConfirmText="Remove this item?" ConfirmDialogType="RadWindow" ConfirmTitle="Remove"
                ShowInEditForm="True">
                <HeaderStyle Wrap="False" HorizontalAlign="Left" Width="24px" CssClass="grid-header grid-header-last">
                </HeaderStyle>
                <ItemStyle Width="100%" HorizontalAlign="Right" VerticalAlign="Top" />
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

The following CSS is really long but it won't let me attach it, so here it is in code view:

html .RadGrid .rgMasterTable .rgRow .CustomClass,
html .RadGrid .rgMasterTable .rgAltRow .CustomClass, td, tr
{
    border:none !important;
    border-color: transparent !important;
}
 
 .radgrid .rgMasterTable .rgActiveCell {
  border: none !important; }
 
.radgrid .rgSelectedRow td {
  border: none !important; }
   
  .radgrid .rgActiveRow td.rgSorted,
  .radgrid .rgSelectedRow td.rgSorted {
    border: none !important; }
 
.radgrid .rgPager .rgPagerButton {
  border: none !important;
  background: transparent;
  color: #fff;
  font: 12px/12px "segoe ui", arial, sans-serif; }
 
.radgrid .rgNumPart a.rgCurrentPage {
border: none !important;
background: transparent; }
     
.radgrid .rgNumPart a.rgCurrentPage:hover {
border: none !important;
background: transparent; }
 
.RadMenu_Metro .rgHCMFilter {
  /* border-color: #7e7e7e; */
  border-color: transparent;
  background: transparent;
  color: #000;
  font-family: "segoe ui",arial,sans-serif;
  /* -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0; */ }
 
.radgrid .rgGroupPanel caption {
background: transparent;
color: white; }
 
.grid-header
{
    background: url("Images/black-header-bg.jpg") repeat-x scroll 0 0 transparent;
    color: white !important;
    text-decoration: none !important;
}
 
.rgCommandCell a
{
    text-decoration: none !important;
    font-weight: bold !important;
    color: White !important;
    padding: 5px 5px;
    text-align: left
}
 
.rgCommandRow
{
    background: url("Images/black-header-bg-flipv.jpg") repeat-x scroll 0 0 transparent;
    /* -moz-border-radius: 0 0 10px 10px !important;
    -webkit-border-radius: 0 0 10px 10px !important;
    border-radius: 0 0 10px 10px !important; */
    height: 42px;
}
 
.rgDataDiv
{
    background-color: dimgrey;
}
 
.radgrid, .rgHeaderWrapper
{
    -moz-border-radius: 10px 10px 0 0 !important;
    -webkit-border-radius: 10px 10px 0 0 !important;
    border-radius: 10px 10px 0 0 !important;
}
 
.grid-footer
{
    -moz-border-radius: 0 0 10px 10px !important;
    -webkit-border-radius: 0 0 10px 10px !important;
    border-radius: 0 0 10px 10px !important;
}
 
 .grid-header-first
{
    -moz-border-radius: 10px 0 0 0 !important;
    -webkit-border-radius: 10px 0 0 0 !important;
    border-radius: 10px 0 0 0 !important;
}
 
.grid-header-last
{
    -moz-border-radius: 0 10px 0 0 !important;
    -webkit-border-radius: 0 10px 0 0 !important;
    border-radius: 0 10px 0 0 !important;
}
 
table
{
    border-collapse: collapse;
    border-spacing: 0;
}
 
.tableHeader
{
    color: #800000;
    font-family: Verdana, Arial, Helvetica, "Arial Black", sans-serif;
    font-size: 10px;
    font-weight: bold;
}
 
.radgrid, .radgrid a, .radgrid input {
    color: white; }
     
  .radgrid,
  .radgrid .rgMasterTable,
  .radgrid .rgDetailTable,
  .radgrid .rgGroupPanel table,
  .radgrid .rgCommandRow table,
  .radgrid .rgEditForm table,
  .radgrid .rgPager table {
    font-weight: 100;
    font-size: 16px;
    line-height: 34px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
     
  .radgrid .rgHeader:first-child,
  .radgrid th.rgResizeCol:first-child,
  .radgrid .rgFilterRow > td:first-child,
  .radgrid .rgRow > td:first-child,
  .radgrid .rgAltRow > td:first-child {
    /* border-left-width: 0; */
    padding-left: 8px; }
     
  .radgrid .rgUpdate,
  .radgrid .rgCancel,
  .radgrid .rgEdit,
  .radgrid .rgDel,
  .radgrid .rgExpand,
  .radgrid .rgCollapse,
  .radgrid .rgFilter,
  .radgrid .rgAdd,
  .radgrid .rgRefresh,
  .radgrid .rgSortAsc,
  .radgrid .rgSortDesc,
  .radgrid .rgUngroup,
  .radgrid .rgPagePrev,
  .radgrid .rgPageNext,
  .radgrid .rgPageFirst,
  .radgrid .rgPageLast {
    background-image: url('Common/radActionsSprite.png');
    width: 21px;
    height: 21px; }

  .radgrid th.rgSorted {
    background-color: #0082cc; }
          
  .radgrid .rgAltRow {
    background: #191919;
    border-color: transparent;
    /* border-color: #191919; */ }
     
  .radgrid .rgAltRow td {
    /* border-color: #191919;  */
    border-color: transparent; }
     
  .radgrid .rgHoveredRow {
    background: #383838;
    color: white; }
     
     
    .radgrid .rgHoveredRow td {
      /* border-color: #383838;  */
      border-color: transparent;
      }
       
    .radgrid .rgHoveredRow a {
      color: white; }
       
  .radgrid td.rgSorted {
    background: #191919;
    /* border-color: #191919; */
    border-color: transparent;
    color: white; }
     
  .radgrid .rgAltRow .rgSorted {
    background: #2b2b2b;
    border-color: transparent;
    /* border-color: #2b2b2b; */ }
     
  .radgrid .rgEditRow {
    background: #4e4e4e; }
     
  .radgrid .rgDrag {
    background-image: url('Grid/rgDrag.gif');
    width: 25px;
    height: 25px; }
     
   .radgrid .rgFooter td,
  .radgrid .rgFooterWrapper {
    /* border-top: 1px solid;
    border-color: #999999 #e4e4e4;  */
    border-color: transparent;
    }
     
  .radgrid .rgPager .rgStatus {
    /* border: solid;
    border-color: #4e4e4e;
    border-width: 1px 0 0 0; */
    border-color: transparent;
     }
     
     
  .radgrid .rgStatus div {
    background-image: url('Common/loading_small.gif');
    width: 40px; }
     
     
  .radgrid td.rgPagerCell
  {
    border-color: transparent;
    /* border: solid;
    border-color: #4e4e4e;
    border-width: 1px 0 0 1px; */ }
     
     
  .radgrid .rgPager > td > table {
    height: 50px; }
     
  .radgrid .rgPager .riTextBox {
    height: 29px;
    height: 29px; }
     
  .radgrid .rgPager .riSingle .riTextBox {
    height: 36px; }
     
  .radgrid .rgInfoPart {
    color: #777; }
     
  .radgrid .rgInfoPart strong {
    color: white; }
     
  .radgrid .rgWrap {
    line-height: 34px; }
     
  .radgrid .rgPagePrev,
  .radgrid .rgPageNext,
  .radgrid .rgPageFirst,
  .radgrid .rgPageLast {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    width: 30px;
    height: 30px;
    /* border: 1px solid #4e4e4e; */
    background-color: #222222; }
     
  .radgrid .rgPageFirst {
    background-position: -111px -311px; }
     
  .radgrid .rgPagePrev {
    background-position: -111px -111px; }
     
  .radgrid .rgPageNext {
    background-position: -111px -161px; }
     
  .radgrid .rgPageLast {
    background-position: -111px -361px; }
     
  .radgrid .rgPager .rgPagerButton {
    /* border-color: #4e4e4e; */
    border-color: transparent;
    background: #222222;
    color: white;
    height: 36px;
    font-weight: 100;
    font-size: 16px;
    line-height: 34px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif; }
     
  .radgrid .rgNumPart a {
    /* border: 1px solid black; */
    line-height: 28px;
    min-width: 28px;
    padding: 0;
    color: white;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    text-align: center; }
     
  .radgrid .rgNumPart span {
    float: none;
    padding: 0; }
     
  .radgrid .rgPager .riTextBox {
    vertical-align: top; }
     
  .radgrid .rgHeader .rgSortAsc,
  .radgrid .rgHeader .rgSortDesc {
    height: 10px;
    float: left;
    margin: 12px 2px 0 0; }
     
  .radgrid .rgHeader .rgSortAsc {
    background-position: -120px -20px; }
     
  .radgrid .rgHeader .rgSortDesc {
    background-position: -120px -70px; }
          
  .radgrid .rgFilter {
    width: 36px;
    height: 36px;
    background-position: -107px -3507px;
    /* border: 1px solid #4e4e4e; */ }
     
  .radgrid .rgFilterActive,
  .radgrid .rgFilterActive:hover {
    background-position: -57px -3507px; }
     
  .radgrid .rgFilterBox {
    /* border-color: #4e4e4e; */
    background-color: black;
    font-weight: 100;
    font-size: 16px;
    line-height: 34px;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    color: white;
    height: 29px; }
     
  .radgrid .rgFilterRow .riSingle .riTextBox {
    height: 36px;
    vertical-align: top; }
     
  .radgrid .rgGroupPanel {
    /* border: 0;
    border-bottom: 1px solid #333333; */
    padding: 10px;
    height: 34px; }
     
  .radgrid .rgGroupPanel td {
    /* border: 0; */
    padding: 3px 4px; }
     
  * + html .radgrid .rgGroupPanel td td {
    line-height: 20px; }
     
  .radgrid .rgGroupPanel .rgSortAsc {
    background-position: -114.5px -14.5px; }
     
  .radgrid .rgGroupPanel .rgSortDesc {
    background-position: -114.5px -64.5px; }
     
  .radgrid .rgUngroup {
    background-position: -114.5px -2664.5px; }
     
  .radgrid .rgGroupItem {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    /*border: 1px solid #333333; */
    color: white;
    padding: 0 5px 1px 10px; }
     
  .radgrid .rgMasterTable td.rgGroupCol,
  .radgrid .rgMasterTable td.rgExpandCol {
    /* border-color: black;
    border-right: 1px solid #333333; */
    background-color: black;
    border-color: transparent;
    }
     
  .radgrid .rgGroupHeader td {
    padding: 0;
    /* border-bottom: 1px solid #333333;
    border-top: 1px solid #333333; */ }
     
  .radgrid .rgGroupHeader {
    font-size: 1.1em;
    line-height: 34px;
    color: white; }
     
  .radgrid .rgExpand {
    background-position: -112px -168px; }
     
  .radgrid .rgCollapse {
    background-position: -62px -68px; }
     
  .radgrid .rgUpdate {
    background-position: -12px -2112px; }
     
    .radgrid .rgUpdate:active {
      background-position: -112px -2112px; }
       
  .radgrid .rgCancel {
    background-position: -12px -2212px; }
     
    .radgrid .rgCancel:active {
      background-position: -112px -2212px; }
       
  .radgrid .rgDetailTable
  {
    border-color: transparent;
    /* border-color: #4e4e4e; */ }
     
  .radgrid .rgCommandRow,
  .radgrid .rgCommandRow a {
    text-decoration: none; }
     
  .radgrid .rgCommandCell {
    /* border: 0;
    border-bottom: 1px solid #4e4e4e; */
    padding: 0; }
       
  .radgrid .rgCommandTable td {
    /* border: 0; */
    padding: 2px 7px; }
      
  .radgrid .rgAdd,
  .radgrid .rgRefresh {
    vertical-align: middle; }
     
  .radgrid input.rgAdd,
  .radgrid input.rgRefresh {
    margin-right: 3px;
    width: 28px;
    height: 28px; }
     
  .radgrid input.rgAdd {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    /* border: 1px solid white; */
    background-position: -112px -2312px; }
     
  .radgrid input.rgRefresh {
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    /* border: 1px solid white; */
    background-position: -112px -1012px; }
     
  .radgrid .rgEdit {
    margin-right: 3px;
    background-position: -112px -2412px; }
     
  .radgrid .rgDel {
    margin-right: 3px;
    background-position: -112px -2612px; }
     
  .radgrid .rgExpXLS,
  .radgrid .rgExpDOC,
  .radgrid .rgExpPDF,
  .radgrid .rgExpCSV {
    background-image: url('../Common/Grid/export.gif'); }
     
  .radgrid .rgExpXLS {
    background-position: 0 0; }
     
  .radgrid .rgExpDOC {
    background-position: 0 -50px; }
     
  .radgrid .rgExpPDF {
    background-position: 0 -100px; }
     
  .radgrid .rgExpCSV {
    background-position: 0 -150px; }
 
.radgrid .rgHeader:first-child,
.radgrid th.rgResizeCol:first-child,
.radgrid .rgFilterRow > td:first-child,
.radgrid .rgRow > td:first-child,
.radgrid .rgAltRow > td:first-child {
  /* border-left-width: 1px; */
  padding-left: 7px; }
   
.radgrid .rgPageFirst {
  background-position: -11px -361px; }
   
.radgrid .rgPageFirst:active {
  background-position: -111px -361px; }
   
.radgrid .rgPagePrev {
  background-position: -11px -161px; }
   
.radgrid .rgPagePrev:active {
  background-position: -111px -161px; }
   
.radgrid .rgPageNext {
  background-position: -11px -111px; }
   
.radgrid .rgPageNext:active {
  background-position: -111px -111px; }
   
.radgrid .rgPageLast {
  background-position: -11px -311px; }
   
.radgrid .rgPageLast:active {
  background-position: -111px -311px; }
   
.radgrid .rgExpand {
  background-position: -12px -112px; }


Attached is a screenshot of the resulting grid display.

I had to use a mix of an embedded skin and custom CSS to get the full result.  Hope that helps.
0
Prathibarani
Top achievements
Rank 1
answered on 20 Mar 2013, 06:49 PM
Thanks Juan. I tried setting the property to true. When true, it shows default style. I will take a look at your code and get back to you.

Prathiba
0
Prathibarani
Top achievements
Rank 1
answered on 22 Mar 2013, 09:53 PM
Juan,
I am still working on it. I may need some more help. So, waiting.

Thanks,
Prathiba
0
Prathibarani
Top achievements
Rank 1
answered on 01 Apr 2013, 03:31 PM
Juan,
I copied Default skin to local project and modifed according and added the reference to it in master page. It is working as expected.

Thanks,
Prathiba
0
J
Top achievements
Rank 1
answered on 01 Apr 2013, 03:45 PM
Awesome.  Glad I could help.  :)
0
Syan
Top achievements
Rank 1
answered on 30 Sep 2019, 04:55 AM
how to override master css property on local page AJAAX Grid?
0
Rumen
Telerik team
answered on 02 Oct 2019, 01:13 PM

Hi Vikas,

Can you explain what do you want to achieve and what do you call a master css property on a local page?

Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Prathibarani
Top achievements
Rank 1
Answers by
J
Top achievements
Rank 1
Prathibarani
Top achievements
Rank 1
Syan
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or