Fire an Event by GridView Row Hovering

Question

1.00/5 (1 vote)

See more:

Hi,

I want to fire an imagebutton click event by hovering of a gridview rows. One thing is, the Imagebutton should be inside of that Gridview.

Is their any way to do this?

Please help me..

Thanks in Advance..
this is my gridview.

HTML

<table cellspacing="0" cellpadding="3" id="ContentPlaceHolder1_grd_instructor" style="color:Black;background-color:White;border-color:#627074;border-width:1px;border-style:Solid;width:100%;border-collapse:collapse;">
            <tr class="newhead">
                <th align="center" scope="col">#</th><th align="center" scope="col">Course</th><th align="center" scope="col">Students</th><th align="left" scope="col">View</th>
            </tr><tr class="newRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_0">1</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_0">CHE101</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_0">0</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl02$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_0" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr><tr class="newAltRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_1">2</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_1">IE300</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_1">0</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl03$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_1" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr><tr class="newRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_2">3</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_2">IE-205</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_2">11</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl04$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_2" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr><tr class="newAltRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_3">4</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_3">IE202</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_3">3</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl05$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_3" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr><tr class="newRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_4">5</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_4">IE203</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_4">3</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl06$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_4" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr><tr class="newAltRowStyle" onmouseover="javascript:SetMouseOver(this,&#39;ContentPlaceHolder1_CheckID&#39;)" onmouseout="javascript:SetMouseOut(this)">
                <td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblno_5">6</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblscrs_5">NE-55</span>
                    </td><td align="center">
                        <span id="ContentPlaceHolder1_grd_instructor_lblstds_5">0</span>
                    </td><td align="left" style="width:20px;">
                    <input type="image" name="ctl00$ContentPlaceHolder1$grd_instructor$ctl07$Imageedit" id="ContentPlaceHolder1_grd_instructor_Imageedit_5" title="View" src="../App_Themes/images/active.png" />

                    <a id="LButton3"  önmouseover="javascript:__doPostBack('Button2','')">LinkButton</a>
                </td>
            </tr>
        </table>

Posted 2-Aug-13 19:50pm

vineeth raju

Updated 2-Aug-13 21:06pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

v5

Add a Solution

Comments

Jameel VM 3-Aug-13 2:39am

ofcourse.please post the html mark up of gridview not the exact gridview mark up. the table structure

vineeth raju 3-Aug-13 2:48am

thanks..
check my question.. i have improved my question.
is it enough?

Jameel VM 3-Aug-13 2:50am

not this markup. after running your application you can copy the mark up that rendered in the browser by right click and selecting the viewsource.

vineeth raju 3-Aug-13 2:59am

check now please...
you need this one right?

vineeth raju 3-Aug-13 3:11am

is any way to do that?

Jameel VM 3-Aug-13 6:21am

yes

vineeth raju 5-Aug-13 2:00am

how? please explain

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 3-Aug-13 3:13am

So, what is the problem. What have you tried to achieve that?

vineeth raju 3-Aug-13 3:21am

i am creating a dashboard. That contains a charts. If i hover one gridrow then the graph should come. In each row hovering i need the charts corresponded to that row.

2 solutions

Solution 1

Firing one event on response to another one is generally a bad approach. In some systems, you cannot fire an even at all from anywhere but declaring class.

In your case, you don't really need it. Your request effectively means that you need to handle hovering event in certain way, and this should have exactly the same effect as clicking some button. If so, do exactly that, and nothing else. In other words, do the following: define some function with some parameters. Call this function from at least two places: one from the handler of hover event, another one, from the handler of the button click event.

That's all. As simple as that.

—SA

Posted 3-Aug-13 19:38pm

Sergey Alexandrovich Kryukov

Comments

vineeth raju 4-Aug-13 23:47pm

i didn't get u.. can you please explain?

Sergey Alexandrovich Kryukov 5-Aug-13 0:51am

I'll gladly explain if you tell me what's unclear.
—SA

vineeth raju 5-Aug-13 1:57am

thanks..
i wrote function in button click event. But how to write it on hover event?

Sergey Alexandrovich Kryukov 5-Aug-13 10:19am

What's the difference? What's not clear?
—SA

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

vineeth raju · Accepted Answer · 2013-08-05T18:41:00

javascript

JavaScript

<script type="text/javascript">
            var oldgridcolor;
            function SetMouseOver(element, img, index) {

                //alert(index);
              
                document.getElementById('ContentPlaceHolder1_lblerr1').innerText = index;
                document.getElementById('<%= CheckID.ClientID %>').value = index;
                //alert(index);

            oldgridcolor = element.style.backgroundColor;
                //alert("a2");
            element.style.backgroundColor = '#ffeb95';
                // alert("a3");
            element.style.cursor = 'pointer';
                // alert("a4");
            element.style.textDecoration = 'underline';


                // alert("a5");

            ClickLink(img, index);
        }

        function SetMouseOut(element) {

            element.style.backgroundColor = oldgridcolor;
            element.style.textDecoration = 'none';

        }
</script></script>

put a link button in gridview and also declare three hidden fields

ASP.NET

<itemtemplate>
                   <asp:imagebutton id="Imageedit" runat="server" causesvalidation="False" commandargument="<%# Eval("BATCH_ID") %>" imageurl="~/App_Themes/images/active.png" tooltip="View" onclick="Imageedit_Click" xmlns:asp="#unknown" />
                   <a id="LButton3" onmouseover="javascript:__doPostBack('Button2','')">LinkButton<%# Container.DataItemIndex+1  %></a>
               </itemtemplate>

hidden fields