Member Avatar for ansari.wajid

Hi All

I need to add mouseover event on hyperlink which is in a gridview.

What actually I need is displaying names of states in a gridview as hyperlink and when I take mouse over any state, it should navigate to a new page taking that stateid as querystring, So that I could request that stateid through query string and display information about that particular state in a newpage.
Any help is appreciated, Thanks in advance.

with Regards
wajid

  • 3 Contributors
  • 2 Replies
  • 98 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by aankurpatel

Dani AI

Generated

asked for binding details and offered a server-side option. Below is a client-side pattern that keeps GridView markup simple, preserves keyboard/no-JS fallback, and avoids immediate, accidental navigation by using a short delay and cancel-on-exit.

Render each state as a normal anchor (so keyboard users and no-JS visitors still get the link). In a TemplateField you can emit the target URL and a data attribute for the ID:

<asp:TemplateField>
  <ItemTemplate>
    <a class="state-link" href="StateDetails.aspx?stateid=<%# Eval("StateID") %>" data-stateid='<%# Eval("StateID") %>'>
      <%# Eval("StateName") %>
    </a>
  </ItemTemplate>
</asp:TemplateField>

Attach a small client-side handler that starts a timer on hover and cancels it on mouseout. This gives users a chance to move the pointer away and avoids jumps when the pointer just passes over an item:

<script>
(function () {
  var delay = 300; // ms
  var timers = new WeakMap();

  document.addEventListener('mouseover', function (ev) {
    var link = ev.target.closest && ev.target.closest('.state-link');
    if (!link) return;
    var t = setTimeout(function () { window.location.href = link.href; }, delay);
    timers.set(link, t);
  });

  document.addEventListener('mouseout', function (ev) {
    var link = ev.target.closest && ev.target.closest('.state-link');
    var t = link && timers.get(link);
    if (t) { clearTimeout(t); timers.delete(link); }
  });
})();
</script>

Notes and troubleshooting:

  • Hover-driven navigation is unreliable on touch devices and can hurt accessibility; consider click or hover-to-prefetch + explicit navigation instead.
  • Keep the href populated so keyboard/no-JS users work; JS simply automates navigation.
  • If using older browsers, polyfill Element.closest and WeakMap, or attach handlers directly to each link.
  • If navigation doesn't occur, confirm the rendered anchors exist and that your script runs after the GridView is in the DOM.

For event semantics and browser compatibility, see the relevant MDN docs (for example, Element.closest).

Member Avatar for sms_net

Can u show me how u r binding the Gridview, so that i can get an idea on ur Question. Because there is a onmouseover event for hyperlink which u can use in ur case

Member Avatar for aankurpatel

Can u show me how u r binding the Gridview, so that i can get an idea on ur Question. Because there is a onmouseover event for hyperlink which u can use in ur case

You can use RowDataBound event of the GridView(GV) and then can use the eventarg e to Find the HyperLink using FindControl() method. Then you can insert a attriubute to that hyperlink of Mouseover.

hyplink.Attributes.Add("onmouseover","<text>");

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.