469,950 Members | 2,386 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,950 developers. It's quick & easy.

Datagrids and images

Happy Holidays All! I want to load a datagrid with images and text (Image,
text, image, text, etc...). The data for this datagrid will be coming from
sql server and the images are stored as files on the server and not in sql
server, however, the name and path of the images are stored with the text in
sql server. I don't have a clue on how to load the images into the grid, so
can someone please advise on how i can get started with this?

Thanks.
--
mo*******@nospam.com
Nov 18 '05 #1
13 1469
Look into the asp:templatecolumn of the datagrid. You can define and item
template which could contain an <asp:image> server control with src=<%# some
databinding expression"%> using the image path from your DataSet to which
you're binding the datagrid

hope that helps.

"moondaddy" <mo*******@nospam.com> wrote in message
news:u9**************@TK2MSFTNGP10.phx.gbl...
Happy Holidays All! I want to load a datagrid with images and text (Image, text, image, text, etc...). The data for this datagrid will be coming from sql server and the images are stored as files on the server and not in sql
server, however, the name and path of the images are stored with the text in sql server. I don't have a clue on how to load the images into the grid, so can someone please advise on how i can get started with this?

Thanks.
--
mo*******@nospam.com

Nov 18 '05 #2
Thanks. That sounds like a good start. do you know of any examples or
articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
Look into the asp:templatecolumn of the datagrid. You can define and item
template which could contain an <asp:image> server control with src=<%# some databinding expression"%> using the image path from your DataSet to which
you're binding the datagrid

hope that helps.

"moondaddy" <mo*******@nospam.com> wrote in message
news:u9**************@TK2MSFTNGP10.phx.gbl...
Happy Holidays All! I want to load a datagrid with images and text (Image,
text, image, text, etc...). The data for this datagrid will be coming

from
sql server and the images are stored as files on the server and not in sql server, however, the name and path of the images are stored with the

text in
sql server. I don't have a clue on how to load the images into the
grid, so
can someone please advise on how i can get started with this?

Thanks.
--
mo*******@nospam.com


Nov 18 '05 #3
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out
http://msdn.microsoft.com/library/de...tomcolumns.asp

DataBinder.Eval allows you to bind to your server control's datasource from
within your HTML. I'm assuming you know and have bound the DataGrid to it's
data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:
http://msdn.microsoft.com/library/en...xpressions.asp

"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Thanks. That sounds like a good start. do you know of any examples or
articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
Look into the asp:templatecolumn of the datagrid. You can define and item
template which could contain an <asp:image> server control with src=<%#

some
databinding expression"%> using the image path from your DataSet to which you're binding the datagrid

hope that helps.

"moondaddy" <mo*******@nospam.com> wrote in message
news:u9**************@TK2MSFTNGP10.phx.gbl...
Happy Holidays All! I want to load a datagrid with images and text

(Image,
text, image, text, etc...). The data for this datagrid will be coming

from
sql server and the images are stored as files on the server and not in

sql server, however, the name and path of the images are stored with the

text
in
sql server. I don't have a clue on how to load the images into the

grid,
so
can someone please advise on how i can get started with this?

Thanks.
--
mo*******@nospam.com



Nov 18 '05 #4
In my above post, "ImageFilePath" should be replaced by whatever your column
is named ...

"George Durzi" <gd****@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP10.phx.gbl...
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out
http://msdn.microsoft.com/library/de...tomcolumns.asp
DataBinder.Eval allows you to bind to your server control's datasource from within your HTML. I'm assuming you know and have bound the DataGrid to it's data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:
http://msdn.microsoft.com/library/en...xpressions.asp
"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Thanks. That sounds like a good start. do you know of any examples or
articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
Look into the asp:templatecolumn of the datagrid. You can define and item template which could contain an <asp:image> server control with src=<%#
some
databinding expression"%> using the image path from your DataSet to which you're binding the datagrid

hope that helps.

"moondaddy" <mo*******@nospam.com> wrote in message
news:u9**************@TK2MSFTNGP10.phx.gbl...
> Happy Holidays All! I want to load a datagrid with images and text
(Image,
> text, image, text, etc...). The data for this datagrid will be
coming from
> sql server and the images are stored as files on the server and not

