CODEWITHSUNDEEP
javascriptjqueryjqgrid
Suhail Gupta
Suhail Gupta

Reputation: 23276

Disable click anywhere except one cell (in the selected row) when a cell enters the edit mode

How do I disable click on all grid cells except one cell in a row? I am trying to disable clicks on any cell in the grid, when a cell enters the edit mode. So I tried:

$('#QCStatus tr td').bind('click',function() {
        return false;
});

//QCStatus is the id of the grid

To enable click on a cell, in the same row that is being edited, I tried:

$('#QCStatus tr.selected-row td[aria-describedby="QCStatus_ActionIcons"]').bind('click',function() {
        return true;
});

But this doesn't have any effect as click is disabled by the first snippet. What is the correct way to achieve this?

Upvotes: 0

Views: 942

Answers (3)

sridhar
sridhar

Reputation: 622

add a "disabled" attribute to those buttons where you want to disable the click.

for a div disabled attribute doesn't work.

in those cases use "pointer-events:none;" in your css of that particular divs.

Upvotes: 0

Jai
Jai

Reputation: 74748

You can exclude the selected row it with :not() here: 

$('#QCStatus tr:not(.selected) td').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id='QCStatus'>
  <tr><td>click</td></tr>
  <tr class='selected'><td>click</td></tr>
  <tr><td>click</td></tr>
  <tr><td>click</td></tr>
</table>

<pre></pre>

This will bind the click on all the tds which are not the children of tr.selected.

As per your comment you can add more:

How could I just exclude the td in the selected row td[aria-describedby="QCStatus_ActionIcons"]? 

$('#QCStatus tr:not(.selected) td:not([aria-describedby="QCStatus_ActionIcons"])').on('click', function(e) {
  $('pre').prepend('event :::: '+e.type+'\n');
  return false;
});

Upvotes: 1

Rayon
Rayon

Reputation: 36609

Use event.stoppropagation() for element to be eliminated for click event. It prevents further propagation of the current event.

$('tr').on('click', function() {
  console.log('clicked!');
});
$('.disabled').on('click', function(e) {
  e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>
  <tr>
    <td>Hello</td>
    <td class="disabled">Disabled</td>
  </tr>

</table>

Fiddle here

Upvotes: 1

Related Questions