cellclassname

[seatyParticipant]

Hi, everyone
I build some grid and have a problem with jqxGrid. I want to edit background color in cell. I following the demo in website but it’s not work.

 source: any =
    {
        localdata: 
        [
            ['508920002', 'Chula university # 001', 'University', 2, 10 , 0 , 25 , 5],
            ['508920003', 'Chula university # 002', 'University', 0, 5 , 2 , 0 , 34],
            ['508920004', 'Chula university # 003', 'University', 0, 1 , 0 , 0 , 29],
            ['508920005', 'Chula university # 004', 'University', 1, 2 , 0 , 0 ,23],
            ['508920006', 'Chula university # 005', 'University', 0, 0 , 0 , 0 , 2],
            ['508920007', 'Chula university # 006', 'University', 0, 3 , 1 , 18 , 12],
            ['508920008', 'Chula university # 007', 'University', 0, 0 , 0 , 0 , 4],
            ['508920009', 'Paragon # 001', 'Department Store', 1, 0 , 2 , 25 , 6],
            ['508920010', 'Paragon # 002', 'Department Store', 0, 1 , 0 , 0 , 36],
            ['508920011', 'Paragon # 003', 'Department Store', 0, 10 , 0 , 0 , 9],
            ['508920012', 'Paragon # 004', 'Department Store', 0, 7 , 0 , 0 , 10],
            ['508920013', 'Paragon # 005', 'Department Store', 0, 0 , 0 , 0 , 6],
            ['508920014', 'Paragon # 006', 'Department Store', 0, 0 , 0 , 25 , 26],
            ['508920015', 'Paragon # 007', 'Department Store', 0, 1 , 0 , 25 , 25],
            ['508920016', 'Paragon # 008', 'Department Store', 0, 1 , 0 , 0 , 15],
            ['508920017', 'Paragon # 009', 'Department Store', 1, 0 , 0 , 0 , 18],
            ['508920018', 'ThaiNamthip # 001', 'Office', 2, 0 , 2 , 25 , 35],
            ['508920019', 'ThaiNamthip # 002', 'Office', 1, 0 , 0 , 0 , 14],
            ['508920020', 'ThaiNamthip # 003', 'Office', 0, 3 , 0 , 25 , 23],
            ['508920021', 'ThaiNamthip # 004', 'Office', 0, 3 , 2 , 25 , 24],
            ['508920022', 'ThaiNamthip # 005', 'Office', 0, 3 , 0 , 0 , 0]
        ],
        datafields: 
        [
            { name: 'VendingMachineID', type: 'string', map: '0' },
            { name: 'VendingMachineName', type: 'string', map: '1' },
            { name: 'Channel', type: 'string', map: '2' },
            { name: 'Status', type: 'int', map: '3' },
            { name: 'Temperature', type: 'int', map: '4' },
            { name: 'Coin/BillAcceptor', type: 'int', map: '5' },
            { name: 'Nosell', type: 'int', map: '6' },
            { name: 'outofStock', type: 'int', map: '7' }
            
        ],
        datatype: 'array'
    };

    dataAdapter: any = new jqx.dataAdapter(this.source);

    cellClass = (row: number, columnfield: any, value: number): string => {
        if (value == 2) {
            return 'red';
        }
        else if (value == 1) {
            return 'yellow';
        }
        else return 'green';
    }

    tempClass = (row: number, columnfield: any, value: number): string => {
      if (value <= 5) {
          return 'red';
      }
      else if (value >= 3 && value < 5) {
          return 'yellow';
      }
      else return 'green';
  }
  nosellClass = (row: number, columnfield: any, value: number): string => {
    if (value <= 24) {
        return 'red';
    }
    else if (value >= 18 && value < 24) {
        return 'yellow';
    }
    else return 'green';
}
outOfstockClass = (row: number, columnfield: any, value: number): string => {
  if (value <= 20) {
      return 'red';
  }
  else if (value >= 11 && value < 20) {
      return 'yellow';
  }
  else return 'green';
}

    columns: any[] =
    [
        { text: 'Vending Machine ID', datafield: 'VendingMachineID', cellsalign: 'center', align: 'center', width: 150 },
        { text: 'Vending Machine Name', datafield: 'VendingMachineName', cellsalign: 'center', align: 'center', width: 180 },
        { text: 'Channel', datafield: 'Channel', cellsalign: 'center', align: 'center',  cellsformat: 'c2', width: 150 },
        { text: 'Status', datafield: 'Status', cellsalign: 'center', align: 'center', cellclassname: this.cellClass, width: 100 },
        { text: 'Temperature', datafield: 'Temperature', cellsalign: 'center', align: 'center', cellclassname: this.tempClass, width: 100 },
        { text: 'Coin/Bill Acceptor', datafield: 'Coin/BillAcceptor', cellsalign: 'center', align: 'center', cellclassname: this.cellClass, width: 150 },
        { text: 'No sell', datafield: 'Nosell', cellsalign: 'center', align: 'center', cellclassname: this.nosellClass, width: 100 },
        { text: 'Out of Stock', datafield: 'outofStock', cellsalign: 'center', align: 'center', cellclassname: this.outOfstockClass, width: 100 }
  
    ];

this is my css

.green {
    color: black;
    background-color: #b6ff00;
  }
  
.yellow {
    color: black;
    background-color: yellow;
  }
  
.red {
    color: black;
    background-color: #e83636;
  }
  
.green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .green:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: #b6ff00;
  }
  
.yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .yellow:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: yellow;
  }
  
.red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected), .jqx-widget .red:not(.jqx-grid-cell-hover):not(.jqx-grid-cell-selected) {
    color: black;
    background-color: #e83636;
  }

I run it and inspect it. Classname(red,yellow,green) are shown in class but it’s not effect. Anyway to solve this problem?
Thanks (sorry for bad english)

[seatyParticipant]

this is output :

[HristoParticipant]

Hello seaty,

I tested this demo and it seems to work fine.
Could you clarify it, is there any error message?
And if it has what is it?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[hope4555Participant]

Hello
having the same issue
even if i see the “red” class on the correct node

<div role=”gridcell” style=”left: 280px; z-index: 189; width:50px;” class=”jqx-grid-cell jqx-item red” title=”85″><div class=”jqx-grid-cell-right-align” style=”margin-top: 6px;”>85</div></div>

it has no effect

[HristoParticipant]

Hello hope4555,

Could you provide us an example that demonstrates this?
It will be better if you could provide it on https://www.jseditor.io/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts