How to Remove a CSS Class from a Jqgrid Cell

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



Leave a reply



Submit