473,405 Members | 2,349 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,405 software developers and data experts.

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 1586
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Simon Harris | last post by:
Hi All, I wish to populate more than one datagrid from the same OleDBCommand. The code I have is: Dim objCmd As New OleDbCommand(strSql, objConn) Then... ...
4
by: ree32 | last post by:
I have a placeholder and depending on a user input(a drop downlist) when the user clicks a button I dynamically create a number of datagrids and fill them with data from a database. But the problem...
0
by: Scott Meddows | last post by:
I'm having trouble scrolling some datagrids so they sync up... I have two identical datagrids on a form, filled with eh same dataset. I want a user to be able to scroll on the datasets and the...
1
by: mursyidatun ismail | last post by:
Dear all, database use: Ms Access. platform: .Net i'm trying to update a record/records in a table called t_doctors by clicking da edit link provided in the database. when i ran through da...
4
by: | last post by:
Hello. In SQL Server Query Analyzer, if I type in, say, 2 select queries, it returns 2 datagrids of results, with a scrollbar on the right to scroll between the 2 (or more) datagrids. I wanted to...
3
by: Mark Wiewel | last post by:
hi all, i am a newbie in ASP.NET and i couldn't find the solution to this one: i have a form with three datagrids on it. i would like to align them vertically with a space between each grid of...
7
by: Ausclad | last post by:
Ok, ill try again..... It seems fairly simple. I have two combo boxes in a datagrid. The datagrid is bound to a a table in a dataset. The two combo boxes are bound to a single data table...
2
by: rn5a | last post by:
In a shopping cart app, a ASPX page retrieves the order details & personal details of a user from a MS-Access database table depending upon the username of the user. The order details of a...
0
by: Jim | last post by:
OK here's my disclaimer: I'm very new to ASP.NET and posting on Google Groups, so please bear with me and feel free to correct either the way I code or the way I post. I have an ASP.NET page...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.