Dynamically displaying images in a gridview

[gnewsgroup]

I've googled and tried various approaches, but could not resolve this
problem. The article at MSDN: Displaying Images in a GridView Column
only presents a simple case where all data (including the images) of
the gridview come from a single table/datasource.

Here is my situation. In my web application, I need to display
customer bills info in a gridview.

Customer names and contact info are from the Customer table.

If a customer's bill is past due, I display a red circle in the last
coumn of that row.
If a customer's bill has been paid, I display a green circle in the
last column of that row.
If a customer's bill isn't past due, I display a blue circle in the
last column of that row.

Simple, right?

These little colorful circles can be from a database table or from an
ArrayList.

I've tried a template field in the last column and then bind the
ImageUrl of the Image Control to a method I have in the code-behind,
like so:

<asp:Image ... ImageUrl='<%# GetIconPath() %>' ....></asp:Image>

It did not work.

I removed the Image control and simply tried:

<img src='GetIconPath()' />

And it still did not work.

Then, I tried using a Label control and in the code behind I say

lblImageURL.Text = "<img src='" + GetIconPath() + "'/>";

It still didn't work.

Then, I created another page GetIconPath.aspx, which simply outputs
the path of the icon as a string like "~/Images/red_cirlce.jpg", and
in the Image control, I say

<asp:Image .... ImageUrl="GetIconPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField> instead of <asp:TemplateField>, and it still
refuses to work. I've spent the whole day working on this, and cannot
resolve this problem.

Any hint is highly appreciated.

 

[Mark Rae [MVP]]

Any hint is highly appreciated.

When something like this happens, my first thought is relative paths...

Are you *absolutely sure* that the path to the various image files is
correct...?

Bear in mind that the ImageUrl property of an <asp:Image> webcontrol is
expecting a relative or absolute URL pointing to a graphic e.g. jpg, bmp,
gif etc:
http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.image.imageurl(vs.80).aspx

When you do a View Source and inspect the HTML, does that shed any light on
things...?

 

[John Mott]

If it were me I'd do this in the onRowBound handler for the gridview -- that
would give you access to the data for that row. From that you could detect
the paid/late/not late status and the chance to directly drop the src into
an image tag.

john

 

[Guest]

I've googled and tried various approaches, but could not resolve this
problem. The article at MSDN: Displaying Images in a GridView Column
only presents a simple case where all data (including the images) of
the gridview come from a single table/datasource.

Here is my situation. In my web application, I need to display
customer bills info in a gridview.

Customer names and contact info are from the Customer table.

If a customer's bill is past due, I display a red circle in the last
coumn of that row.
If a customer's bill has been paid, I display a green circle in the
last column of that row.
If a customer's bill isn't past due, I display a blue circle in the
last column of that row.

Simple, right?

These little colorful circles can be from a database table or from an
ArrayList.

I've tried a template field in the last column and then bind the
ImageUrl of the Image Control to a method I have in the code-behind,
like so:

<asp:Image ... ImageUrl='<%# GetIconPath() %>' ....></asp:Image>

It did not work.

I removed the Image control and simply tried:

<img src='GetIconPath()' />

And it still did not work.

Then, I tried using a Label control and in the code behind I say

lblImageURL.Text = "<img src='" + GetIconPath() + "'/>";

It still didn't work.

Then, I created another page GetIconPath.aspx, which simply outputs
the path of the icon as a string like "~/Images/red_cirlce.jpg", and
in the Image control, I say

<asp:Image .... ImageUrl="GetIconPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField> instead of <asp:TemplateField>, and it still
refuses to work. I've spent the whole day working on this, and cannot
resolve this problem.

Any hint is highly appreciated.

For example

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateColumn>

 

[Muhammad Naveed Yaseen]

If "~/Images/red_cirlce.jpg" is assigned to client side <img> tag,
browser wont understand ~

If it is assigned to any Url type server control (as Image.ImageUrl),
server would translate ~ according to folder of page/user-control
containing this control, which may have relative path to images folder
different than the page being rendered on client-side.

Try using path relative to client page (with . or .. if needed). That
may give intellisense red-line on server code, but it would get
rendered properly on client-side.

 

[gnewsgroup]

When something like this happens, my first thought is relative paths...

Are you *absolutely sure* that the path to the various image files is
correct...?

Bear in mind that the ImageUrl property of an <asp:Image> webcontrol is
expecting a relative or absolute URL pointing to a graphic e.g. jpg, bmp,
gif etc:http://msdn2.microsoft.com/en-us/library/system.web.ui.webcontrols.im...

When you do a View Source and inspect the HTML, does that shed any light on
things...?

