JQuery jqGrid loadComplete

Question

I have a table built using jqGrid. If one cell is empty (gridtable1_Age), I want the text in another cell (gridtable1_Name) to be bold. I'm trying to use the loadComplete but it does not seem to be working or if I am using it in the right place.

jQuery("#grid1").jqGrid('setGridParam', opts).trigger("reloadGrid", [ {
    page : 1,
    loadComplete : function () {
        $('td[aria-describedby=grid1_Age]:empty', 
            '#gridtable1').parent().find('td[aria-
             describedby=grid1_Name]').css('font-weight', 'bold');
                                }
                            } ]);

Edit: My grid is built with Struts2 tags

score 2 · Answer 1 · edited May 23 '17 at 12:29

2

I suppose you have Age and Name columns. What you can do is to define cellattr property in Name column which looks like below

cellattr: function (rowId, val, item) {
    if (item.Age === "") { // or some very close test
        return ' style="font-weight: bold;"';
    }
}

In the case the grid will be created with correct CSS styles. It's more quickly as making any changed on the page (see the answer which describes that all modifications follow to additional reflow of the whole page and one should reduce modifications if it's possible).

By the way the code which you posted don't work because the "empty" cell contains probably   symbol.

edited May 23 '17 at 12:29

Community

1
1

answered Dec 03 '14 at 18:09

Oleg

220,925
34
403
798

The $(...) portion does work as I have it tested elsewhere with success. I have it tied to a button that bolds the text on click. I'm not sure if your solution would be best. My grid is built with Struts2 tags; I don't believe I can apply that to it. Am I wrong? – Freigheist Dec 03 '14 at 18:40
@Freigheist: I'm not use Struts2 myself, but I've found [here](Custom Formatter) an example how to use custom formatter in jqGrid plugin of Struts2. From the JavaScript point of view to use custom formater one need to include attribute `formatter: function (cellvalue, options, rowObject) {...}` in the declaration of the column. In case of `cellattr` one need to do practically the same. If I understand correctly the example you need just define **global** function like `function MyBold(rowId, val, item) {...}` with the body from `cellattr` and to use `cellattr: "MyBold"`. – Oleg Dec 03 '14 at 20:24

score 0 · Answer 2 · answered Dec 03 '14 at 17:56

I think grid1_Age and grid1_name need to be wraped with quotes in the selector like this:

    loadComplete : function () {
    $('td[aria-describedby="grid1_Age"]:empty', '#gridtable1').parent().find('td[aria-
         describedby="grid1_Name"]').css('font-weight', 'bold');
                            }

If grid1_Age and/or grid1_name are variables and not literals then the right approach is:

loadComplete : function () {
    $('td[aria-describedby="'+grid1_Age+'"]:empty', '#gridtable1').parent()
    .find('td[aria-describedby="'+grid1_Name+'"]').css('font-weight', 'bold');
                            }
                        } ]);

I don't think it's necessary but I tried it and it still doesn't work. the $(..) portion of the code works as I have it tested, tied to a button. It works when I click the button but I would like it to be automatically after the grid loads the data. — Freigheist, Dec 03 '14 at 18:11

JQuery jqGrid loadComplete

2 Answers2