in sql
> server, however, the name and path of the images are stored with the

text
in
> sql server. I don't have a clue on how to load the images into the

grid,
so
> can someone please advise on how i can get started with this?
>
> Thanks.
> --
> mo*******@nospam.com
>
>



Nov 18 '05 #5
Thanks George, I'll try it now!

"George Durzi" <gd****@hotmail.com> wrote in message
news:uP**************@TK2MSFTNGP12.phx.gbl...
In my above post, "ImageFilePath" should be replaced by whatever your column is named ...

"George Durzi" <gd****@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP10.phx.gbl...
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out

http://msdn.microsoft.com/library/de...tomcolumns.asp

DataBinder.Eval allows you to bind to your server control's datasource

from
within your HTML. I'm assuming you know and have bound the DataGrid to

it's
data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:

http://msdn.microsoft.com/library/en...xpressions.asp

"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Thanks. That sounds like a good start. do you know of any examples or articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
> Look into the asp:templatecolumn of the datagrid. You can define and

item
> template which could contain an <asp:image> server control with src=<%# some
> databinding expression"%> using the image path from your DataSet to

which
> you're binding the datagrid
>
> hope that helps.
>
> "moondaddy" <mo*******@nospam.com> wrote in message
> news:u9**************@TK2MSFTNGP10.phx.gbl...
> > Happy Holidays All! I want to load a datagrid with images and text > (Image,
> > text, image, text, etc...). The data for this datagrid will be coming > from
> > sql server and the images are stored as files on the server and not in
sql
> > server, however, the name and path of the images are stored with

the text
> in
> > sql server. I don't have a clue on how to load the images into the grid,
> so
> > can someone please advise on how i can get started with this?
> >
> > Thanks.
> > --
> > mo*******@nospam.com
> >
> >
>
>



Nov 18 '05 #6
It doesnt like the syntax. I get the err msg:

Could not open in Design view. Quote values different inside a
'<%..."value"...%>'block.

for the line:

<asp:Image id="imgMyImage"
runat="server"ImageURL="<%#DataBinder.Eval(Contain er, "ImageFilePath")%>">

so i changed it a little to this but still got the same msg:

<asp:Image id="Image1" runat="server"
ImageUrl="<%#DataBinder.Eval(Container, "Path")%>"></asp:Image>

any idea why it doesnt like it?


"George Durzi" <gd****@hotmail.com> wrote in message
news:uP**************@TK2MSFTNGP12.phx.gbl...
In my above post, "ImageFilePath" should be replaced by whatever your column is named ...

"George Durzi" <gd****@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP10.phx.gbl...
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out

http://msdn.microsoft.com/library/de...tomcolumns.asp

DataBinder.Eval allows you to bind to your server control's datasource

from
within your HTML. I'm assuming you know and have bound the DataGrid to

it's
data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:

http://msdn.microsoft.com/library/en...xpressions.asp

"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Thanks. That sounds like a good start. do you know of any examples or articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
> Look into the asp:templatecolumn of the datagrid. You can define and

item
> template which could contain an <asp:image> server control with src=<%# some
> databinding expression"%> using the image path from your DataSet to

which
> you're binding the datagrid
>
> hope that helps.
>
> "moondaddy" <mo*******@nospam.com> wrote in message
> news:u9**************@TK2MSFTNGP10.phx.gbl...
> > Happy Holidays All! I want to load a datagrid with images and text > (Image,
> > text, image, text, etc...). The data for this datagrid will be coming > from
> > sql server and the images are stored as files on the server and not in
sql
> > server, however, the name and path of the images are stored with

the text
> in
> > sql server. I don't have a clue on how to load the images into the grid,
> so
> > can someone please advise on how i can get started with this?
> >
> > Thanks.
> > --
> > mo*******@nospam.com
> >
> >
>
>



Nov 18 '05 #7
OK I figured out the syntax problem, I needed to use a single quote instead
of a double quote. Then I found that I could use the properties window to
set the databinding to a column in the datagrid that contains the path to I
tried that and it looked like this:

<asp:Image id=Image1 runat="server" ImageUrl='<%# DataBinder.Eval(DsTest1,
"Tables[zTestDataGrid].DefaultView.[0].Path") %>'>

