jQuery UI Widgets Forums Grid Conflict row color when rowclick and cellsrender

This topic contains 4 replies, has 2 voices, and was last updated by  soojung 8 years, 1 month ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • soojung
    Participant

    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?

    • This topic was modified 8 years, 1 month ago by  soojung.

    ivailo
    Participant

    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


    soojung
    Participant

    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

    • This reply was modified 8 years, 1 month ago by  soojung.

    ivailo
    Participant

    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


    soojung
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.