Gris with add remove multiselect elements

Gris with add remove multiselect elements

by chanaka1

HTML

<script src="http://cdn.kendostatic.com/2013.1.514/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.metro.min.css">
<div id="grid"></div>

JavaScript

var firstNames = ["Nancy", "Andrew", "Janet", "Margaret", "Steven", "Michael", "Robert", "Laura", "Anne", "Nige"];
var lastNames = ["Davolio", "Fuller", "Leverling", "Peacock", "Buchanan", "Suyama", "King", "Callahan", "Dodsworth",
    "White"];
var cities = ["Seattle", "Tacoma", "Kirkland", "Redmonds", "London", "Philadelphia", "New York",
    "Seattle", "London", "Boston"];

function createRandomData(count) {
    var data = [],
        now = new Date();
    for (var i = 0; i < count; i++) {
        var firstName = firstNames[Math.floor(Math.random() * firstNames.length)];
        var lastName = lastNames[Math.floor(Math.random() * lastNames.length)];
        var city = [];
        for (var j = 0; j < Math.floor(Math.random() * 3 + 1); j++) {
            city.push(cities[Math.floor(Math.random() * cities.length)]);
        }

        data.push({
            Id: i + 1,
            FirstName: firstName,
            LastName: lastName,
            Cities: city
        });
    }
    return data;
}

function citiesEditor(container, options) {
    $("<select multiple='multiple' " + 
      "data-bind='value : Cities'/>").appendTo(container).kendoMultiSelect({
        dataSource: cities
    });
}

var ds = new kendo.data.DataSource({
    transport: {
        read: function (op) {
            op.success(createRandomData(300));
        },
        update: function (op) {
            alert("update: " + JSON.stringify(op, null, 2));
            op.success(op.data);
        }
    },
    pageSize: 10,
    schema: {
        model: {
            id: "Id",
            fields: {
                Id: {
                    type: 'number'
                },
                FirstName: {
                    type: 'string'
                },
                LastName: {
                    type: 'string'
                }
            }
        }
    }
});
var grid = $("#grid").kendoGrid({
    dataSource: ds,
    editable: "popup",
    pageable: {
        refresh: true,
        pageSizes:...