Binding Image to Field in Data Grid

[Simon Harris]

Hi All,

I have a data grid which displays country names. I now wish to display the
country flag images above the names.

Can someone please advise how I display an image in a datagrid? I have a
folder of flag images, named in relations to the countries database ID.

Current data grid code is...

<asp:datagrid runat="server"
Id="DGCountries"
GridLines="Horizontal"
cellpadding="5"
cellspacing="0"
Headerstyle-CssClass="DataGridHeaderDefault"
BackColor="#ffffff"
BorderColor="Black"
AutogenerateColumns="False">
<Columns>
<asp:BoundColumn
DataField="Country"
HeaderText="Country" ItemStyle-CssClass="DataGridItemDefault">
</asp:BoundColumn>
</Columns>
</aspataGrid>

Many Thanks,
Simon.

--
-
* Please reply to group for the benefit of all
* Found the answer to your own question? Post it!
* Get a useful reply to one of your posts?...post an answer to another one
* Search first, post later : http://www.google.co.uk/groups
* Want my email address? Ask me in a post...Cos2MuchSpamMakesUFat!

 

[Pete Beech]

Convert the bound column to a template column, using the property builder in
the VS.NET IDE (or do it yourself in the HTML of the aspx page). Then you
can add an image control to the template column (to edit the template column
in the IDE, right click on it and choose the appropriate option (Edit
Templates I think)).

To get the flag image, you could write a small function in your codebehine,
make sure its protected so the aspx page can access it. Call this function
from a databinding statement in the datagrid template column for the
country, in the image control - something like
<%#GetCountryImageRef(DataBind.Eval(Container, "DataItem.Country") %>. (This
should go in the ImageURL part of the asp.net image control - i.e.
ImageURL="<%#GetCountryImageRef(DataBind.Eval(Container, "DataItem.Country")
%>").

Write the function to return the URL for the image (as a string) depending
on the country passed in.

I'm just doing this off the top of my head, so the details may be wrong, but
thats the general idea of one possible solution.

Let me know if you need more details, or something isn't clear

Cheers,
Pete Beech

 

[Simon Harris]

Hi Peter,

Thankyou very much for your (Very prompt!) reply - I am very new to ASPX, a
question if you dont mind...

- Whats codebehind? I've heard the term before, possibly already using
it!...

Thanks,
Simon.

 

[Pete Beech]

Hi Simon,
The codebehind file for a given ASPX page is normally a C# or VB.NET file
containing a class which inherits from the Page object. (The .aspx page
itself actually gets converted into a class by the server, and this aspx
class inherits from the codebehind class). This is where you handle events
for the page (like button clicks, etc), and set up the page, and generally
do most of the coding for the page. You will get references for the
webcontrols you use on the page as member variables of the codebehind class,
and you can manipulate them programmatically in whatever way you want. You
could even add new webcontrols dynamically, depending on the actions of the
user.

So, if you have a page called WebForm1.aspx, the codebehind file would be
WebForm1.aspx.cs (if its a C# project) or WebForm1.aspx.vb (for VB.NET). It
depends on what tool you are using to code up your ASP.NET app - if you're
using Visual Studio .NET, that uses codebehind files. But if you use ASP.NET
webmatrix, it only supports aspx files which contain all the server side
code as well.. (maybe the latest version allows codebehind, I'm not sure).

If you're using VS.NET, and you have the aspx page open, press F7, or right
click on the page and select 'View Code' to see the codebehind file.

Hope that makes sense - you probably are already using it

Cheers,
Pete

 

[Azhar]

Hi All,

I have a data grid which displays country names. I now wish to display the
country flag images above the names.

Can someone please advise how I display an image in a datagrid? I have a
folder of flag images, named in relations to the countries database ID.

Current data grid code is...

<asp:datagrid runat="server"
Id="DGCountries"
GridLines="Horizontal"
cellpadding="5"
cellspacing="0"
Headerstyle-CssClass="DataGridHeaderDefault"
BackColor="#ffffff"
BorderColor="Black"
AutogenerateColumns="False">
<Columns>
<asp:BoundColumn
DataField="Country"
HeaderText="Country" ItemStyle-CssClass="DataGridItemDefault">
</asp:BoundColumn>
</Columns>
</aspataGrid>

Many Thanks,
Simon.

--
-
* Please reply to group for the benefit of all
* Found the answer to your own question? Post it!
* Get a useful reply to one of your posts?...post an answer to another one
* Search first, post later : http://www.google.co.uk/groups
* Want my email address? Ask me in a post...Cos2MuchSpamMakesUFat!

Answer..


1) Add a temlate column in your datagrid,
2) Add an image control in template column,
3) Store the URL of ur image in the database corresponding to the country ID.
4) then make a connection to the database with the query string,
"Select CountryName, ImageUrl from Countries where countryID = 1"
5) In datagrid totally you will be having 3 columns, namely CountryName,ImageUrl and a template column where you have placed a image control button..
6) Go into property builder of datagrid, select columns, dataBound, give suitable headerText for the field and the field name for all three columns,
7) Uncheck the visible checkbox of the ImageUrl Column so tht it should not be visible..
8) in ShowGrid() function, call another function as "callToFun();"

definition...


private void callToFun()
{
int i=0;
foreach(DataGridItem j in DataGridS.Items)
{
ImageButton img = (ImageButton) j.FindControl("ImgS");
img.ImageUrl = DataGridS.Items.Cells[4].Text;
i++;
}
}

ImgS -- ImageControl Id,
DataGridS --- datagrid Id...

Thanku..

Azhar