Conflict row color when rowclick and cellsrender

[soojungParticipant]

Hello 🙂

I have jqxGrid with custom theme when row click, then row turns blue.

I change row color to pink which column name is ‘Color’ by cellsrenderer.

var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties) {

			var gubun = $('#jqxgrid').jqxGrid('getcellvalue', row, "Color");

			if (gubun == "Color") {
				var element = $(defaulthtml);
				element.css({ 'background-color': '#fff7f2', 'width': '100%', 'height':'28px', 'line-height': '28px', 'margin': '0px' });
				return element[0].outerHTML;
			}
			return defaulthtml;
		}

// This is simple jqxGrid code.

$("#jqxgrid").jqxGrid({
			width: 800,
			source: dataAdapter,
			theme: theme, //arctic
			editable: false,
			selectionmode: 'singlerow',
			columns: [
				{ text: 'Color', datafield: 'Color', hidden:true, width: changeWidth('NO') },
				{ text: 'No', datafield: 'No', align: 'center', cellsalign: 'center', pinned: true, width: changeWidth('NO'), height: 50 },
				{ text: 'Name', datafield: 'Name', align: 'center', cellsalign: 'center', cellsrenderer: cellsrenderer }
			]
		});

Here is issue. When I click pink row, it stays pink color not trun to blue.

As you can see here, 18 is pink color and 19 is blue color which clicked.

And this is conflict row color.

Is there any solution?

[ivailoParticipant]

Hi soojung,

Use cellclassname instead cellsrenderer and set to important the background of your default jqx-grid-cell-selected class.

.jqx-grid-cell-selected {
  background-color:blue !important;
}

Here is a demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[soojungParticipant]

Hello ivailo
Thanks to response quickly.

I saw your demo example and it’s little different what I made.
In your demo, how can I make this?

> If First Name has ‘Antoni’, then just that row turns pink not others.

Thanks & Regards,
soojung

[ivailoParticipant]

Hi soojung,

Please, try this demo.
Here cellclassname gets the result of function, which checks the value of the first column in the row.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

[soojungParticipant]

Hi ivailo!:D
Thank you soooo much.
I test it to my project then solve this problem perfectly!

Thank you again Have a nice day
Regards
soojung Chae

[Author]

Posts