Getting Started with FlexGrid using AngularJS

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:

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:

// 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"></wj-flex-grid-column>
<wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>

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 = "";
}
}
}

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.