Kendo Column Combo Template

by peterjc

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="ttp://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.silver.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css">
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<div data-ng-app="app">
    <div data-ng-controller="Grid as vm">
        <div id="gridID" pckendo kendo-grid='grid' k-options="vm.options"></div>  	
    </div>
</div>

JavaScript

$(function() {
var oEditCell = kendo.ui.Grid.fn.editCell;
var oInit = kendo.ui.Grid.fn.init;
kendo.ui.Grid = kendo.ui.Grid.extend({
    init: function () {
        oInit.apply(this, arguments);
        if (typeof this.options.beforeEdit === "function") {
            this.bind("beforeEdit", this.options.beforeEdit.bind(this));
        }
    },
    editCell: function (cell) {
        var that = this,
            cell = $(cell),
            column = that.columns[that.cellIndex(cell)],
            model = that._modelForContainer(cell),
            event = {
                container: cell,
                model: model,
                field: column.field
            };

        if (model && this.trigger("beforeEdit", event)) {
            // don't edit if prevented in beforeEdit
            if (event.isDefaultPrevented()) return;
        }

        oEditCell.call(this, cell);
    }
});
kendo.ui.plugin(kendo.ui.Grid);

});

angular
  .module("app", ["kendo.directives"])
  .controller("Grid", Grid)  

// Grid controller constructor
function Grid() {
  var vm = this;

  vm.gridData = getDataSource();

  vm.options = {
    height: 500,
    navigatable: true,
    sortable: true,
    editable: true,
      dataBound: function(e) {
          var car = $(this.tbody).find("tr:eq(0)").find("input.boxxy:not('.k-input')").first();
          console.log(car.data("kendoComboBox"));
      },
    beforeEdit: function (e) {
      if (e.field === "car.display") 
      {
          e.preventDefault();
          return;
      }
          
      vm.editMode = true;
      console.log("editing");
    },
    cancel: function () {
      vm.editMode = false;
      console.log("cancelled");
    },

    columns: getColumns(),
    dataSource: vm.gridData
  };
}

var carListData = [
       new RegoDescriptionPair('C1', 'Car 1 - Red GMH sedan'),
       new RegoDescriptionPair('C2', 'Car 2 - Blue Toyota'),
       new RegoDescriptionPair('C3', 'Car 3 - Green Toyota'),
       new...