jqgrid, firefox and css- text-decoration problem

Question

Hi all.

I have issue wuth firefox not displaying style "text-decoration: line-through".

I am using jqGrid for displaying list of medications. If medication is not active, it has to be crossed. In my afterInsertRow event i do this:

$('#' + rowid).css({ 'text-decoration': 'line-through', 'color': 'red' }) 

It works fine for IE and Chrome, but Firefox displays only red text without crossing line. When i look into firebug output, i can see that element has style definition including text-decoration, but it is simply not displaying the way i need. Any help is appreciated. Thanks

Answer 1

If you modify your code to

$('#' + ids[1] + " > td").css(
    { 'text-decoration': 'line-through', 'color': 'red' });

if will works. If you use rownumbers: true and don't want the row number be strikethrough, you can use

$('#' + ids[1] + " > td:not(.jqgrid-rownum)").css(
    { 'text-decoration': 'line-through', 'color': 'red' });

One more small recommendation: use gridview: true to fill jqGrid more quickly. In this mode the whole table contain will be filled by jqGrid as a siring and will be inserted with one jQurey.append operation. The usage of afterInsertRow event break the rule, because every row will be inserted with a jQurey.append operation and then will be called afterInsertRow. So my recommendation: use gridview: true and don't use afterInsertRow. To make changes of css use loadComplete or gridComplete instead like:

jQuery('#list').jqGrid({
    //...
    loadComplete: function() {
        var ids = jQuery('#list').getDataIDs();
        for (var i = 0; i < ids.length; i++) {
            $('#' + ids[i] + ' > td:not(.jqgrid-rownum)').css(
                { 'text-decoration': 'line-through', 'color': 'red' });
        }
    }
    // ...
});