By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,715 Members | 1,815 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,715 IT Pros & Developers. It's quick & easy.

Dynamically displaying images in a gridview

P: n/a
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:ImageFieldinstead 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.

Sep 4 '07 #1
Share this Question
Share on Google+
10 Replies


P: n/a
<gn********@gmail.comwrote in message
news:11**********************@57g2000hsv.googlegro ups.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:Imagewebcontrol 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

Sep 4 '07 #2

P: n/a

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********@gmail.comwrote in message
news:11**********************@57g2000hsv.googlegro ups.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='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:ImageFieldinstead 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.

Sep 4 '07 #3

P: n/a
On Sep 4, 10:54 pm, gnewsgr...@gmail.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='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:ImageFieldinstead 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>
Sep 4 '07 #4

P: n/a
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.

Sep 5 '07 #5

P: n/a
On Sep 4, 5:22 pm, "Mark Rae [MVP]" <m...@markNOSPAMrae.netwrote:
<gnewsgr...@gmail.comwrote in message

news:11**********************@57g2000hsv.googlegro ups.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:Imagewebcontrol 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.

Sep 5 '07 #6

P: n/a
On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir...@gmail.comwrote:
On Sep 4, 10:54 pm, gnewsgr...@gmail.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='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:ImageFieldinstead 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>- 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.

Sep 5 '07 #7

P: n/a
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.

Sep 5 '07 #8

P: n/a
On Sep 4, 11:39 pm, gnewsgr...@gmail.com wrote:
On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir...@gmail.comwrote:


On Sep 4, 10:54 pm, gnewsgr...@gmail.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='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:ImageFieldinstead 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>- 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");

Sep 5 '07 #9

P: n/a
On Sep 5, 5:39 am, gnewsgr...@gmail.com wrote:
On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir...@gmail.comwrote:


On Sep 4, 10:54 pm, gnewsgr...@gmail.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='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:ImageFieldinstead 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>- 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: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>

Sep 5 '07 #10

P: n/a
On Sep 5, 3:19 am, Alexey Smirnov <alexey.smir...@gmail.comwrote:
On Sep 5, 5:39 am, gnewsgr...@gmail.com wrote:


On Sep 4, 5:51 pm, Alexey Smirnov <alexey.smir...@gmail.comwrote:
On Sep 4, 10:54 pm, gnewsgr...@gmail.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 theImageControl to a method I have in the code-behind,
like so:
<asp:Image... ImageUrl='<%# GetIconPath() %>' ....></asp:Image>
It did not work.
I removed theImagecontrol 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 theImagecontrol, I say
<asp:Image.... ImageUrl="GetIconPath.aspx" ... ></asp:Image>
It still refuses to work.
I tried <asp:ImageFieldinstead 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>- 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 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.

Sep 6 '07 #11

This discussion thread is closed

Replies have been disabled for this discussion.