How to display a color bar inside each grid cell instead of numeric value?

[Ron]

Hi

We are evaluating Telerik ASP.NET AJAX controls for upcoming project. One of the requirements is ability to display grid values in form of a horizontal color bar with its size depends on the cell value and color depends on the sign (positive numbers in green and negative in red). I could think of creating dynamic images based on the values and place them inside the grid which I think it would be very slow, or maybe somehow can use the Rating Column type template but was wondering if there is a better solution for this.

I would appreciate your help in advance.
Ron Farko

[John]

How about using a template column, and use the value you want to display as the width of a colored span? Since you want red/green, you might want to split the value into two columns - a positive one and a negative one - whichever one isn't used would be zero. Then you could do something like this:

<ItemTemplate>
    <span class='posValue' style='width: <%# Eval("positiveValue") %>;'></span>
    <span class='negValue' style='width: <%# Eval("negativeValue") %>;'></span>
</ItemTemplate>

Then just define the two css classes for the bars:

.posValue { background-color: green; display: block; height: 10px; }
.negValue { background-color: red; display: block; height: 10px; }

You may need to tweak it a bit, but I've done similar stuff in the past, so it should work in principle... The advantage is that it's all rendered in the browser via CSS, and so will be lightning quick, and will cause virtually no bloat to the page.

[Ron]

Thanks John

Your solution works perfectly. However since I am using Auto Column Generation I had to set the cell content to <Span> text in grid's ItemDataBound event handler.

Regards
Ron