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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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]]

<gn********@gma il.comwrote in message
news:11******** **************@ 57g2000hsv.goog legroups.com...

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:Imagewebco ntrol is
expecting a relative or absolute URL pointing to a graphic e.g. jpg, bmp,
gif etc:
http://msdn2.microsoft.com/en-us/lib...rl(vs.80).aspx

When you do a View Source and inspect the HTML, does that shed any light on
things...?
--
Mark Rae
ASP.NET MVP
http://www.markrae.net

[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

<gn********@gma il.comwrote in message
news:11******** **************@ 57g2000hsv.goog legroups.com...

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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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.

[Alexey Smirnov]

On Sep 4, 10:54 pm, gnewsgr...@gmai l.com wrote:

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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateCol umn>

[Muhammad Naveed Yaseen]

If "~/Images/red_cirlce.jpg" is assigned to client side <imgtag,
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]

On Sep 4, 5:22 pm, "Mark Rae [MVP]" <m...@markNOSPA Mrae.netwrote:

<gnewsgr...@gma il.comwrote in message

news:11******** **************@ 57g2000hsv.goog legroups.com...

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:Imagewebco ntrol is
expecting a relative or absolute URL pointing to a graphic e.g. jpg, bmp,
gif etc:http://msdn2.microsoft.com/en-us/lib...webcontrols.im...

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

--
Mark Rae
ASP.NET MVPhttp://www.markrae.net

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]

On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On Sep 4, 10:54 pm, gnewsgr...@gmai l.com wrote:

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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateCol umn>- 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]

On Sep 4, 8:32 pm, Muhammad Naveed Yaseen <mnyas...@gmail .comwrote:

If "~/Images/red_cirlce.jpg" is assigned to client side <imgtag,
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]

On Sep 4, 11:39 pm, gnewsgr...@gmai l.com wrote:

On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On Sep 4, 10:54 pm, gnewsgr...@gmai l.com wrote:

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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateCol umn>- 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.- Hide quoted text -

- Show quoted text -

Sentence.Remove ("since");

[Alexey Smirnov]

On Sep 5, 5:39 am, gnewsgr...@gmai l.com wrote:

On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir... @gmail.comwrote :

On Sep 4, 10:54 pm, gnewsgr...@gmai l.com wrote:

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='GetIconPat h()' />

And it still did not work.

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

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

It still didn't work.

Then, I created another page GetIconPath.asp x, 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="GetIc onPath.aspx" ... ></asp:Image>

It still refuses to work.

I tried <asp:ImageField instead of <asp:TemplateFi eld>, 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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='" + GetIconPath() + "'>"%>
</ItemTemplate>
</asp:TemplateCol umn>- 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.- 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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='" + GetIconPath(Eva l("Status")) + "'>"%>
</ItemTemplate>
</asp:TemplateCol umn>

....
protected string GetImage(object n)
{
if (n != DBNull.Value) {
if ((string)n == "paid") {
return ("/images/green_circle.jp g" );
}
....
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:TemplateCo lumn>
<ItemTemplate >
<%#"<img src='/images/status_" + Eval("Status") + ".jpg'>"%>
</ItemTemplate>
</asp:TemplateCol umn>