Highlight row when the checkbox is true

Question

Can Some one help me, I have a jqgrid and I want to highlight the row if the checkbox is true, thanks!! this is what i want to make in this project... ``` function loadjqGrid(jsonGridData){ var xaxis=1300 var yaxis = $(document).height(); yaxis = yaxis-500; getGrids(); $("#maingrid").jqGrid({ url:'models/mod.quoservicetypedetails.php?ACTION=view', mtype: 'POST', datatype: 'xml', colNames:getColumnNames(jsonGridData), colModel :[ {name:'TypeID', index:'TypeID', width:350,hidden:true, align:'center',sortable:false,editable:true, edittype:"select",editoptions:{value:getTypeID()},editrules: { edithidden: true}}, {name:'Order1', index:'Order1', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, {name:'Order2', index:'Order2', width:80, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}}, {name:'Order3', index:'Order3', width:80, align:'center',sortable:false,editable:true,edi…

Accepted Answer

I described in the answer one good way how you can implement the highlighting.

Version 4.3.2 of jqGrid has new feature - `rowattr` callback (see my original suggestion), which was introduced especially for cases like yours. It allows you to highlight some rows of grid during filling of the grid. To have the best performance advantage you should use `gridview: true` additionally. By the way I recommend you to use `gridview: true` in all jqGrids.

The usage of `rowattr` callback is very easy:

```
gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // verify that the testing is correct in your case
        return {"class": "myAltRowClass"};
    }
}
```

The CSS class `myAltRowClass` should define background color of highlighted rows.

The corresponding demo you can find here:

Because in your demo you need just highlight and not select the rows I didn't used `multiselect: true` in my demo. In case of `multiselect: true` it works exactly in the same way.

At the end of my answer I would like to recommend you to use column templates. The feature will make your code shorter, more readable and easy to maintain. What you need to do is the following:

- you can include common or the most frequently used settings from column definitions in `cmTemplete`. In your case it could be

```
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80}
```

- then you can define some variables which describe common properties which you use frequently in some columns. For example:

```
var myCheckboxTemplate = {formatter: 'checkbox', edittype: 'checkbox', type: 'select',
        editoptions: {value: "1:0"}},
    myTextareaTemplate = {edittype: "textarea",
        editoptions: {size: "30", maxlength: "30"}};
```

- after that you can use `myCheckboxTemplate` and `myTextareaTemplate` inside of `colModel` which will reduced in your case to the following

```
colModel: [
    {name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select",
        editoptions: {value: getTypeID()}, editrules: { edithidden: true}},
    {name: 'Order1', index: 'Order1', template: myTextareaTemplate},
    {name: 'Order2', index: 'Order2', template: myTextareaTemplate},
    {name: 'Order3', index: 'Order3', template: myTextareaTemplate},
    {name: 'Description', index: 'Description', width: 140, template: myTextareaTemplate},
    {name: 'Notes', index: 'Notes', width: 120, template: myTextareaTemplate},
    {name: 'Measure', index: 'Measure', template: myTextareaTemplate},
    {name: 'UnitPrice', index: 'UnitPrice', width: 100, editable: false, template: myTextareaTemplate},
    {name: 'Remarks', index: 'Remarks', width: 140, template: myTextareaTemplate},
    {name: 'UnitCost', index: 'UnitCost', width: 100, template: myTextareaTemplate},
    {name: 'Service', index: 'Service', width: 120, template: myTextareaTemplate},
    //If the GroupHeader is true the row background is yellow
    {name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate},
    {name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate}
],
cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
```

Highlight row when the checkbox is true

Solution

Problem

Related problems