This stared to work but every row in the datagrid got the same image - the
image in the first row in the dataset. So now I need to make each row get
the correct image and not just the first one.

"George Durzi" <gd****@hotmail.com> wrote in message
news:uP**************@TK2MSFTNGP12.phx.gbl...
In my above post, "ImageFilePath" should be replaced by whatever your column is named ...

"George Durzi" <gd****@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP10.phx.gbl...
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out

http://msdn.microsoft.com/library/de...tomcolumns.asp

DataBinder.Eval allows you to bind to your server control's datasource

from
within your HTML. I'm assuming you know and have bound the DataGrid to

it's
data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:

http://msdn.microsoft.com/library/en...xpressions.asp

"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
Thanks. That sounds like a good start. do you know of any examples or articles on this?
"George Durzi" <gd****@hotmail.com> wrote in message
news:um**************@TK2MSFTNGP11.phx.gbl...
> Look into the asp:templatecolumn of the datagrid. You can define and

item
> template which could contain an <asp:image> server control with src=<%# some
> databinding expression"%> using the image path from your DataSet to

which
> you're binding the datagrid
>
> hope that helps.
>
> "moondaddy" <mo*******@nospam.com> wrote in message
> news:u9**************@TK2MSFTNGP10.phx.gbl...
> > Happy Holidays All! I want to load a datagrid with images and text > (Image,
> > text, image, text, etc...). The data for this datagrid will be coming > from
> > sql server and the images are stored as files on the server and not in
sql
> > server, however, the name and path of the images are stored with

the text
> in
> > sql server. I don't have a clue on how to load the images into the grid,
> so
> > can someone please advise on how i can get started with this?
> >
> > Thanks.
> > --
> > mo*******@nospam.com
> >
> >
>
>



Nov 18 '05 #8
Hi moondaddy,

Thank you for using Microsoft Newsgroup Service. Based on your description,
you want to get some information on how to add some columns(with text or
Images) in the ASP.NET's DataGrid control, and the controls' value is set
as the data retrieved from a SQLServer Database. Is my understanding of
your problem correct?

If so, I think George Durzi's suggestion is quite good, the TemplateColumn
of the DataGrid control provided the powerful functions for you to
customize a certain DataBind column in DataGrid. You may add different
kinds of serverside or normal html controls into a Template column and set
databind attribute for it. For more detailed description on how to use the
ASP.NET DataGrid's template column, you can view the following article on
MSDN:
http://msdn.microsoft.com/library/en...stomcolumns.as
p?frame=true

Also, I've made a generic sample, I used a simulated DataTable to perform
the DataSource, you may change it to your actual DataSource( query from
SQLServer) according to your own situation. Here is the source code:
-------------------------aspx file------------------------------
<%@ Page language="c#" Codebehind="DataGridBind.aspx.cs"
AutoEventWireup="false" Inherits="NewWebApp.DataGridBind"
smartNavigation="False"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DataGridBind</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="600" align="center" border="1">
<tr>
<td><asp:datagrid id="dgBind" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="index" ReadOnly="True"
HeaderText="Index" />
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"name") %>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" Runat='server' Text='<%#
DataBinder.Eval( Container.DataItem,"name") %>'/>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Grade">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"grade") %>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList runat="server" ID="lstGrade">
<asp:ListItem Value="low">Low</asp:ListItem>
<asp:ListItem Value="normal"
Selected="True">Normal</asp:ListItem>
<asp:ListItem Value="high">High</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgImage" Runat="server" ImageUrl='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:Image>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="txtUrl" Runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Description">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"description") %>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="Textbox1" TextMode=MultiLine Runat="server"
Text='<%# DataBinder.Eval(Container.DataItem,"description") %>' >
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:EditCommandColumn EditText="Edit" CancelText="Cancel"
UpdateText="Update" HeaderText="Operation" />
</Columns>
</asp:datagrid></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>

--------------------------------aspx.cs codebehind
file------------------------------------------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace NewWebApp
{
/// <summary>
/// Summary description for DataGridBind.
/// </summary>
public class DataGridBind : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgBind;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
BindGrid();
}
}

