Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Highlight row when the checkbox is true

Tags:

Can Some one help me, I have a jqgrid and I want to highlight the row if the checkbox is true, thanks!!

enter image description here

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,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                                   {name:'Description', index:'Description', width:140, align:'center',sortable:false,editable:true,             edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                                 {name:'Notes', index:'Notes', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},              {name:'Measure', index:'Measure', width:80, align:'center',sortable:false,editable:true, edittype:"textarea", editoptions:{size:"30",maxlength:"30"}},                               {name:'UnitPrice', index:'UnitPrice', width:100, align:'center',sortable:false,editable:false,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},               {name:'Remarks', index:'Remarks', width:140, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},              {name:'UnitCost', index:'UnitCost', width:100, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},                  {name:'Service', index:'Service', width:120, align:'center',sortable:false,editable:true,edittype:"textarea",editoptions:{size:"30",maxlength:"30"}},              //If the GroupHeader is true the row background is yellow             {name:'GroupHeader', index:'GroupHeader', width:100, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},              {name:'IsGroup', index:'IsGroup', width:80, align:'center',sortable:false,editable:true,formatter:'checkbox', edittype:'checkbox', type:'select', editoptions:{value:"1:0"}},          ],         viewrecords: true,           rowNum:20,         sortname: 'id',          viewrecords: true,          sortorder: "desc",         height: yaxis,         pager : '#gridpager',         recordtext: "View {0} - {1} of {2}",         emptyrecords: "No records to view",         loadtext: "Loading...",         pgtext : "Page {0} of {1}",                  height: yaxis,         width: xaxis,         shrinkToFit: false,         multiselect: true,         editurl:'models/mod.quoservicetypedetails.php?ACTION=edit'     });  } 

How could I do this? Can someone help me?

like image 778
Jacx Toi Avatar asked May 10 '12 08:05

Jacx Toi


People also ask

How do I highlight a row in Excel based on a checkbox?

For this, head over to the Developer tab in Excel. In the Controls section, choose Insert and click on the checkbox icon in the Form Controls section. Add the checkbox to the cell you want. Then, select the cell with the checkbox and drag the cursor down to the end of the table.

How do I make cells change color when checkbox is checked?

Select the cell you need to change its value (here I select A1), then enter formula =IF(C2,"Test","") into the Formula Bar, and press the Enter key. See screenshot: Note: In the formula, C2 is the linked cell of the check box 1, “Test” is the value you need to display in cell A1 when the check box is checked.

Can you conditionally format a checkbox in Excel?

Use Conditional Formatting With a Checkbox In Excel, you can use a checkbox to control whether or not conditional formatting should be applied. For the following example, you have the data below in Column B and a checkbox linked to cell C2.


1 Answers

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:

enter image description 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}, 
like image 139
Oleg Avatar answered Oct 11 '22 11:10

Oleg