Editing with a drop down in a grid
This is a test of using a drop down editor in a grid to select whether a value is included or exlcuded
by sparksterz
HTML
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="Grid"></div>
JavaScript
var gridData = [{
"LeaseGuid": "a391c139-2a7e-4ebf-87ec-3db42b0eb26a",
"LeaseStartDate": "\/Date(1277956800000)\/",
"LeaseEndDate": "\/Date(1372651200000)\/",
"MonthlyCost": 10000.00,
"Description": "KM Lease (Existing Devices)",
"IncludeInDesign": true,
"ExtensionData": null
}, {
"LeaseGuid": "b391c139-d2b6-4fba-9b2c-094f8ee39f21",
"LeaseStartDate": "\/Date(1357102800000)\/",
"LeaseEndDate": "\/Date(1422680400000)\/",
"MonthlyCost": 10.01,
"Description": "Special characters ~!@#$%^\u0026*()_+|}{:\"\u003c\u003e?`=[]\\;\u0027,./ 1234567890",
"IncludeInDesign": true,
"ExtensionData": null
}, {
"LeaseGuid": "bd91c139-b990-4a1d-8ede-a6036facd0c6",
"LeaseStartDate": "\/Date(1262322000000)\/",
"LeaseEndDate": "\/Date(1420088400000)\/",
"MonthlyCost": 7025.50,
"Description": "Canon Lease Info - Edited",
"IncludeInDesign": true,
"ExtensionData": null
}, {
"LeaseGuid": "47b1c139-c27d-4a3c-bd09-4a7ff69e3f18",
"LeaseStartDate": "\/Date(1367380800000)\/",
"LeaseEndDate": "\/Date(1369972800000)\/",
"MonthlyCost": 7000.00,
"Description": null,
"IncludeInDesign": true,
"ExtensionData": null
}];
function dropDownInclude(container, options){
var StatusOptions = new kendo.data.DataSource({data: [{ text: "Include", value: "true"}, { text: "Exclude", value: "false"}]});
var value = options.model[options.field];
var selectedObject = value == "true" ? StatusOptions[0]:StatusOptions[1];
var dropDownEditor = $('<input required name="' + options.field + '" data-text-field="text" data-value-field="value" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({autoBind: true, dataSource: StatusOptions, dataTextField: "text", dataValueField: "value",...