protected void BindGrid()
{
string baseurl = "http://www.cacti1104.com/images/stuff/icon/001_00";

DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("name");
tb.Columns.Add("grade");
tb.Columns.Add("imageurl");
tb.Columns.Add("description");

for(int i=0;i<15;i++)
{
int index = i+1;
DataRow newrow = tb.NewRow();
newrow["index"] = index.ToString();
newrow["name"] = "name" + index.ToString();
newrow["imageurl"] = baseurl + index.ToString() + ".gif";
newrow["description"] = "default description:" + index.ToString();

switch(index%3)
{
case 0:
newrow["grade"] = "low";
break;
case 1:
newrow["grade"] = "normal";
break;
case 2:
newrow["grade"] = "high";
break;
}

tb.Rows.Add(newrow);
}

dgBind.DataSource = tb;
dgBind.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.dgBind.CancelCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_CancelComm
and);
this.dgBind.EditCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_EditComman
d);
this.dgBind.UpdateCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_UpdateComm
and);
this.dgBind.ItemDataBound += new
System.Web.UI.WebControls.DataGridItemEventHandler (this.dgBind_ItemDataBound
);

this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgBind_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.EditItem)
{
DataRowView drv = (DataRowView)e.Item.DataItem;
string grade = drv["grade"].ToString();

DropDownList lstGrade = (DropDownList)e.Item.Cells[2].Controls[1];
for(int i=0;i<lstGrade.Items.Count;i++)
{
if(lstGrade.Items[i].Value.Equals(grade))
{
lstGrade.SelectedIndex = i;
break;
}
}

}
}

private void dgBind_EditCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//set edit index
dgBind.EditItemIndex = e.Item.ItemIndex;
BindGrid();
}

private void dgBind_CancelCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
dgBind.EditItemIndex = -1;
BindGrid();
}

private void dgBind_UpdateCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//add update code here
dgBind.EditItemIndex = -1;
BindGrid();
}
}

}
Hope this will be helpful to you. If you have any questions on it, please
feel free to let me know.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)


Nov 18 '05 #9
Hi moondaddy,
I've provided you some suggestion and a simple sample on using DataGrid's
Templdate column to bind data(including Image). You may check out my former
reply. Thanks.
Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
Nov 18 '05 #10
Steve,
I think the databinding expression the IDE generated for you is flawed.. Try
doing a simple,
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>
"moondaddy" <mo*******@nospam.com> wrote in message
news:uX**************@TK2MSFTNGP12.phx.gbl...
OK I figured out the syntax problem, I needed to use a single quote instead of a double quote. Then I found that I could use the properties window to
set the databinding to a column in the datagrid that contains the path to I tried that and it looked like this:

<asp:Image id=Image1 runat="server" ImageUrl='<%# DataBinder.Eval(DsTest1,
"Tables[zTestDataGrid].DefaultView.[0].Path") %>'>

This stared to work but every row in the datagrid got the same image - the
image in the first row in the dataset. So now I need to make each row get
the correct image and not just the first one.

"George Durzi" <gd****@hotmail.com> wrote in message
news:uP**************@TK2MSFTNGP12.phx.gbl...
In my above post, "ImageFilePath" should be replaced by whatever your

column
is named ...

"George Durzi" <gd****@hotmail.com> wrote in message
news:%2***************@TK2MSFTNGP10.phx.gbl...
In your HTML, within the datagrid element ...

<datagrid ..... >
<columns>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgMyImage" runat="server"
ImageURL="<%#DataBinder.Eval(Container, "ImageFilePath")%>">
</ItemTemplate>
</asp:TemplateColumn>
</columns>
</datagrid>

Check out

http://msdn.microsoft.com/library/de...tomcolumns.asp

DataBinder.Eval allows you to bind to your server control's datasource

from
within your HTML. I'm assuming you know and have bound the DataGrid to

it's
data source.
Check out this link for data binding expressions.

Carl Prothman posted this a few posts down:

http://msdn.microsoft.com/library/en...xpressions.asp

