​

var owners = [

  { id: 1, start:"10:01:00", oName: "John" , bId:1, mId:1, fullyPaid:1},

  { id: 2, start:"08:11:00",oName: "Mike" , bId:2, mId:4, fullyPaid:0 }

  ];

​

// array of all brands

var brands = [

  { id: 1, bName: "Ford" },

  { id: 2, bName: "BMW" }

];

​

// array of all models

var models = [

  { id: 1, mName: "Explorer", bId: 1},

  { id: 2, mName: "Focus", bId: 1},

  { id: 3, mName: "X3", bId: 2},

  { id: 4, mName: "X5", bId: 2}

];

​

$("#grid").kendoGrid({

  dataSource: {

    change: function(){

      $("textarea").val(JSON.stringify(this.data(), true));

    },

    data: owners,

    schema: {

      model: {

        id: "id",

        fields: {

          id: { editable: false }, // the id field is not editable

          start:{},

          oName:{},

          bName:{},

          mName:{},

          fullyPaid:{type:"bool"}

        }

      }

    }

  },

  editable: true,

  columns: [

    { title:"Owners Name", field: "oName" },

    {title:"Start", field: "start", format:"{0:HH:mm}", editor: timeEditor},

    { 

      title: "Brand",

      field: "bId",

      template: "#= brandName(bId) #",

      editor: brandEditor

    },

    { 

      title: "Model",

      field: "mId",

      template: "#= modelName(mId) #", 

      editor: modelEditor

    },

    {

      title:"Fully Paid", 

      field:"fullyPaid"

    }

  ]

});

​

function brandEditor(container, options) {

  var input = $('<input id="bId" name="bId">');

  input.appendTo(container);

  input.kendoDropDownList({

    dataTextField: "bName",

    dataValueField: "id",

    dataSource: brands, 

    change: function() {            

      options.model.set("mId", "");

    }

  });

}

​

function modelEditor(container, options) {

   var input = $('<input id="mId" name="mId">');

  var dataSource = new kendo.data.DataSource({

    data: models,

    filter: {

      field: "bId",

      operator: "eq",

      value: options.model.bId

    }

  });

  input.appendTo(container);

  input.kendoDropDownList({

     dataTextField: "mName",

     dataValueField: "id",   

     dataSource: dataSource,

     optionLabel: "Choose a model"

  });

}

​

function timeEditor(container, options) {

    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')

            .appendTo(container)

            .kendoTimePicker({              

                culture: "fr-CA",

                interval: "15",

                format: "HH:mm",

              min: new Date(2013, 6, 24, 0, 0, 0, 0),

              max: new Date(2013, 6, 24, 23, 59, 0, 0)

            });

}

​

function brandName(id) {

  for (var i = 0; i < brands.length; i++) {

    if (brands[i].id == id) {

      return brands[i].bName;

    }

  }

  return "";

}

​

function modelName(id) {

  for (var i = 0; i < models.length; i++) {

    if (models[i].id == id) {

      return models[i].mName;

    }

  }

  return "";

}