how to highlight gridview cell on the mouse click in asp.net?

Question

$('#<%= gr.ClientID%>tr').click(function () {
            $(this).addClass('highlightCell');
        }, function () {
            $(this).removeClass('highlightCell');
        });
    });
<asp:GridView ID="gr" runat="server" DataKeyNames="Name" AutoGenerateColumns="false">

this code work for mouseover but not for mouse click.
Please help me.
Thanks in advance

code seems like you change table row color on click. it not working? Possibly you need `$('#<%= gr.ClientID%> td')` instead — Grundy, Feb 24 '14 at 10:48
that's a wrong syntax for jQuery `.click` event. you can have just one handler inside the click — Manish Mishra, Feb 24 '14 at 10:49
Use This Link : http://stackoverflow.com/questions/16543683/vb-net-mouse-click-single-cell-of-gridview-change-backcolor-and-output-cell-pos — Dilip Suvagiya, Feb 24 '14 at 10:59
possibly you try attach event to rows before render, try move script after grid declaration — Grundy, Feb 24 '14 at 11:01

Manish Mishra · Answer 1 · 2014-02-24T11:00:45.040

so basically, what you need is to do something(highlighting the row) when mouse is pressed over a given cell, and remove the highlighting when mouse is released. jQuery .click is not what you should be using. You should be looking at jQuery's .mouseup and .mousedown events.

try this:

$('td', '#<%= gr.ClientID%>')
  .mouseup(function() {
       $(this).removeClass('highlightCell');
  })
  .mousedown(function() {
    $(this).addClass('highlightCell');
  });

also, you need to bind the events to the TDs of your gridView, so you need to look for tds only inside your gridView, learn how to scope the dom traversal of the jquery. you should scope restrict your selector like this :

$('selector', 'scope')

how to highlight gridview cell on the mouse click in asp.net?

1 Answers1