"moondaddy" <mo*******@nospam.com> wrote in message
news:%2****************@TK2MSFTNGP09.phx.gbl...
> Thanks. That sounds like a good start. do you know of any examples or > articles on this?
>
>
> "George Durzi" <gd****@hotmail.com> wrote in message
> news:um**************@TK2MSFTNGP11.phx.gbl...
> > Look into the asp:templatecolumn of the datagrid. You can define and item
> > template which could contain an <asp:image> server control with

src=<%#
> some
> > databinding expression"%> using the image path from your DataSet to which
> > you're binding the datagrid
> >
> > hope that helps.
> >
> > "moondaddy" <mo*******@nospam.com> wrote in message
> > news:u9**************@TK2MSFTNGP10.phx.gbl...
> > > Happy Holidays All! I want to load a datagrid with images and text > > (Image,
> > > text, image, text, etc...). The data for this datagrid will be

coming
> > from
> > > sql server and the images are stored as files on the server and not
in
> sql
> > > server, however, the name and path of the images are stored with

the > text
> > in
> > > sql server. I don't have a clue on how to load the images into the > grid,
> > so
> > > can someone please advise on how i can get started with this?
> > >
> > > Thanks.
> > > --
> > > mo*******@nospam.com
> > >
> > >
> >
> >
>
>



Nov 18 '05 #11
Hi moondaddy,

The experssion "<%#
DataBinder.Eval(DsTest1,"Tables[zTestDataGrid].DefaultView.[0].Path") %>"
will always return the first row's "path" in the table since it used the
"0" as the index to specify the first row. Also, I suggest that you try
George Durzi's suggestion, use a simpler databind expression rather than
the one generated by IDE. Such as
<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>
"ImagePath" is the name of a column in a certain DataTable which is set to
the DataGRid's DataSource property.

For more detailed info on the DataBinding Expression Syntax, you can refer
the following article in MSDN:
http://msdn.microsoft.com/library/en...abindingexpres
sionsyntax.asp?frame=true

If you have any questions on it, please feel free to let me know.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)

Nov 18 '05 #12
Thanks Steven,

I got temporarily pulled off the project when you posted this and now I'm
back on it.

Ok I have the grid populating with images and text now. I've even made it
so it has 3 template columns which have images, and 3 text column
(alternating image, text, image...). Some times the last row only has
enough data for 1 or 2 of the images and will be missing the 3rd, or 2nd and
3rd images and text for each. when this happens, the web page displays an
empty image element. Is there any way to put logic in the template so when
there is no image, then template is empty with no img element. To test for
an image, we could possibly test for a greater than zero length path to the
image.

What do you recommend?
"Steven Cheng[MSFT]" <v-******@online.microsoft.com> wrote in message
news:nS**************@cpmsftngxa07.phx.gbl...
Hi moondaddy,

Thank you for using Microsoft Newsgroup Service. Based on your description, you want to get some information on how to add some columns(with text or
Images) in the ASP.NET's DataGrid control, and the controls' value is set
as the data retrieved from a SQLServer Database. Is my understanding of
your problem correct?

If so, I think George Durzi's suggestion is quite good, the TemplateColumn
of the DataGrid control provided the powerful functions for you to
customize a certain DataBind column in DataGrid. You may add different
kinds of serverside or normal html controls into a Template column and set
databind attribute for it. For more detailed description on how to use the
ASP.NET DataGrid's template column, you can view the following article on
MSDN:
http://msdn.microsoft.com/library/en...stomcolumns.as p?frame=true

Also, I've made a generic sample, I used a simulated DataTable to perform
the DataSource, you may change it to your actual DataSource( query from
SQLServer) according to your own situation. Here is the source code:
-------------------------aspx file------------------------------
<%@ Page language="c#" Codebehind="DataGridBind.aspx.cs"
AutoEventWireup="false" Inherits="NewWebApp.DataGridBind"
smartNavigation="False"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>DataGridBind</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="600" align="center" border="1">
<tr>
<td><asp:datagrid id="dgBind" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="index" ReadOnly="True"
HeaderText="Index" />
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"name") %>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" Runat='server' Text='<%#
DataBinder.Eval( Container.DataItem,"name") %>'/>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Grade">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"grade") %>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList runat="server" ID="lstGrade">
<asp:ListItem Value="low">Low</asp:ListItem>
<asp:ListItem Value="normal"
Selected="True">Normal</asp:ListItem>
<asp:ListItem Value="high">High</asp:ListItem>
</asp:DropDownList>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Image">
<ItemTemplate>
<asp:Image id="imgImage" Runat="server" ImageUrl='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:Image>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="txtUrl" Runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Description">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem,"description") %>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox id="Textbox1" TextMode=MultiLine Runat="server"
Text='<%# DataBinder.Eval(Container.DataItem,"description") %>' >
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateColumn>
<asp:EditCommandColumn EditText="Edit" CancelText="Cancel"
UpdateText="Update" HeaderText="Operation" />
</Columns>
</asp:datagrid></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>

