Is it possible to Stop jqGrid row(s) from being selected and/or highlighted?

Question

I've looked at the documentation but I've been unable to find an answer. Is there a way to prevent a row from being highlighted when selected? That or even a way to stop the row being selected at all. I like the "hoverrows: true" option, but ideally I would like to stop a row from being selected on-click.

Thanks,

Update: I've been able to "hackily" implement something which seems to be an interim fix. I don't really like it at all and would idealy like a better solution, if there is one...

I have found that if I pass the option

onSelectRow: function(rowid, status) {
    $('#'+rowid).removeClass('ui-state-highlight');
}

when I instantiate the jqGrid, I can strip the highlight when it is added.

Is there another, more ideal, way to do this?

Just curious: All rows, rows meeting a specific criteria (i.e., "odd" rows), or a specific single row? — Peter Bailey, Jan 27 '10 at 15:44
any row which is clicked on. the natural behavior of jqGrid is to apply the css class `ui-state-highlight` to a row, when it is clicked. I wish to stop this. — Mike, Jan 27 '10 at 15:52

score 56 · Accepted Answer · answered Jan 27 '10 at 23:39

56

Use the following code:

beforeSelectRow: function(rowid, e) {
    return false;
}

answered Jan 27 '10 at 23:39

Vinodh Ramasubramanian

3,157
1
20
17

Perfect! This is exactly the way I was trying to do it, I just couldn't find the right event to hook off. Thanks. – Mike Jan 28 '10 at 09:11
Also be sure to match casing. `beforeselectrow` does not work. – Biff MaGriff Oct 11 '11 at 20:56
What sucks about using this implementation you then disable onCellSelect :( – ymerej May 03 '13 at 19:38
It doesn't gray out the row, just stops the selection. Added a better and easier answer below using the rowattr callback instead of the beforeSelectRow callback. – Justin Levene Sep 20 '18 at 16:27

score 7 · Answer 2 · edited Jan 01 '12 at 06:21

7

If you, like me, have a gazillion jqGrids and don't want to override onSelectRow for every single one, here's a global version of Reigel's solution that worked nicely for me:

jQuery.extend(jQuery.jgrid.defaults, {
    onSelectRow: function(rowid, e) {
        $('#'+rowid).parents('table').resetSelection();
    }
});

edited Jan 01 '12 at 06:21

Peter O.

32,158
14
82
96

answered Sep 19 '11 at 08:51

eliland

116
1
2

Very nice. I think only people who have a whole bunch of these things hanging around will appreciate your answer +1 – Stephen Patten Mar 05 '13 at 00:28
This is a great answer. using resetSelection allows you to preserve the onSelectRow functionality and still clear the selection (I have a custom checkbox implementation that also toggles the checkbox on row click; this allows my code to keep working without the nasty selection color :)) – NKCSS Sep 17 '14 at 07:15

score 2 · Answer 3 · answered Jan 27 '10 at 16:57

2

try:

onSelectRow: function(rowid, status) {
    $("#grid_id").resetSelection(); //Resets (unselects) the selected row(s). Also works in multiselect mode.
}

you can read documentations here. Hope it helps you...

answered Jan 27 '10 at 16:57

Reigel Gallarde

64,198
21
121
139

Slightly more accurate than my solution. Thanks. – Mike Jan 28 '10 at 09:14
This is useful when you want to perform certain actions and then reset the selection. Great solution. – SavindraSingh Nov 15 '19 at 10:26

score 1 · Answer 4 · answered Jan 27 '10 at 16:23

1

I suppose you could address this in the CSS directly. Just override the values for ui-state-highlight for your specific table

#table_id tr.ui-state-highlight {
  border: inherit !important;
  background: inherit !important;
  color: inherit !important;
}

#table_id tr.ui-state-highlight a {
  color: inherit !important;
}

#table_id tr.ui-state-highlight .ui-icon {
  background-image: inherit !important;
}

I used the value inherit just as an example - you will likely need to copy some values from your theme.css to make this work.

answered Jan 27 '10 at 16:23

Peter Bailey

105,256
31
182
206

Thank's, I'll give this a shot in the morning and get back to you. – Mike Jan 27 '10 at 16:35
For browser compatibility sakes I'm going to dodge this implementation. However it does seem quite nice to hide this problem in the css. Thanks anyway +1. – Mike Jan 28 '10 at 09:12

score 0 · Answer 5 · answered Sep 20 '18 at 16:24

0

Yes, use the rowattr callback:

rowattr: function (rowData,currentObj,rowId) {
    if (rowData.SomeField=="SomeValue") { 
        return {"class": "ui-state-disabled"};
    }
},

This also grays out the row and disables the selection.

answered Sep 20 '18 at 16:24

Justin Levene

1,630
19
17

Is it possible to Stop jqGrid row(s) from being selected and/or highlighted?

5 Answers5

Linked