Calling methods on Angular Scope

clock May 31, 2016 02:03 by author htmltreegrid

Recently a few customers have asked the same question:

We are using HTMLTreegrid with angularJS. We are expecting code snippet with angularJS.

In angularJS controller we are unable to call scope function which mentioned in previous mail.


At Angular contoller


$scope.saveStatus= function(rowData, column){

                var data='<div ><a href="javascript:void(0);" class="launchEditor" ng-click= "updateStatus('+rowData+')"><i class="fa fa-check"></i></a></div>';

         return data;






Answer is to get scope from the item being clicked.  

For example:



            return "<img src='resources/app/assets/next.png' class='custom-hover' onclick='itemClickEvent(this)' title='Go to Item Info'>";




itemClickEvent =function(item){

        var scope = angular.element(document.getElementById("MainWrap")).scope();


        scope.$apply(function () {

              var itemObj =;

              console.log("itmeObj "+ itmeObj);







A couple of customer questions

clock May 12, 2016 03:54 by author htmltreegrid

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.



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


If you look at our demo: 


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. 




    var theme=flexiciousNmsp.themes[index];





    var newStyles = {};








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;



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


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









We have a grid with row background color:

myCompanyNameSpace.getCellBackground = function (cell) {

            if (cell.level.isItemSelected({

                  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?




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();