How do I remove a CSS class from a jqGrid cell?
One can't remove the call class with a standard jqGrid method. So you have to do this manually:
var iCol = getColumnIndexByName(grid,"ColumnName"),
tr = grid[0].rows.namedItem(rowid), // grid is defined as grid=$("#grid_id")
td = tr.cells[iCol];
$(td).removeClass("my-style-class");
where getColumnIndexByName
is a simple function which get the column index by the column name:
var getColumnIndexByName = function(grid,columnName) {
var cm = grid.jqGrid('getGridParam','colModel');
for (var i=0,l=cm.length; i<l; i++) {
if (cm[i].name===columnName) {
return i; // return the index
}
}
return -1;
}
See the demo here.
UPDATED: Free jqGrid have iColByName
internal parameter which can be used instead of getColumnIndexByName
function. The iColByName
parameter will be filled by free jqGrid internally and it will updated by reodering of columns. So it's safe to use
var p = grid.jqGrid("getGridParam"), // get the reference to all parameters
iCol = p.iColByName["ColumnName"], // get index by column name
cm = p.colModel[iCol]; // item of "ColumnName" column
The way is very simple and it works very quickly. One should take in consideration that the feature is included in free jqGrid after publishing of free jqGrid 4.8. So one have to download the latest sources from GitHub or to use at least free jqGrid 4.9-beta1 to have the feature.
Remove/Add class to jqgrid row
I solve my issue by this answer
var tr = window.grid[0].rows.namedItem(window.selectedRow);
$(tr).removeClass("class1");
$(tr).addClass("class2");
jqgrid : how to change the class of one cell (when mouse is over on)?
Here is my last solution. I will use it as follows:
$("#mygrid tr").hover(
function(){
$(this).find("td").eq(1).removeClass('ui-state-default');
$(this).addClass("ui-state-hover");
},
function(){
if(!$(this).hasClass("ui-state-active"))
$(this).find("td").eq(1).addClass('ui-state-default');
}
);
$("#mygrid tr").click(function(){
$("#mygrid tr").each(function() {
$(this).find("td").eq(1).addClass('ui-state-default');
});
$(".ui-state-active").removeClass("ui-state-active");
$(".ui-state-highlight").removeClass("ui-state-highlight");
$(this).find("td").eq(1).removeClass('ui-state-default');
$(this).addClass("ui-state-active");
});
It works well also for a grid within input text tags!
free-jqgrid: setCell to add css class to a cell
I recommend you to add key: true
to the column customerId
if the values of the column contains unique data.
You can fix your current code of validateOnSubmit
in the following way
function validateOnSubmit() {
var grid = $("#mySearchResultGridTable");
var editingRows = grid.jqGrid("getGridParam", "savedRow");
// the array editingRows will contains the information about the values
// of all editable columns from all currently editing rows
// one allows typically ONE editing row at once. Thus one can use
if (editingRows.length > 0) {
var selectedStatus = $("#jqg"+ editingRows[0].id +"_status").val();
if (selectedStatus === '' || selectedStatus === 'Select') {
grid.jqGrid('setCell', editingRows[0].id, 'status', '', 'red-highlight');
}
}
}
I'd recommend you to consider to replace the definition of state
column to
{ name: "state", template: "booleanCheckbox", editable: true }
you can just try the results and to see whether it would be the better choice in your case or not.
Remove jqGrid editoptions from a Column
It's important to understand that getGridParam
returns the reference to internal parameters used by jqGrid. Thus you can use for example
var p = $("#timesheetlineitemsqueue").jqGrid("getGridParam");
and access to colModel
using p.colModel
. Alternatively you can use
var colModel = $("#timesheetlineitemsqueue").jqGrid("getGridParam", "colModel");
to get the reference to colModel
array.
To get the column item, which have the name jobno
, one can use iColByName
in free jqGrid. Then
var cm = p.colModel[p.iColByName.jobno];
If you use some old version of jqGrid instead of free jqGRid then you can find the index of jobno
in the loop (see the code of getColumnIndexByName
in the answer for example).
Now you can set any property of cm
item without usage setColProp
. In the same way you can use delete
to delete the property. For example
delete cm.editoptions.dataEvents;
Block free-jqGrid from setting active class on table row
I suppose that you use guiStyle: "bootstrap"
to use Bootstrap CSS in free jqGrid (see here). In the case the class "active"
will be added on hover the row.
You can use hoverrows: false
to change the behavior.
UPDATED: The settings of guiStyle: "bootstrap"
includes the usage of table-hover
option. Thus hoverrows: false
is recommended option in case of usage guiStyle: "bootstrap"
. See the part of free jqGrid code for details. On the other side if you want to remove hover effect from jqGrid then you should create custom Bootstrap GUI style without table-hover
class and uses the style.
The demo demonstrates the approach. It defines bootstrapNoHover
GUI style using
$.jgrid.guiStyles.bootstrapNoHover = {
baseGuiStyle: "bootstrap",
hTable: "table table-condensed table-bordered",
subgrid: {
legacyTable: "table table-condensed table-bordered"
},
grid: "table table-condensed table-bordered",
gridFooter: "table table-condensed table-bordered"
};
and then uses guiStyle: "bootstrapNoHover"
instead of guiStyle: "bootstrap".
Struts2 jqGrid Remove x On Individual Column Filters
One can specify searchoptions: {clearSearch: false}
in colModel
for the specific column. It removes the x
button from the filter bar for the corresponding column. I suppose that you should specify the option like any other search option inside of <sjg:gridColumn>
(see the documentation).
jqGrid : How to add CSS class for a row with specific criteria
You should use rowattr
which informs jqGrid which additional attributes (class, title, style and so on) should be assigned to the rows of the grid during generating the rows. An example of the callback is the following
rowattr: function (item) {
if (item.Age >= 80) {
return { "class": "table-danger" };
} else if (70 <= item.Age && item.Age < 80) {
return { "class": "table-warning" };
} else if (60 <= item.Age && item.Age < 70) {
return { "class": "table-info" };
}
}
See the old answer for a code example.
Related Topics
How to Create a Text Watermark Without an Image
How to Evenly Distribute Menu Items with CSS When Width and Quantity Is Not Known
Set the Width of Children to Fill the Parent
Border-Radius with Border-Image
How to Change Image a When Hovering Over Image B Without JavaScript Only CSS
How Element Selector Is More Specific Than Id Selector
How Does Internet Explorer 8 Support the CSS Outline Attribute
Font and Line Spacing in Different Browsers
How to Make Certain Text Not Selectable with CSS
Styling Twitter's Bootstrap 3.X Buttons
Can't Use the Same Animation in Reverse for Class Toggle
Special Characters in CSS Selectors
Using Less Variables in Media Queries
CSS Problem to Make 2 Divs Float Side by Side
What's the Best Way to Test Cross-Browser Compatibility
Should I Remove Vendor Prefixes