Itudk_2010
asked on
MouseOver on GridView to display an Image
Hi all,
I have a GridView which displays information about Cars. I would like to display Car images on each row of GridView whenever a user mouse overs the Make or Model Fields in the GridView. Below is the GridView:
<asp:GridView ID="carlistGridView" runat="server" AutoGenerateColumns="False " Font-Size="Small"
CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="6"
Width="600px" onrowdatabound="carlistGri dView_RowD ataBound">
<RowStyle BackColor="#EFF3FB" HorizontalAlign="Center" />
<Columns>
<asp:ImageField DataImageUrlField="ImagePa th" HeaderText="Company Name" >
</asp:ImageField>
<asp:BoundField DataField="Make" HeaderText="Car Make" />
<asp:BoundField DataField="Model" HeaderText="Car Model" />
<asp:BoundField DataField="Size" HeaderText="Car Size" />
<asp:ButtonField CommandName="ChooseCars" Text="Choose >>" ButtonType="Button" />
</Columns>
</asp:GridView>
Any ideas?
Thanks for your help.
I have a GridView which displays information about Cars. I would like to display Car images on each row of GridView whenever a user mouse overs the Make or Model Fields in the GridView. Below is the GridView:
<asp:GridView ID="carlistGridView" runat="server" AutoGenerateColumns="False
CellPadding="4" ForeColor="#333333" GridLines="None" PageSize="6"
Width="600px" onrowdatabound="carlistGri
<RowStyle BackColor="#EFF3FB" HorizontalAlign="Center" />
<Columns>
<asp:ImageField DataImageUrlField="ImagePa
</asp:ImageField>
<asp:BoundField DataField="Make" HeaderText="Car Make" />
<asp:BoundField DataField="Model" HeaderText="Car Model" />
<asp:BoundField DataField="Size" HeaderText="Car Size" />
<asp:ButtonField CommandName="ChooseCars" Text="Choose >>" ButtonType="Button" />
</Columns>
</asp:GridView>
Any ideas?
Thanks for your help.
this is similar to what you are looking for: http://www.ezzylearning.com/tutorial.aspx?tid=2861497
ASKER
Hi robasta,
I tried this example but unsuccessful. It gives me a web service 500 error.
Any other ideas?
I tried this example but unsuccessful. It gives me a web service 500 error.
Any other ideas?
You could use something like this:
Header:
<script language="javascript" type="text/javascript" src="js/jquery.js"></scrip t>
<script language="javascript" type="text/javascript">
function showImage(ctl) {
$('#' + ctl).css('display', 'block');
}
function hideImage(ctl) {
$('#' + ctl).css('display', 'none');
}
</script>
Body:
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false " OnRowDataBound="gvImages_R owDataBoun d">
<Columns>
<asp:TemplateField HeaderText="Provider">
<ItemTemplate>
<div id="divProvider" runat="server"><%# Eval("ProviderName") %></div>
<img id="imgTest" runat="server" src='<%# Eval("ImageURL") %>' style="display: none;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable tblProviders = new DataTable("tblProviders");
tblProviders.Columns.Add(" ImageURL", typeof(string));
tblProviders.Columns.Add(" ProviderNa me", typeof(string));
tblProviders.Rows.Add(new object[] { "http://www.google.com/images/logos/ps_logo2.png", "Google" });
tblProviders.Rows.Add(new object[] { "http://www.blackberrysites.com/wp-content/uploads/2009/09/yahoo-finance-logo.png", "Yahoo!" });
tblProviders.AcceptChanges ();
gvImages.DataSource = tblProviders;
gvImages.DataBind();
}
}
protected void gvImages_RowDataBound(obje ct sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow )
{
((HtmlGenericControl)e.Row .FindContr ol("divPro vider")).A ttributes. Add("onmou seover", "showImage('" + e.Row.FindControl("imgTest ").ClientI D + "')");
((HtmlGenericControl)e.Row .FindContr ol("divPro vider")).A ttributes. Add("onmou seout", "hideImage('" + e.Row.FindControl("imgTest ").ClientI D + "')");
}
}
Header:
<script language="javascript" type="text/javascript" src="js/jquery.js"></scrip
<script language="javascript" type="text/javascript">
function showImage(ctl) {
$('#' + ctl).css('display', 'block');
}
function hideImage(ctl) {
$('#' + ctl).css('display', 'none');
}
</script>
Body:
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false
<Columns>
<asp:TemplateField HeaderText="Provider">
<ItemTemplate>
<div id="divProvider" runat="server"><%# Eval("ProviderName") %></div>
<img id="imgTest" runat="server" src='<%# Eval("ImageURL") %>' style="display: none;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Code:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable tblProviders = new DataTable("tblProviders");
tblProviders.Columns.Add("
tblProviders.Columns.Add("
tblProviders.Rows.Add(new object[] { "http://www.google.com/images/logos/ps_logo2.png", "Google" });
tblProviders.Rows.Add(new object[] { "http://www.blackberrysites.com/wp-content/uploads/2009/09/yahoo-finance-logo.png", "Yahoo!" });
tblProviders.AcceptChanges
gvImages.DataSource = tblProviders;
gvImages.DataBind();
}
}
protected void gvImages_RowDataBound(obje
{
if (e.Row.RowType == DataControlRowType.DataRow
{
((HtmlGenericControl)e.Row
((HtmlGenericControl)e.Row
}
}
ASKER
Hi jorge_toriz,
Thanks for the code. Do I have to add the JQuery libraries in Visual Studio? If yes what version? I am using .NET framework 3.5 and Visual Studio 2008.
Looking forward to your reply.
Thanks for the code. Do I have to add the JQuery libraries in Visual Studio? If yes what version? I am using .NET framework 3.5 and Visual Studio 2008.
Looking forward to your reply.
ASKER
Also you forgot to send me the file: src="js/jquery.js". Is it in the JQuery library?
Yes, is the jquery library. The version I used is v1.4.2
jquery.js
jquery.js
ASKER
Hi jorge_toriz,
Thanks for the code. I tried your example but it doesn't display the image on mouseover, it just displays the cross sign when I mouse over on the field called "Make". I would like to display a particular Car Image when I mouseover on the "Make" field in the GridView. Could you take a look at the following code.
I have just added some code in the page_load, the rest of the code is your.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlConnection con = CarRental.BusinessComponen ts.DataAcc ess.DBHelp er.GetSqlC onnection;
con.Open();
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter("SELECT Make, Model, Category, CarImage, HourlyCharges FROM Car", con);
da.Fill(ds, "Record");
gvImages.DataSource = ds;
gvImages.DataBind();
}
}
protected void gvImages_RowDataBound(obje ct sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow )
{
((HtmlGenericControl)e.Row .FindContr ol("divPro vider")).A ttributes. Add("onmou seover", "showImage('" + e.Row.FindControl("imgTest ").ClientI D + "')");
((HtmlGenericControl)e.Row .FindContr ol("divPro vider")).A ttributes. Add("onmou seout", "hideImage('" + e.Row.FindControl("imgTest ").ClientI D + "')");
}
}
aspx page:
<head runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></s cript>
<script language="javascript" type="text/javascript">
function showImage(ctl) {
$('#' + ctl).css('display', 'block');
}
function hideImage(ctl) {
$('#' + ctl).css('display', 'none');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false " OnRowDataBound="gvImages_R owDataBoun d">
<Columns>
<asp:TemplateField HeaderText="Provider">
<ItemTemplate>
<div id="divProvider" runat="server"><%# Eval("Make")%></div>
<img id="imgTest" runat="server" src='<%# Eval("CarImage") %>' style="display: none;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
any ideas?
Looking forward to your reply.
Thanks
Thanks for the code. I tried your example but it doesn't display the image on mouseover, it just displays the cross sign when I mouse over on the field called "Make". I would like to display a particular Car Image when I mouseover on the "Make" field in the GridView. Could you take a look at the following code.
I have just added some code in the page_load, the rest of the code is your.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SqlConnection con = CarRental.BusinessComponen
con.Open();
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter("SELECT Make, Model, Category, CarImage, HourlyCharges FROM Car", con);
da.Fill(ds, "Record");
gvImages.DataSource = ds;
gvImages.DataBind();
}
}
protected void gvImages_RowDataBound(obje
{
if (e.Row.RowType == DataControlRowType.DataRow
{
((HtmlGenericControl)e.Row
((HtmlGenericControl)e.Row
}
}
aspx page:
<head runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></s
<script language="javascript" type="text/javascript">
function showImage(ctl) {
$('#' + ctl).css('display', 'block');
}
function hideImage(ctl) {
$('#' + ctl).css('display', 'none');
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false
<Columns>
<asp:TemplateField HeaderText="Provider">
<ItemTemplate>
<div id="divProvider" runat="server"><%# Eval("Make")%></div>
<img id="imgTest" runat="server" src='<%# Eval("CarImage") %>' style="display: none;" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
any ideas?
Looking forward to your reply.
Thanks
Verify if the value of your column CarImage has the exact location of your images
ASKER
Should I provide the whole path of the Image here in the following code?
<img id="imgTest" runat="server" src='<%# Eval("CarImage") %>' style="display: none;" />
I am storing the CarImage path in the database and the actual images are stored in the Images folder in the root of the web application. In the databse the CarImage column contains: ~/Images/imageofcar.jpg.
any ideas?
<img id="imgTest" runat="server" src='<%# Eval("CarImage") %>' style="display: none;" />
I am storing the CarImage path in the database and the actual images are stored in the Images folder in the root of the web application. In the databse the CarImage column contains: ~/Images/imageofcar.jpg.
any ideas?
Can you send me the HTML that results after the execution?, I want to see the the value of the src attribute
ASKER
It works now, it displays the car image when I mouseover it. But I want the image as a popup. Right now it displays the image but the width and height of the row in GridView becomes wide. I did use Ajax PopupExtender control before but it did not work. Is it possible with the above code you sent me or is there any way I can make it a popup image when mouseover on the row without increasing the width and height of the GridView row?
Thanks again for your help. Looking forward to your reply
Thanks again for your help. Looking forward to your reply
Mmm... you could do it with absolute positioning... let me try to build a sample for your
ASKER
Thanks a lot. waitng for your reply.
I wrote an example that uses only HTML, you need to modify it to accomodate to your solution:
Head:
<script language="javascript" type="text/javascript" src="js/jquery.js"></scrip t>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$('span.spanWithImage').mo usemove(mo useMove);
});
function removeTable(tableId) {
$('#' + tableId).remove();
}
function mouseMove(e) {
var spanId = $(e)[0].currentTarget.id;
var tableId = spanId + '_table';
if ($('#' + tableId).length == 0) {
var imgSrc = $(e)[0].currentTarget.img;
var newElement = $('<table id=\'' + tableId + '\'><tr><td align=\'right\'><span style=\'cursor:pointer;\' onclick="removeTable(\'' + tableId + '\')">Close</span></td></t r><tr><td> <img src=\'' + imgSrc + '\' /></td></tr></table>');
newElement.css({
'position': 'absolute',
'left': e.pageX,
'top': e.pageY
});
newElement.prependTo($($(e )[0].curre ntTarget.p arentNode) );
}
}
</script>
Body:
<span class="spanWithImage" id="lblGoogle" img="http://www.google.com/images/logos/ps_logo2.png" style="border-style: solid; border-width: 1px;">Google</span>
Head:
<script language="javascript" type="text/javascript" src="js/jquery.js"></scrip
<script language="javascript" type="text/javascript">
$(document).ready(function
$('span.spanWithImage').mo
});
function removeTable(tableId) {
$('#' + tableId).remove();
}
function mouseMove(e) {
var spanId = $(e)[0].currentTarget.id;
var tableId = spanId + '_table';
if ($('#' + tableId).length == 0) {
var imgSrc = $(e)[0].currentTarget.img;
var newElement = $('<table id=\'' + tableId + '\'><tr><td align=\'right\'><span style=\'cursor:pointer;\' onclick="removeTable(\'' + tableId + '\')">Close</span></td></t
newElement.css({
'position': 'absolute',
'left': e.pageX,
'top': e.pageY
});
newElement.prependTo($($(e
}
}
</script>
Body:
<span class="spanWithImage" id="lblGoogle" img="http://www.google.com/images/logos/ps_logo2.png" style="border-style: solid; border-width: 1px;">Google</span>
ASKER
Hi jorge_toriz,
Thanks for your time and help. It shows the image much bigger, how is it possible to make the popup image smaller? I don't know that much JavaScript or JQuery but I will try my best to make the changes.
I will let you know when it works.
Thanks again for your help.
Thanks for your time and help. It shows the image much bigger, how is it possible to make the popup image smaller? I don't know that much JavaScript or JQuery but I will try my best to make the changes.
I will let you know when it works.
Thanks again for your help.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Hi jorge_toriz,
Thanks a lot for your help, it works fine.
Thanks a lot for your help, it works fine.