FlexGrid one of the most powerful control in Wijmo 5 suite. You can easily start using FlexGrid by following FlexGrid 101. However, there are three common questions faced by many users while implementing it with AngularJS:

  1. How to access FlexGrid control in the controller ?
  2. How to handle basic events of the FlexGrid like keydown etc. ?
  3. How to add custom columns in FlexGrid ?

So, thought to write this small blog answering the above questions.

The answer to the first question is that we have a ‘control‘ property in every Wijmo control which you can set in the markup like this:

<wj-flex-grid control="flex" ...  >

After that, you need to watch the scope to be notified of the control creation and then, access the same in the controller :

// watch the "flex" scope variable to get a reference
// to the control when it is created
$scope.$watch('flex', function() {
  var flex = $scope.flex;
  if (flex) {
    initializeColumns(flex);
  }
});

Another way to access the control is by using the ‘initialized’ event. This event is raised when the control has been created and all directive parameters have been initialized. The “initialized” event is typically used like this:

<wj-flex-grid
  items-source="data"
  auto-generate-columns="false"
  initialized="init(s,e)">
</wj-flex-grid>
// use the "initialized" event to get a reference to the grid
// (the 's' parameter stands for 'sender', and holds a reference
// to the control that has been initialized)
$scope.init = function(s, e) {
  initializeColumns(s);
}

Note:In general,  it is recommended to use ‘initialized’ rather than ‘control’. It requires less code and it is raised only when the control has been fully initialized.

Once you get the control, you can easily subscribe the basic events  with the help of ‘hostElement’ property which gets the DOM element that is hosting the control. Here is the small code demonstrating how you can handle the ‘keydown’ event of FlexGrid and start editing on Tab Key:

$scope.$watch('flex', function () {
  var flex = $scope.flex;
  if (flex) {
    var host = flex.hostElement;
    //handle the keydown event
    host.addEventListener('keydown', function (e) {
      //check for 'Tab' key
      if (e.which == 9) {
        //get the current selection
        var selectedCellRange = flex.selection;
        //if the selected column is the first column then ignore it
        if (flex.selection.col == 0) {
          selectedCellRange.col = selectedCellRange.col + 1;
          flex.select(selectedCellRange, true);
        }
        //put the cell in edit mode
        flex.startEditing(false, flex.selection.row, flex.selection.col);
      }
   });
  }
});

Lastly, you can add any number of custom columns while defining the markup like this:

<wj-flex-grid items-source="data" item-formatter="itemFormatter"&;gt;
  <wj-flex-grid-column header="Country" binding="country"&gt;&lt;/wj-flex-grid-column>
  <wj-flex-grid-column header="Sales" binding="sales"&gt;&lt;/wj-flex-grid-column>
  <wj-flex-grid-column header="InMarkup" >
     <input type="radio"/> 
  </wj-flex-grid-column>
  <wj-flex-grid-column header="InCode" ></wj-flex-grid-column>
</wj-flex-grid>

Or you can add them in code using ItemFormatter by setting the innerHTML property of the cell :

 $scope.itemFormatter = function (panel, r, c, cell) {
        if (panel.cellType == wijmo.grid.CellType.Cell) {
            var flex = panel.grid;
            //check for specific column
            if (c == 3) {
                //create the radiobutton or any custom column
                cell.innerHTML = "<input type="radio" />";
            }
        }
    }

Here are the fiddles implementing the same:

FlexGrid – Access Control

FlexGrid – Event Handling

FlexGrid – Custom Columns

Let me know if you have any questions/feedback so that I can take them up in the next blog.