GridView - how to fancy it up?

  • Thread starter Thread starter Keith G Hicks
  • Start date Start date
K

Keith G Hicks

Out of the box, the asp.net 2.0 GridView is very plain. Even the AutoFormats
for it are pretty basic. That is compared to what you can get with a 3rd
party tool like Developer Express or Telerik. I'm new to so much of this and
wondering if it's possible using skins/css, etc. (not sure what to ask
exactly) to make the native grid a lot fancier. I know I can change various
colors, borders, etc. using style settings but can I for example put images
in the grid's column headers? Can anyone point me to information explaining
how to make the grid a lot more attractive?

Thanks,

Keith
 
CSS is your best bet on spicing it up and what the AutoFormats use. If you
want even more spice, you will either have to "subclass" the GridView (make
your own) and add more umph, or go to a third party control.

I cannot envision much, in the way of looks, that CSS cannot handle.

--
Gregory A. Beamer
MVP, MCP: +I, SE, SD, DBA

*************************************************
| Think outside the box!
|
*************************************************
 
With css could you for example make the headers "glass" or "metalic" and
include a custom glyph to show sort direction? I konw for that you need
image files but I am so new to this I don't know where to begin. I'd like to
try but I need some direction. Does anyone know of any samples I could look
at in order to get a better understanding of this? My impression so far is
that even with css, if the control doesn't have a property (such as
HeaderImageURL) then it cannot be done anyway. I'm sure I'm wrong, but
that's what my limited knowledge of this tells me. When you say that css is
what the AutoFormats use, I see that with something like Developer Express'
grid but when I apply an AutoFormat like "Colorful" to the native grid, I
don't see any new css files anywhere in my site's files.
 
Many of the things you see in other grids are simply CSS linked to images.
Quick example:

<HeaderStyle CssClass="Glass" />

And here is the style:

Glass {
background:url(images/glass.png) repeat;
}

I did the CSS on the fly, so I may have an issue with syntax, but it does
follow the basic idea.

Play with CSS and get the look you desire, then add that class to your
header.

--
Gregory A. Beamer
MVP, MCP: +I, SE, SD, DBA

*************************************************
| Think outside the box!
|
*************************************************
 
Back
Top