CustomCellEdit - different ways

by c1alexi

HTML

<script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/interop/angular/wijmo.angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-route.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.input.min.js"></script>
<script src="http://prerelease.componentone.com/wijmo5/latest/controls/wijmo.grid.min.js"></script>
<link rel="stylesheet" href="http://prerelease.componentone.com/wijmo5/latest/styles/wijmo.min.css">
<div ng-app="app" ng-controller="appCtrl1">
    <custom-flex-grid items-source="data" countries="countries" style="height:300px"></custom-flex-grid>
</div>

JavaScript

var app = angular.module('app', ['wj']);

app.controller('appCtrl1', function appCtrl1($scope, $compile) {
    $scope.countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    $scope.data = [];
    for (var i = 0; i < 200; i++) {
        $scope.data.push({
            country: $scope.countries[i % $scope.countries.length],
            downloads: Math.round(Math.random() * 20000),
            sales: Math.random() * 10000,
            expenses: Math.random() * 5000
        });
    }
});

// Represents a FlexGrid control and provides custom cell editors 
// for the 'country' and 'downloads' columns using
// different techniques.
app.directive('customFlexGrid', function ($compile) {
    return {
        restrict: 'E',
        template: '<div/>',
        replace: true,
        scope: {
            itemsSource: '=',
            countries: '='
        },
        link: function (scope, element, attrs) {
            var grid = new wijmo.grid.FlexGrid(element[0]);

            scope.$watch('itemsSource', function () {
                grid.itemsSource = scope.itemsSource;
                grid.columns[1].width = 300;
            });

            grid.itemFormatter = function (panel, r, c, cell) {
                var editRange = panel.grid.editRange;
                // check whether the cell is in the edit mode, 
                // continue only in this case
                if (panel.cellType == wijmo.grid.CellType.Cell &&
                    editRange && editRange.row === r && 
                    editRange.col === c) {
                    // 'country' cell editor implemented using 
                    // ComboBox created in code
                    if (c == 0) { 

                        // hide native editor, don't delete it 
                        // in order to prevent an exception
                        cell.childNodes[0].style.display = 'none';
                        // remove clipping to make drop-downs visible
                        cell.style.overflow =...