Kendo Setting Model from Combobox selection

by jpieroabarcam

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 kendo-grid='grid' k-options="vm.options"></div>
        <div>{{vm.msg}}</div>
    </div>
</div>

JavaScript

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

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

  vm.gridData = getDataSource();
  console.log(vm.gridData)
  
  vm.options = {
    navigatable: true,
    sortable: true,
    editable: true,
  
    columns: getColumns(),
    dataSource: vm.gridData,

  };  
}

// Use to create a unique id for each row
var bookingId = 0;

// Row data
function RowData(bookingDate, carRego, carDescription, trailerRego, trailerDescription) {

  // Generate a unique Id for this row (the data source needs this to identify the row updated!!)
  this.bookingId = bookingId++;

  this.bookingDate = bookingDate; // simple string  
  this.car = new RegoDescriptionPair(carRego, carDescription); // 2 tuple
  this.trailer = new RegoDescriptionPair(trailerRego, trailerDescription); // 2 tuple

}

// 2 tuple container
function RegoDescriptionPair(rego, display) {
  this.rego = rego;
  this.display = display;
}

function getDataSource() {
  var gridData = [
      new RowData('1 jan 2015', 'C1', 'Car 1 - Red GMH sedan', 'TR1', 'Trailer 1'),
      new RowData('2 jan 2015', 'C2', 'Car 2 - Blue Toyota', 'TR1', 'Trailer 1'),
      new RowData('2 jan 2015', 'C2', 'Car 3 - Blue Toyota', 'TR2', 'Trailer 2'),
  ];

  // Need to bind to a data source. If pass just the dataservice.getData(viewName) result,
  // the grid takes a copy of this and put into it's own internal data source. If we pass this one,
  // we can get at the modified values.       
  var dataSrc = new kendo.data.DataSource({

    transport: {
      read: function (e) {
        e.success(gridData);
      },

      update: function (e) {
        console.log("update is called: ", e);
        var updateItem = e.data;
        console.log("updated object : ", updateItem);

        e.success();
      },

      create: function (e) {
        console.log("create is called:", e);
        console.log("create data is:", e.data);

   ...