Kendo UI Grid Custom Editor

Kendo Grid with custom editors for multiselect and numeric textbox

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
 <script type="text/x-kendo-template" id="territoriesTemplate">
      <table cellspacing="0" cellpadding="0" class="resultTable">
    #for(var i = 0; i < Territories.length; i++){#
        <tr>
                <td><a class="hasTooltip">#:Territories[i].TerritoryDescription#</a>&nbsp;<button class="info-btn">Info</button></td>
        </tr>
    #}#
    </table>
</script>
  
  <script type="text/x-kendo-template" id="storesTemplate">

</script>
  
  <script type="text/x-kendo-template" id="territoryLink">
    <a role="button" tabindex="0" style="cursor: pointer;" class="view">Click to view</a>
</script>
  
  <div id="grid"></div>
  <div id="details"></div>
  
  <script type="text/x-kendo-template" id="view">
            <div id="details-container">
                    <label><strong>Where is #= TerritoryDescription #?</strong></label>
                    <p>#= TerritoryDescription # is in...</p>
                </div>
            </script>
  
  <script type="text/x-kendo-template" id="viewTerritory">
            <div id="details-container">
                  <label>#= TerritoryDescription #</label>
                </div>
            </script>
  
  <script type="text/x-kendo-template" id="template">
                <div class="toolbar">
                  <input type="search" class="k-textbox" placeholder="Search" id="search" style="width: 200px"></input>
                </div>
          </script>  
  
  <script type="text/x-kendo-template" id="storeTerritory">

</script>

JavaScript

var data = [{
    "EmployeeId": 1,
    "FirstName": "Jim",
    "LastName": "Jones",
    "Territories": [{
        "Id": 1,
        "TerritoryDescription": "Wilton"
    }]
}, {
    "EmployeeId": 1,
    "FirstName": "Mark",
    "LastName": "Andrews",
    "Territories": [{
        "Id": 1,
        "TerritoryDescription": "St. Andrews"
    }, {
        "Id": 2,
        "TerritoryDescription": "Williamson"
    }]
}];


//serialize as a string
function serializeArray(prefix, array, result) {
    for (var i = 0; i < array.length; i++) {
        if ($.isPlainObject(array[i])) {
            for (var property in array[i]) {
                result[prefix + "[" + i + "]." + property] = array[i][property];
            }
        } else {
            result[prefix + "[" + i + "]"] = array[i];
        }
    }
}

$(document).ready(function () {
    var grid = $("#grid").kendoGrid({
        dataSource: {
            transport: {
                read: function (e) {
                    e.success(data);
                },
                parameterMap: function (options, operation) {
                    if (operation !== "read") {
                        for (var field in options) {
                            if ($.isArray(options[field])) {
                                serializeArray(field, options[field], options);
                            }
                        }
                    }
                    return options;
                }
            },
            pageSize: 10,
            schema: {
                model: {
                    id: "EmployeeId",
                    fields: {
                        EmployeeId: {
                            type: "number"
                        },
                        FirstName: {
                            type: "string"
                        },
                        LastName: {
                            type: "string"
                        },
                        Territories: {
                           ...