Jqgrid ROW에 BOLD 적용

I had such a hard time getting this to work, it most definitely deserved a blog post. Hopefully others can make sense of this by reading this post.

Scenario
I wanted to do some conditional formatting on my rows of data using the gridComplete method. In order for me to do conditional formatting, I need to be able to access any column for a given row, so I can affect the cell contents. Now, from a jqGrid wiki/documentation perspective, there appears to be two different methods we could use: setCell or setRowData.

setRowData is what we’re going to talk about here. Consider the following code:

gridComplete: function() { var rowData = $("#backlog").getRowData();   for (var i = 0; i < rowData.length; i++) { $("#backlog").jqGrid('setRowData', rowData[i], false, {color:'red'}); } },

Now before we get into what this does specifically, the above won’t work, and you won’t have a clue why. No error messages, nothing in the Firefox console, nada. I really scratched my head over this for a while, until I started to notice that users on forums and stackoverflow were using getDataIDs, not getRowData. So re-written as follows, it works:

gridComplete: function() { var rowData = $("#backlog").getDataIDs();   for (var i = 0; i < rowData.length; i++) { $("#backlog").jqGrid('setRowData', rowData[i], false, {color:'red'}); } },

So while the above does work, it’s important to understand why the previous bit of code did not. If you want to use getRowData, then when a method like setRowData asks for rowID, instead of passing in rowData[i], you need to specify rowData[i].ID. That’s the key differentiator. If we use getDataIDs, obviously we can use rowData[i] because the array only contains IDs, instead of the entire row object.

Now, what does the above do. Well, it iterates through all the rows for your grid, and set’s the color of each cell text to red.

One other thing to note, if you want to set a different style like background-color, you won’t be able to set it by simply replacing color with background-color, you’ll need to set a class and define your background-color in your class:

.myclass td { font-weight : bold !important; background-color: red !important; color: white !important; }   ...   gridComplete: function() { var rowData = $("#backlog").getDataIDs();   for (var i = 0; i < rowData.length; i++) { $("#backlog").jqGrid('setRowData', rowData[i], false, 'myclass'); } },

It’s important to note that the false parameter simply means that I want to affect the entire row, if you wanted to single out a particular column FOR ALL ROWS, it would look like this:

gridComplete: function() { var rowData = $("#backlog").getDataIDs();   for (var i = 0; i < rowData.length; i++) { $("#backlog").jqGrid('setRowData', rowData[i], {Title:'some new content for cell'}, 'myClass'); } },

Hopefully that was helpful!

Shereen