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

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,
    edit: function () {
      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 RegoDescriptionPair('C4', 'Car 4 - Black Mazda'),
    ];


function getCarList() {
  return carListData;
}

function getColumns() {
  var carList = carListData;

  var trailerList = [
       new RegoDescriptionPair('TR1', 'Trailer 1'),
       new RegoDescriptionPair('TR2', 'Trailer 2'),
       new RegoDescriptionPair('TR3', 'Trailer 3')
    ];

  var columns = [
    {
      field: "bookingDate",
      title: "Booking Date"
    },
    {
      field: "car.display", // display field so sort and filter work
      title: "Car",
      editable: true,
      template: function (data) {
          return createComboTemplate(data);
        }
        //      editor: function (container, options) {
        //        createCombo(container, options, carList);
        //      },
    },
    {
      field: "trailer.display", // display field so sort and filter work
      title: "Trailer",
      editor: function (container, options) {
        createCombo(container, options, trailerList);
      },
    }
  ];

  return columns;
}


function createComboTemplate(dataItem) {
  var tmpl = '<input style="width:100%" ' +
    'kendo-combo-box ' +
    'k-data-text-field="\'display\'" ' +
    'k-data-value-field="\'rego\'" ' +
    'k-data-source="getCarList()"' +
   ...