--------------------------------aspx.cs codebehind
file------------------------------------------------

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;

namespace NewWebApp
{
/// <summary>
/// Summary description for DataGridBind.
/// </summary>
public class DataGridBind : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgBind;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
BindGrid();
}
}

protected void BindGrid()
{
string baseurl = "http://www.cacti1104.com/images/stuff/icon/001_00";

DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("name");
tb.Columns.Add("grade");
tb.Columns.Add("imageurl");
tb.Columns.Add("description");

for(int i=0;i<15;i++)
{
int index = i+1;
DataRow newrow = tb.NewRow();
newrow["index"] = index.ToString();
newrow["name"] = "name" + index.ToString();
newrow["imageurl"] = baseurl + index.ToString() + ".gif";
newrow["description"] = "default description:" + index.ToString();

switch(index%3)
{
case 0:
newrow["grade"] = "low";
break;
case 1:
newrow["grade"] = "normal";
break;
case 2:
newrow["grade"] = "high";
break;
}

tb.Rows.Add(newrow);
}

dgBind.DataSource = tb;
dgBind.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.dgBind.CancelCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_CancelComm and);
this.dgBind.EditCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_EditComman d);
this.dgBind.UpdateCommand += new
System.Web.UI.WebControls.DataGridCommandEventHand ler(this.dgBind_UpdateComm and);
this.dgBind.ItemDataBound += new
System.Web.UI.WebControls.DataGridItemEventHandler (this.dgBind_ItemDataBound );

this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgBind_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.EditItem)
{
DataRowView drv = (DataRowView)e.Item.DataItem;
string grade = drv["grade"].ToString();

DropDownList lstGrade = (DropDownList)e.Item.Cells[2].Controls[1];
for(int i=0;i<lstGrade.Items.Count;i++)
{
if(lstGrade.Items[i].Value.Equals(grade))
{
lstGrade.SelectedIndex = i;
break;
}
}

}
}

private void dgBind_EditCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//set edit index
dgBind.EditItemIndex = e.Item.ItemIndex;
BindGrid();
}

private void dgBind_CancelCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
dgBind.EditItemIndex = -1;
BindGrid();
}

private void dgBind_UpdateCommand(object source,
System.Web.UI.WebControls.DataGridCommandEventArgs e)
{
//add update code here
dgBind.EditItemIndex = -1;
BindGrid();
}
}

}
Hope this will be helpful to you. If you have any questions on it, please
feel free to let me know.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)


Nov 18 '05 #13
Hi moondaddy,
Thanks for your response. From the problem you mentioned in the reply,
you'd like to dynamically do some modification on the controls in the
TemplateColumns according to the Binding Data's condition, yes? If anything
I've misunderstanded, please feel free to point out.

As for this problem, I think we can implement it using the DataGrid's
"ItemDataBind" event, this event is fired when each DataRow is binded with
Data from the DataSource. At that time, you can get the certain Data the
current binding row will be binded with, also we can get the certain
controls in a certain template column and do some operations on them. To
make it clearly, I've made a sample page to show how to make use of this
event, here is the example page's source:

