jqgrid rowattr not applying class

Question

I want to apply background color to row of jqGrid row based on value of column, however the basic rowattr is not applying class to rows.

Below is the code (for simplicity I have removed the condition on which color needs to be applied)

       jQuery("#employeeSalarysGrid").jqGrid({
            height: 250,
            url: 'http://localhost:50570/api/Test/Get',
            mtype: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "json",
            serializeGridData: function (postData) {
                return JSON.stringify(postData);
            },
            jsonReader: {
                root: function (obj) { return obj; },
                page: function (obj) { return 1; },
                total: function (obj) { return 1; },
                records: function (obj) { return obj.length; },
                id: "0",
                cell: "",
                repeatitems: false
            },
            datatype: "json",

            colNames: ['Id', 'Bank Name', 'Bank Name', 'Employee name', 'Joining date', 'Salary amount', 'Comments'],
            colModel: [
                { name: 'Id', align: "center", hidden: true },
                { name: 'BankName', index: 'BankName', align: 'center', editable: false },
                {
                    name: 'BankId', index: 'BankId', align: "center", hidden: true, required: true,
                    viewable: true, editrules: { edithidden: true, required: true },
                    editable: true,
                    edittype: 'select',
                    editoptions: {
                        dataUrl: '/api/Test/GetBanks',
                        buildSelect: function (data) {
                            var response = jQuery.parseJSON(data);
                            var s = '<select>';
                            if (response && response.length) {
                                for (var i = 0, l = response.length; i < l; i++) {
                                    var bank = response[i];
                                    s += "<option value=" + bank.BankId + ">" + bank.Name + "</option>";
                                }
                            }
                            return s + "</select>";
                        }
                    }
                },
                { name: 'EmployeeName', align: "center", editable: true, editrules: { required: true } },
                { name: 'JoiningDate', align: "center", editable: true, editrules: { custom: true, custom_func: datecheck },
                    formatter: 'date', formatoptions: { srcformat: 'y-m-d', newformat: 'd-M-y' }, edittype: 'text', editable: true,
                    editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker({ dateFormat: 'd-M-y' }); }, 200); } }
                },
             //{ name: 'cdate', index: 'cdate', width: 80, align: 'right', formatter: 'date', srcformat: 'yyyy-mm-dd', newformat: 'm-d-Y', edittype: 'text', editable: true, editoptions: { dataInit: function (el) { setTimeout(function () { $(el).datepicker(); }, 200); } } },

                { name: 'SalaryAmount', align: "center", editable: true, editrules: { required: true } },
                { name: 'Comments ', align: "center", editable: true }
            ],
            gridview: true,
            autoencode: true,
            ignorecase: true,
            loadonce: true,
            sortname: "InstallmentDate",
            sortorder: "asc",
            viewrecords: true,
            rowNum: 10,
            rowList: [10, 15, 20],
            pager: '#employeeSalarysPager',
            caption: "Employee Salary list",
           rowattr: function (rd) {                    
                return { "class": "rowClass" };
                //alert("hi");


            }
        });

CSS style :

 <style type="text/css">      
        .rowClass { color: blue;  background-image: none;}
    </style>

Note: If I uncomment //alert statement, it shows alert message 5 times. It means rowattr is getting invoked for each row, however css class is not getting applied.

Regards, Abhilash

which web browser and in which version you use in your tests? Which jQuery UI Theme you use (and which version of jQuery UI)? I can't reproduce the problem in my tests. — Oleg, Aug 15 '14 at 17:49
Browser: IE, version:11 CSS: jquery ui 1.10.4 Script: jquery-2.1.0 Please let me know if you need any more details. Thanks! — AbSharp, Aug 15 '14 at 17:55

score 4 · Accepted Answer · answered Aug 15 '14 at 18:09

4

The rowattr do works correctly, but if you want that the class will be applied on selected rows too then you should change CSS rule to the following

.ui-widget-content .rowClass { color: blue;  background-image: none; }

see the demo.

answered Aug 15 '14 at 18:09

Oleg

220,925
34
403
798

I think rowattr would be more useful in the colmodel, alongside with cellattr. This way you could change row attributes depending on conditions on the rawObject like in cellattr. WIth the current implementation, you can only access to the displayed value after the row has been built, which is not so useful and forces you to do rather messy stuff with jquery to parse cell content. – singe3 Nov 26 '15 at 11:35
@singe3: `colModel` is the array of items which define the properties of the cells of the columns (`` elemens). `rowattr` defines properties of rows (`` elements). Thus one can't place `rowattr` inside of some or every `colModel` item. `cellattr` defines attributes of cells of the column (`` elemens). Thus it's in `colModel`. Both `rowattr` and `cellattr` willl be applied **during building** HTML fragments of the body of the grid. `rowattr` is effective because it **don't change row attributes**. It set/specify the attributes. – Oleg Nov 26 '15 at 11:54

jqgrid rowattr not applying class

1 Answers1

Linked