Change cell color( ngHandsonTable )

Getting help Questions
1

What is the best way to change cell color based on flag in the data of handsontable ?
i tried the code below but it run slow.

      $scope.grayRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.background = '#888888';
      }
      
      $scope.pinkRenderer = function (instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        td.style.background = 'pink';
      }

this.testCaseSetting = {
afterRenderer: function(td,row,col,prop,value,cellProperties){

        },
        autoColumnSize : true,
        autoRowSize : false,
        columnSorting : true,
        cells: function (row, col, prop) {
          if(this.instance.getData().length != 0){
            if( this.instance.getData()[row][21] == 1 ){
              var cellProperties = {};
              if(this.instance.getData()[row][22] == true){
                cellProperties.renderer = $scope.grayRenderer;
              } else if(this.instance.getData()[row][22] == false){
                cellProperties.renderer = $scope.pinkRenderer;
              }
              return cellProperties;
            }
          }
        },
        fillHandle : false,
        hiddenColumns : {
          columns : [ 0, 19, 20],
          indicators : false
        },
        sortIndicator : true,
        stretchH : 'all'
      }
2

best way is to do it via ‘cells’ while adding a class that give the new background color.

cells: function (row, col, prop) {
          if(this.instance.getData().length != 0){
            if( this.instance.getData()[row][21] == 1 ){
              var cellProperties = {};
              if(this.instance.getData()[row][22] == true){
                cellProperties.className = grey;
              } else if(this.instance.getData()[row][22] == false){
                cellProperties.className = pink;
              }
              return cellProperties;
            }
          }
        },
3

but im having a problem when it comes to rendering.

even i call render() method it does not reflect perfectly, i need to click the button that calls render() in order to reflect the new background color. So how can i render it properly without clicking button that calls render()?

4

Oh I see… have you tried solution proposed here?

[…] Please remove ng-cloak=“” from your template and it should be resolved.

5

sir im not using ng-cloak.

this is my html

      <hot-table style="overflow: hidden" class="grid" settings="c1210.testCaseSetting"
        columns = "testCaseColumn"
        datarows="testCaseList" height=400
        hot-id="testCase"></hot-table>
6

Can you please create a demo where I will be able to replicate the same behavior?

7

I am closing this issue as there is no reply.