Recently we had a couple of questions that we have had before, so publishing them for your reference:

 

We are using the new HTMLTreeGrid with AngularJS and are able to set the grid style as such as:

$scope.gridOptions = {
    styles: flexGrid.UIUtils.getThemeById('blue').styles,
    delegate: $scope };

Our user's need the ability to change their theme and want the grid to reflect their new selected them.  We hope to do this without rebuilding the grid by simply changing the bound style such as:

   $scope.gridOptions.styles = flexGrid.UIUtils.getThemebyId("new theme here").styles;

But this does not work.  The grid stays the same.  Can you tell me how to apply a new style after the grid is already rendered?  An example would be great.

Answer:

 

Unfortunately, there is no quick way to re paint the grid with new theme. 

 

If you look at our demo: http://www.htmltreegrid.com/demo/prod_jq_treegrid.html?example=Simple 

 

And click on the themes tab, you can switch themes. Below is the function we call once you switch themes. But this function actually destroys and re-creates the grid. This is the only certain way to definitively apply all style values, destroy internal cached information etc. 

 

 

myCompanyNameSpace.loadTheme=function(index){

    var theme=flexiciousNmsp.themes[index];

    if(!flexiciousNmsp.StyleDefaults._defaults){

        flexiciousNmsp.StyleDefaults._defaults={};

        flexiciousNmsp.UIUtils.mergeObjects(flexiciousNmsp.StyleDefaults._defaults,flexiciousNmsp.StyleDefaults.defaults);

    }

    var newStyles = {};

    flexiciousNmsp.UIUtils.mergeObjects(newStyles,flexiciousNmsp.StyleDefaults._defaults);

    flexiciousNmsp.UIUtils.mergeObjects(newStyles,theme.styles);

    flexiciousNmsp.UIUtils.mergeObjects(flexiciousNmsp.StyleDefaults.defaults,newStyles);

    myCompanyNameSpace.gotoTab(0);

};

 

 

Goto tab eventually runs the following code, but you might be able call grid.rebuild():

 

if (grid && grid.domElement && grid.domElement.parentNode){

        var domParent = grid.domElement.parentNode;

        var domElement = grid.domElement;

        grid.kill();

        domElement.innerHTML="";

        domElement.style.width="99%";

        domElement.style.height="99%";

        flexiciousNmsp.UIUtils.addChild(domParent,domElement);//because kill removes from dom.

    }

    grid = new flexiciousNmsp.FlexDataGrid(document.getElementById("gridContainer"),

        {

            dataProvider:dp,

            configuration:myCompanyNameSpace.SAMPLE_CONFIGS[config],

            styles:styles

        });

 

==============================

 

We have a grid with row background color:

myCompanyNameSpace.getCellBackground = function (cell) {

            if (cell.level.isItemSelected(cell.rowInfo.data)){

                  return cell.getStyleValue("selectionColor");

            }

 

            if (cell.rowInfo.getData().SLS_MON_STAT == "R") {

return 0xFF0000;

}

 

return null;  // keep default background color for all "normal" rows

      }

 

 

What the above code should do is, every row where the attribute SLS_MON_STAT equals to “R” should have a red background color. All other rows should have standard background color.

This works as expected so far, but the problem is that all red rows stay now in red forever. The “normal” rows (those that are not red) get a lightblue background as a temporary highlighting when the mouse hovers over them, and when a row is selected by clicking on it, it gets a darker blue background highlighting. But this highlighting does not work on the red rows.

 

How can I achieve that the highlighting works on all rows, even on those rows that are not in “default” background color?

 

 

 Answer:

In your getBackgroundFunction

 

Just add this condition:

 

 

if( grid.currentCell.rowInfo == cell.rowInfo){
         //this means cell is the same row that the mouse is over.
          return cell.getRolloverColor();

 

}