MultiSelect from Grid

by krustev

HTML

<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.blueopal.min.css">
<div id="grdVehicleAttributes"></div> 
<script id="command-template" type="text/x-kendo-template">
<input type="checkbox" class="TransportSelect" name="transSelect" value="">
</script>
      <div id="DeliveryCart"></div>

JavaScript

$(document).ready(function() {
    GetVehicleAttributes();
});
var Basket = [];
function GetVehicleAttributes() {

var JsonAttributes = [{"AttributeCode":"","AttributeType":"Make","AttributeValue":"SEAT","ID":3378592,"VIN":"VSSZZZ6JZDR051503"},{"AttributeCode":"","AttributeType":"Model","AttributeValue":"IBIZA          ","ID":3378593,"VIN":"VSSZZZ6JZDR051504"},{"AttributeCode":"","AttributeType":"Derivative","AttributeValue":"Ibiza 5dr (2012) SE 1.6 TDI CR 105 PS 5-speed manu","ID":3378594,"VIN":"VSSZZZ6JZDR051505"},{"AttributeCode":"","AttributeType":"Colour","AttributeValue":"Ice Silver","ID":3378595,"VIN":"VSSZZZ6JZDR051504"},{"AttributeCode":"","AttributeType":"Colour Code","AttributeValue":"P5P5","ID":3378596,"VIN":"VSSZZZ6JZDR051506"},{"AttributeCode":"","AttributeType":"Trim Code","AttributeValue":"BT","ID":3378597,"VIN":"VSSZZZ6JZDR051507"}];

    
    
    var ctkGridData = new kendo.data.DataSource({
        data: JsonAttributes,
        schema: {
            model: {
                id: "ID",
                fields: {
                    ID: { editable: false, nullable: true },
                    AttributeType: { editable: true },
                    AttributeValue: { type: "string", validation: { required: true} },
                    AttributeCode: { type: "string" },
                    VIN: { type: "string" }
                }
            }
           
        }
    });


    var gridVA = $("#grdVehicleAttributes").kendoGrid({
        dataSource: ctkGridData,
        height: 300,
        groupable: false,
        sortable: false,
        filterable: false,
        columnMenu: false,
        reorderable: false,
        resizable: false,
        selectable: "row",
        columns: [
         { field: 'AttributeType'},
         { field: 'AttributeValue' }, 
        { template: kendo.template($("#command-template").html()), width: '80px' }
        ]
    }).data("kendoGrid");

     $("#grdVehicleAttributes").on("click", ".TransportSelect", function (e)...