Reputation: 5464
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
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