--------------------------------------------------aspx page
source--------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>GridDemo</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td><asp:datagrid id="dgBind" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn>
<ItemStyle></ItemStyle>
<ItemTemplate>
<asp:TextBox ID="Index" Runat="server" ReadOnly="True" Text='<%#
DataBinder.Eval(Container.DataItem,"index") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemStyle></ItemStyle>
<ItemTemplate>
<asp:Image ID="imgSmall" Runat=server ImageUrl='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:Image>
<asp:Image ID="imgLarge" Runat=server ImageUrl='<%#
DataBinder.Eval(Container.DataItem,"imageurl") %>' >
</asp:Image>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<ItemStyle></ItemStyle>
<ItemTemplate>
<asp:TextBox ID="txtDesc" Runat="server" Text='<%#
DataBinder.Eval(Container.DataItem,"description") %>' >
</asp:TextBox>
<asp:LinkButton ID="lnkDesc" Runat=server Text='<%#
DataBinder.Eval(Container.DataItem,"description") %>'>
</asp:LinkButton>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid></td>
<td></td>
</tr>
<tr>
<td><FONT face=""></FONT></td>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>

------------------------------code-behind page class's
source---------------------------
public class GridDemo : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgBind;

private void Page_Load(object sender, System.EventArgs e)
{
// Put user code to initialize the page here
if(!IsPostBack)
{
BindGrid();
}
}

protected void BindGrid()
{
string baseurl = "http://www.cacti1104.com/images/stuff/icon/001_0";

DataTable tb = new DataTable();
tb.Columns.Add("index");
tb.Columns.Add("imageurl");
tb.Columns.Add("description");

for(int i=0;i<15;i++)
{
int index = i+1;
DataRow newrow = tb.NewRow();

newrow["index"] = index.ToString();

if(index<10)
{
newrow["imageurl"] = baseurl + "0" + index.ToString() + ".gif";
}
else
{
newrow["imageurl"] = baseurl + index.ToString() + ".gif";
}

newrow["description"] = "default description:" + index.ToString();
tb.Rows.Add(newrow);
}

dgBind.DataSource = tb;
dgBind.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: This call is required by the ASP.NET Web Form Designer.
//
InitializeComponent();
base.OnInit(e);
}

/// <summary>
/// Required method for Designer support - do not modify
/// the contents of this method with the code editor.
/// </summary>
private void InitializeComponent()
{
this.Load += new System.EventHandler(this.Page_Load);
this.dgBind.ItemDataBound += new
DataGridItemEventHandler(this.dgBind_ItemDataBound );

}
#endregion

private void dgBind_ItemDataBound(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
DataRowView drv = (DataRowView)e.Item.DataItem;
int index = int.Parse(drv["index"].ToString());
System.Web.UI.WebControls.Image imgSmall =
(System.Web.UI.WebControls.Image)e.Item.Cells[1].FindControl("imgSmall");
System.Web.UI.WebControls.Image imgLarge =
(System.Web.UI.WebControls.Image)e.Item.Cells[1].FindControl("imgLarge");
System.Web.UI.WebControls.TextBox txtDesc =
(System.Web.UI.WebControls.TextBox)e.Item.Cells[2].FindControl("txtDesc");
System.Web.UI.WebControls.LinkButton lnkDesc =
(System.Web.UI.WebControls.LinkButton)e.Item.Cells[2].FindControl("lnkDesc")
;
//the following code simulate the different modification under
different condition
if( index%2 ==0)
{
imgSmall.Visible = true;
imgLarge.Visible = false;
txtDesc.Visible = true;
lnkDesc.Visible = false;

}
else
{
imgSmall.Visible = false;
imgLarge.Visible = true;
txtDesc.Visible = false;
lnkDesc.Visible = true;

}

}
}
}
------------------------------------------------------------------
In the above sample, I use the "dgBind" Grid's "ItemDataBound" event to
dynamically choose
which controls to show and which controls to hide. As for your problem, you
can also get the Data which will be binded from the DataRowView and
determined which Image control need to be hidden, and then retrieve the
certain control using the e.Item.Cells[cellindex].FindControl(control
name). Then do the proper modification on it.

Please try out my suggestion to see whether it helps. If you have any
questions, please feel free to post here.
Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)


Nov 18 '05 #14

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Simon Harris | last post: by
1 post views Thread by mursyidatun ismail | last post: by
3 posts views Thread by Mark Wiewel | last post: by
7 posts views Thread by Ausclad | last post: by
2 posts views Thread by rn5a | last post: by
reply views Thread by Jim | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.