Gridview and column with variable image

[Froefel]

Hi group,

I'm looking for some help on how to achieve the following in a
gridview control that is based on an ObjectDataSource.
The SelectMethod of the datasource returns a list of Customer objects.
Each Customer object has a property "Notes".

When I display the list of customers in the gridview, I would like to
provide a column that displays an Image associated with the Notes
property. If the Notes property contains data I want to display a
colored version of the image. When the Notes property doesn't contain
data I want to display a grayed version of the image.
Clicking an image should launch a URL to either view or enter notes.

A variation on this (for another column in the same grid) is the need
to display one of several images or no image at all, based on the
value of a property.
If a customer's Status property = Yes, display a green image;
If a customer's Status property = No, display a red image;
If a customer's Status property = Maybe, display a yellow image;
If a customer's Status property = Done, don't display an image;

This behavior is similar to Hotmail's classic display of the message
icon in the first column, which changed based on whether a message is
flagged read, unread, replied to, unknown sender, ...

Does anyone have any suggestions on how to implement this or can
anyone point me to an article that explains this?

Thanks
-- Hans

 

[Guest]

Hi group,

I'm looking for some help on how to achieve the following in a
gridview control that is based on an ObjectDataSource.
The SelectMethod of the datasource returns a list of Customer objects.
Each Customer object has a property "Notes".

When I display the list of customers in the gridview, I would like to
provide a column that displays an Image associated with the Notes
property. If the Notes property contains data I want to display a
colored version of the image. When the Notes property doesn't contain
data I want to display a grayed version of the image.
Clicking an image should launch a URL to either view or enter notes.

A variation on this (for another column in the same grid) is the need
to display one of several images or no image at all, based on the
value of a property.
If a customer's Status property = Yes, display a green image;
If a customer's Status property = No, display a red image;
If a customer's Status property = Maybe, display a yellow image;
If a customer's Status property = Done, don't display an image;

This behavior is similar to Hotmail's classic display of the message
icon in the first column, which changed based on whether a message is
flagged read, unread, replied to, unknown sender, ...

Does anyone have any suggestions on how to implement this or can
anyone point me to an article that explains this?

Thanks
-- Hans

Hi, Hans

the easiest way is to have 4 images: yes.gif, no.gif, maybe.gif and done.gif
and use a value of the Status to build a name of the image:

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src=""" & DataBinder.Eval(Container.DataItem, "Status") &
".gif"">"%>
</ItemTemplate>
</asp:TemplateColumn>

another option is to make a method

public string getImage(object s)
{
if (s == "Yes") {
return("<img=....");
}
.....
}

and use it to get an image

<asp:TemplateColumn>
<ItemTemplate>
<%# getImage(Container.DataItem, "Status")) %>
</ItemTemplate>
</asp:TemplateColumn>

Hope this helps

 

[Froefel]

Hi Alex,

Yep, that does it. Meanwhile I found a few articles and they confirmed
your suggestions. I've implemented it and got it to work... at least
the basics of displaying the image. In fact, I managed to display a
dynamic image in an asp:ImageField, but because it cannot have a
hyperlink associated with it, I also got it to work with a
asp:ButtonField of Type="image". The ButtonField is clickable through
the CommandName argument, but I still have to find out how to respond
to that.
I'll probably have some questions about that shortly.

Thanks for the hints.

 

[David Wier]

Here's a code sample from ASPNEt101.com:
http://aspnet101.com/aspnet101/aspnet/codesample.aspx?code=gvconditionalImages

It's all done in the RowDatabound event

David Wier
http://aspnet101.com
http://iWritePro.com - one click PDF/DocToHTML/RTFtoPDF