Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

MouseOver on GridView to display an Image

Posted on 2010-09-22
17
2,041 Views
Last Modified: 2012-05-10
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="carlistGridView_RowDataBound">
        <RowStyle BackColor="#EFF3FB" HorizontalAlign="Center" />
        <Columns>
            <asp:ImageField DataImageUrlField="ImagePath" 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.
0
Comment
Question by:Itudk_2010
  • 9
  • 7
17 Comments
 
LVL 14

Expert Comment

by:robasta
ID: 33741865
this is similar to what you are looking for: http://www.ezzylearning.com/tutorial.aspx?tid=2861497
0
 

Author Comment

by:Itudk_2010
ID: 33745794
Hi robasta,

I tried this example but unsuccessful. It gives me a web service 500 error.

Any other ideas?
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33761067
You could use something like this:

Header:

    <script language="javascript" type="text/javascript" src="js/jquery.js"></script>
    <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_RowDataBound">
            <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("ProviderName", 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(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ((HtmlGenericControl)e.Row.FindControl("divProvider")).Attributes.Add("onmouseover", "showImage('" + e.Row.FindControl("imgTest").ClientID + "')");
            ((HtmlGenericControl)e.Row.FindControl("divProvider")).Attributes.Add("onmouseout", "hideImage('" + e.Row.FindControl("imgTest").ClientID + "')");
        }
    }
0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 

Author Comment

by:Itudk_2010
ID: 33763609
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.
0
 

Author Comment

by:Itudk_2010
ID: 33763642
Also you forgot to send me the file: src="js/jquery.js". Is it in the JQuery library?
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33771120
Yes, is the jquery library.    The version I used is v1.4.2
jquery.js
0
 

Author Comment

by:Itudk_2010
ID: 33772459
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.BusinessComponents.DataAccess.DBHelper.GetSqlConnection;
            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(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ((HtmlGenericControl)e.Row.FindControl("divProvider")).Attributes.Add("onmouseover", "showImage('" + e.Row.FindControl("imgTest").ClientID + "')");
            ((HtmlGenericControl)e.Row.FindControl("divProvider")).Attributes.Add("onmouseout", "hideImage('" + e.Row.FindControl("imgTest").ClientID + "')");
        }
    }

aspx page:

<head runat="server">
    <title></title>
   
    <script src="Scripts/jquery.js" type="text/javascript"></script>
     
    <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_RowDataBound">
            <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
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33773681
Verify if the value of your column CarImage has the exact location of your images
0
 

Author Comment

by:Itudk_2010
ID: 33774617
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?              
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33774691
Can you send me the HTML that results after the execution?, I want to see the the value of the src attribute
0
 

Author Comment

by:Itudk_2010
ID: 33777921
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
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33780287
Mmm... you could do it with absolute positioning... let me try to build a sample for your
0
 

Author Comment

by:Itudk_2010
ID: 33781445
Thanks a lot. waitng for your reply.
0
 
LVL 15

Expert Comment

by:jorge_toriz
ID: 33793635
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"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
        $('span.spanWithImage').mousemove(mouseMove);
    });
    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></tr><tr><td><img src=\'' + imgSrc + '\' /></td></tr></table>');
            newElement.css({
                'position': 'absolute',
                'left': e.pageX,
                'top': e.pageY
            });
            newElement.prependTo($($(e)[0].currentTarget.parentNode));
        }
    }
</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>
0
 

Author Comment

by:Itudk_2010
ID: 33794243
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.
0
 
LVL 15

Accepted Solution

by:
jorge_toriz earned 500 total points
ID: 33794533
You can change this line of code:

var newElement = $('<table id=\'' + tableId + '\'><tr><td align=\'right\'><span style=\'cursor:pointer;\' onclick="removeTable(\'' + tableId + '\')">Close</span></td></tr><tr><td><img style=\'width: 200px;\' src=\'' + imgSrc + '\' /></td></tr></table>');

The change is in the style that is applied to the image element
0
 

Author Comment

by:Itudk_2010
ID: 33797538
Hi jorge_toriz,

Thanks a lot for your help, it works fine.

   
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If I have to fix slow responding website my first thoughts are server side optimizations: the database may not be optimized or caching is not enabled, or things like that. We often overlook another major part of our web application: the client. We o…
Performance in games development is paramount: every microsecond counts to be able to do everything in less than 33ms (aiming at 16ms). C# foreach statement is one of the worst performance killers, and here I explain why.
This video teaches viewers how to create their own website using cPanel and Wordpress. Tutorial walks users through how to set up their own domain name from tools like Domain Registrar, Hosting Account, and Wordpress. More specifically, the order in…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question