Change background in checkbox selectionmde and keep that color for each selected

[Mike McAllenParticipant]

Hi there,

I am trying to change the background of rows that are selected from a grid with selectionmode = checkbox.

I use the jsfiddle example that jqwidgets provide here: https://jsfiddle.net/jqwidgets/XSKXc/

I modify it a little bit, to try to make what I want. My code is the follow:

JS:

 var data = generatedata(500);
 var source = {
     localdata: data,
     datafields: [{
         name: 'firstname',
         type: 'string'
     }, {
         name: 'lastname',
         type: 'string'
     }, {
         name: 'productname',
         type: 'string'
     }, {
         name: 'date',
         type: 'date'
     }, {
         name: 'quantity',
         type: 'number'
     }, {
         name: 'price',
         type: 'number'
     }],
     datatype: "array"
 };

 var adapter = new $.jqx.dataAdapter(source);
 $("#jqxgrid").jqxGrid({
     width: 500,
     theme: 'energyblue',
     source: adapter,
     sortable: true,
     selectionmode: 'checkbox',
     columns: [{
         text: 'First Name',
         datafield: 'firstname',
         columngroup: 'Name',
         width: 90
     }, {
         text: 'Last Name',
         columngroup: 'Name',
         datafield: 'lastname',
         width: 90
     }, {
         text: 'Product',
         datafield: 'productname',
         width: 170
     }, {
         text: 'Order Date',
         datafield: 'date',
         width: 160,
         cellsformat: 'dd-MMMM-yyyy'
     }, {
         text: 'Quantity',
         datafield: 'quantity',
         width: 80,
         cellsalign: 'right'
     }, {
         text: 'Unit Price',
         datafield: 'price',
         cellsalign: 'right',
         cellsformat: 'c2'
     }]
 });

 $("#jqxbutton").jqxButton({
     theme: 'energyblue',
     width: 320,
     height: 30
 });
 $('#jqxgrid').on('rowselect', function (event) {
     $('#jqxgrid').jqxGrid('setcolumnproperty', 'firstname', 'cellclassname', function (row, columnfield, value) {
     
				if (event.args.rowindex == row) {
					return 'red';
        }
		});
 });

CSS:

.red {
            background-color: red !important;
        }

But the new background color keeps only in the last column selected.

Is tehre a way to change the color not only to one cell if not to the complete row?
And is tehre a way to keep that background color to all the rows selected?

Thank you very much for your help.

[MartinParticipant]

Hello Mike McAllen,

Yes, it is possible. You can use the getselectedrowindexes method of the grid inside the cellsclassname callback of the column in order to determine which cells to color. Also, in this way you can set it once when initializing the grid instead of updating it on each rowselect.

Please, check the following Example.

Best Regards,
Martin Yotov

jQWidgets Team
https://www.jqwidgets.com/

[Mike McAllenParticipant]

Hello Martin,

Wow, yes, that’s what I was looking for!

Thank you very much.

Best Regards,

[Author]

Posts