CssClass at design time

13 posts, 1 answers
  1. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    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

     

  2. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    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.
  3. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 19 Mar 2013 Link to this post

    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.

  4. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    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.
  5. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 19 Mar 2013 Link to this post

    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"
  6. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    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
  7. Answer
    J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 20 Mar 2013 Link to this post

    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.
  8. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 20 Mar 2013 Link to this post

    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
  9. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 22 Mar 2013 Link to this post

    Juan,
    I am still working on it. I may need some more help. So, waiting.

    Thanks,
    Prathiba
  10. Prathibarani
    Prathibarani avatar
    55 posts
    Member since:
    Mar 2013

    Posted 01 Apr 2013 Link to this post

    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
  11. J
    J avatar
    103 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2013 Link to this post

    Awesome.  Glad I could help.  :)
  12. Syan
    Syan avatar
    15 posts
    Member since:
    Feb 2015

    Posted 29 Sep Link to this post

    how to override master css property on local page AJAAX Grid?
  13. Rumen
    Admin
    Rumen avatar
    14105 posts

    Posted 02 Oct Link to this post

    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.
Back to Top