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.
AMPACK says
Hello there! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!
Bar says
WhatHappening i am new to this, I stumbled upon this I have discovered It positively helpful and it has helped me out loads. I’m hoping to contribute & help other customers like its helped me. Good job.
Zine Aissaoui says
nice job, and pager style?
disque en aluminium says
Howdy just wanted to give you a quick heads up. The words in your content seem to be running off the screen in Firefox. I’m not sure if this is a formatting issue or something to do with internet browser compatibility but I figured I’d post to let you know. The design look great though! Hope you get the problem resolved soon. Thanks
_ says
Fantastic! works a charm thank you very much for posting!
platt says
You’re welcome 🙂
Jeff Meyer says
Thank-you VERY much for this post. Pesky Radgrids, and their collapsing empty table cells…
platt says
Hi Jeff, I’m glad it helped. Thanks for the feedback.