CODEWITHSUNDEEP
jqueryjqgrid
Arun Jain
Arun Jain

Reputation: 5464

Disable table column click event except having anchor tag in column

I am using jqGrid for displaying the user list. When I clicked in any column, the checkbox shown in first column gets checked.

So to disable this functionality. I have implemented the following and written in gridComplete event, which is working fine for some scenarios.

$('table#user_entries tr td:not(":first-child")').click(function(e) {
      e.preventDefault();
      return false;
});

But it doesn't allow me to click on a link in any column. Please suggest, How I can prevent the click event for all those columns not containing the anchor tag.

There are variable number of columns in the table depending on the layout I am selecting to display.

I don't think any issue with the jqGrid. As if I can assume it as a normal html table, I am looking a solution like:

$('table#user_entries tr td:not("containing any anchor tag")').click(function(e) {
  e.preventDefault();
  return false;
});

Upvotes: 0

Views: 1601

Answers (2)

Oleg
Oleg

Reputation: 222017

If I correctly understand your problem you uses multiselect: true and you need to prevent selection of rows on click on other columns as "multiselect" column. In other words you need just change the behavior of jqGrid. Preventing of click events is not the goal.

I described in the old answer the way how to implement the required behavior. Just to comment the code from the answer. jqGrid already have one click handler on the <table> element. It's much more effective as registering click handlers on every cell. The grid body will be rebuild on sorting or other refreshing of the grid. So you wrote that you register click handlers inside of grigComplete/loadComplete. It's not so effective.

Event bubbling allows to handle click on every child element without required to register event handlers on every children. During processing of click event jqGrid "ask" beforeSelectRow callback whether the click should follow to selection of the row. So you can decide which clicks follows row selection and which not. e.target is the clicked element. The construct $.jgrid.getCellIndex($(e.target).closest("td")[0]) gives you the index of the clicked column. The cm[i].name is the name of the clicked column. Multiselect column will be created by jqGrid and it have always the name "cb". So the code

beforeSelectRow: function (rowid, e) {
    var $self = $(this),
        $td = $(e.target).closest("td"),
        iCol = $.jgrid.getCellIndex($td[0]),
        cm = $self.jqGrid("getGridParam", "colModel");

    return (cm[iCol].name === "cb");
}

allows selection of rows only in case of click on the cell of multiselect column.

The corresponding demo demonstrates the results. It's important that the code get minimal resources of the web browsers and don't change any behavior of click event on any cells of the grid, so it have no side effects.

Upvotes: 1

kapantzak
kapantzak

Reputation: 11750

Try detecting if there is an anchor inside the clicked td like this: JSFidle

$('table#user_entries tr td').click(function(e) {
    var linkExists = $(this).find('a').length;

    if (linkExists !== 0) {
         e.preventDefault();               
    } 
})

Upvotes: 0

Related Questions