Well, path might be problem. You reminded me that I did not use
ResolveUrl anywhere in the code. May give it a try. Thx.

 

[gnewsgroup]

If it were me I'd do this in the onRowBound handler for the gridview -- that
would give you access to the data for that row. From that you could detect
the paid/late/not late status and the chance to directly drop the src into
an image tag.

john

I think this sounds like a solution. I like to manually bind it too.
The problem is that I am sorta confused by the series of OnBinding,
OnBind, OnBound properties/methods. The documentation at MSDN only
says raise the Bind/Binding/Bound event, without explaining (or I
missed the article) their differences. I am only guessing their
differences from their semantics. So, is it the case that OnBinding
means at the time when the GridView is being bound to the DataSource,
and OnBound means immediately after the GridView has been bound to the
DataSource? What is OnBind then?

 

[gnewsgroup]

For example

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateColumn>- Hide quoted text -

- Show quoted text -

I think I did try this, and it didn't seem to work. But since if
nothing else works, I'll have to give it shot again. Thx.

 

[gnewsgroup]

If "~/Images/red_cirlce.jpg" is assigned to client side <img> tag,
browser wont understand ~

If it is assigned to any Url type server control (as Image.ImageUrl),
server would translate ~ according to folder of page/user-control
containing this control, which may have relative path to images folder
different than the page being rendered on client-side.

Try using path relative to client page (with . or .. if needed). That
may give intellisense red-line on server code, but it would get
rendered properly on client-side.

Nope, VS2005 did not show me any curly red lines. I am also
suspecting that it might be a path problem, as Mark has pointed out
also.

 

[gnewsgroup]

I think I did try this, and it didn't seem to work. But since if
nothing else works, I'll have to give it shot again. Thx.- Hide quoted text -

- Show quoted text -

Sentence.Remove("since");

 

[Guest]

I think I did try this, and it didn't seem to work. But since if
nothing else works, I'll have to give it shot again. Thx.- Hide quoted text -

- Show quoted text -

Mark told you to check the path

if you think you image is here

~/Images/red_cirlce.jpg

and your webform with the grid is here

~/webform.aspx
http://localhost/webform.aspx

Are you able to get the image as

http://localhost/Images/red_cirlce.jpg

?

When you said, that if a customer's bill is past due, it should be in
this color, if a customer's bill has been paid, then another color,
etc. you would need also to know a status of the bill, so I guess you
would need something like this

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='" + GetIconPath(Eval("Status")) + "'>"%>
</ItemTemplate>
</asp:TemplateColumn>

....
protected string GetImage(object n)
{
if (n != DBNull.Value) {
if ((string)n == "paid") {
return ("/images/green_circle.jpg" );
}
....
else
return ("");
}

Another way is to name icon files in the same way as you named the
values of the "status" field. Say, you have status = 0 (past due), 1
(paid), 2 (isn't past due) then you can name your files as
circle_0.jpg, circle_1.jpg, circle_2.jpg and then you would not neet
any codebehind method

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='/images/status_" + Eval("Status") + ".jpg'>"%>
</ItemTemplate>
</asp:TemplateColumn>

 

[gnewsgroup]

Mark told you to check the path

if you think youimageis here

~/Images/red_cirlce.jpg

and your webform with the grid is here

~/webform.aspxhttp://localhost/webform.aspx

Are you able to get theimageas

http://localhost/Images/red_cirlce.jpg

?

When you said, that if a customer's bill is past due, it should be in
this color, if a customer's bill has been paid, then another color,
etc. you would need also to know a status of the bill, so I guess you
would need something like this

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='" + GetIconPath(Eval("Status")) + "'>"%>
</ItemTemplate>
</asp:TemplateColumn>

...
protected string GetImage(object n)
{
if (n != DBNull.Value) {
if ((string)n == "paid") {
return ("/images/green_circle.jpg" );}

...
else
return ("");

}

Another way is to name icon files in the same way as you named the
values of the "status" field. Say, you have status = 0 (past due), 1
(paid), 2 (isn't past due) then you can name your files as
circle_0.jpg, circle_1.jpg, circle_2.jpg and then you would not neet
any codebehind method

<asp:TemplateColumn>
<ItemTemplate>
<%#"<img src='/images/status_" + Eval("Status") + ".jpg'>"%>
</ItemTemplate>
</asp:TemplateColumn>- Hide quoted text -

- Show quoted text -

Thank you for sharing. I think the sample you gave at the end of your
post is a good solution.

I resolved the problem by using the ImageField of GridView (like that
shown in the MSDN article). I created a view in the database that
includes the image path field, and then bind this data source to the
gridview.

Thanks go to all nice people who took the time to give hints.