How to Override Telerik RadGrid CSS

If you use Telerik’s RadGrid but don’t want to use the default styling template, there’s a quick way to apply your own CSS style to it. This may not be as sophisticated as using the skinning feature, but it surely does the trick.

The first thing we need to do is to write the custom css style, then assign it to CssClass attribute within the RadGrid markup. We also need to add Skin attribute with an empty value.

So we’re going to create the custom CSS first, then add the two attributes on the RadGrid Control markup as shown in the example below:

Create Custom CSS

RadGrid is rendered as an HTML table on the ASP.NET page, so make sure you style it as a table element. In this example, we’ll name our CssClass element rgview.

<style type="text/css">
    .rgview table
    {
        border-collapse: collapse;
        background: #ebf1de;
    }
    .rgview th, .rgview td
    {   
        padding: 4px 8px;
    }
    .rgview th
    {            
        background-color: #8064a2;
        color: #fff;
        border: 1px solid #ccc;
    }
    .rgview th a
    {
        color: #fff;
        text-decoration: none;
    }
    .rgview tr:hover
    {   
        background: #d8e4bc;
    }
    .rgview td
    {
        border: 1px solid #ccc;            
    }
</style>

Add Markup Attributes

Add Skin=”” and assign the css to CssClass attribute. See the highlighted section.

<telerik:RadGrid ID="RadGrid1" runat="server" CellSpacing="0"
    DataSourceID="dsITNota"
    GridLines="None"
    AllowPaging="true" 
    AutoGenerateColumns="false" 
    ShowStatusBar="true"
    OnItemUpdated="RadGrid1_ItemUpdated" 
    OnItemCommand="RadGrid1_ItemCommand" 
    OnPreRender="RadGrid1_PreRender"
    CssClass="rgview" Skin="">
    
   ...

</telerik:RadGrid>

That’s all there is to it. Here are the screenshots to show the difference between the default and custom style.

Default

Custom