Background:
I've encountered strange behavior in jqGrid
: when cellattr
callback returns string containing "style" the grid gets messed.
Please see an example:
HTML:
<table id="grid"></table>
Javascript:
$("#grid").jqGrid({
datatype: "local",
height: "auto",
data: [{column1: "row1col1", column2: "row1col2" },
{column1: "row2col2", column2: "row2col2" }],
colNames: ['Column1', 'Column2'],
colModel: [
{
name: 'column1',
index: 'column1',
cellattr: function (rowId, val, rawObject, cm, rdata) {
attrValue = (rawObject.column2 == 'row2col2') ? 'GangnamStyleAttribute' : 'GangnamAttribute';
return ' customAttr="' + attrValue + '"';
},
width: 100
},
{
name: 'column2',
index: 'column2',
width: 100
}],
caption: "Stack Overflow Example",
});
$("#grid").jqGrid('setGridParam');
Also please see a jsfiddle
In the example above cellattr
returns ' customAttr="GangnamAttribute"' for the first row and ' customAttr="GangnamStyleAttribute"' for the second row.
As you can see from jsfiddle, the first row is displayed correctly, but the second one is messed up: the first column is not shown and the second column is displayed in place of the first one.
This happens if cellattr
returns something containing the substring "style" in it.
Question: Is there any solution or work around for this problem, allowing to set attributes with values containing the word "style"?
I think I found a simple workaround for my problem.
The problem occurred because jqGrid
attempts to extract the style attribute from the string, returned by cellatr. It works this way in order to append the returned styles to already existing cell styles. jqGrid searches for the first occurrence of 'style'.
So my workaround is to prepend the returned string with empty style attribute:
return ' style="" customAttr: "' + attrValue + '"'
See jsfiddle with the workaround
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With