我有一个使用JayData作为数据源的kendo网格。网格中有3个下拉控件。一切都很适合编辑。但是当我尝试进行插入时,带有下拉列表的字段不会更新到后备对象。
作为一种绝望的尝试,我在后备对象的三个相应字段中添加了默认值。现在,下拉列表会填充支持字段,但前提是您单击并更改选择。
以下是我的代码:
<script src="Scripts/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<script type="text/javascript">
var baseAssetMgmtURL = "http://localhost/AssetManagementAPI/odata/";
var crudServiceComputerBaseURL = baseAssetMgmtURL + "Computers/";
var computerTypes = [];
var osTypes = [];
var brandModelTypes = [];
var init = 0;
var computer = $data.define("computer", {
ComputerId: { type: Number, key: true },
AssetTag: Number,
BrandModel: String,
ComputerModelTypeId: { type: Number, defaultValue: init },
ComputerTypeId: { type: Number, defaultValue: init },
ComputerType: String,
PurchaseDate: Date,
OperatingSystemTypeId: { type: Number, defaultValue: init },
OperatingSystemType: String,
ComputerName: String,
Notes: String,
MHIPSConnection: Date,
RetiredDate: Date
});
var ds = computer.asKendoDataSource({
provider: 'oData',
url: crudServiceComputerBaseURL,
batch: false,
pageSize: 10,
serverPaging: false
});
var setGrid = function () {
$("#grid").kendoGrid({
dataSource: ds,
columns: [
{ title: "AssetTag", field: "AssetTag", filterable: false },
{
title: "Brand Type", field: "ComputerModelTypeId", filterable: false,
editor: brandTypeDropDownEditor, template: "#= getModelType(ComputerModelTypeId) #"
},
{
title: "Computer Type", field: "ComputerTypeId", filterable: false,
editor: computerTypeDropDownEditor, template: "#= getComputerType(ComputerTypeId) #"
},
{ title: "PurchaseDate", field: "PurchaseDate", filterable: false },
{
title: "OS Type", field: "OperatingSystemTypeId", filterable: false,
editor: osTypeDropDownEditor, template: "#= getOSType(OperatingSystemTypeId) #"
},
{ title: "Name", field: "ComputerName", filterable: false },
{ title: "Notes", field: "Notes", filterable: false },
{ title: "MHIPSConnection", field: "MHIPSConnection", filterable: false },
{ title: "Retired", field: "RetiredDate", filterable: false },
{ command: ["edit"], title: " " }
],
pageable: true,
sortable: false,
scrollable: false,
editable: "popup",
toolbar: ["create"]
});
};
function loadLookupTypes(url, cb) {
var container = [];
$.getJSON(url,
function (data) {
var lookUpTypeString = JSON.stringify(data.value);
container = JSON.parse(lookUpTypeString);
cb(container);
});
return container;
};
function getComputerType(typeId) {
for (var i = 0, length = computerTypes.length; i < length; i++) {
if (computerTypes[i].ComputerTypeId === typeId) {
return computerTypes[i].CompType;
}
}
};
function getOSType(typeId) {
for (var i = 0, length = osTypes.length; i < length; i++) {
if (osTypes[i].OperatingSystemTypeId === typeId) {
return osTypes[i].SystemType;
}
}
};
function getModelType(typeId) {
for (var i = 0, length = brandModelTypes.length; i < length; i++) {
if (brandModelTypes[i].ComputerModelTypeId === typeId) {
return brandModelTypes[i].BrandModel;
}
}
};
function computerTypeDropDownEditor(container, options) {
$('<input name="ComputerTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "CompType",
dataValueField: "ComputerTypeId",
dataSource: computerTypes
});
};
function osTypeDropDownEditor(container, options) {
$('<input name="OperatingSystemTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "SystemType",
dataValueField: "OperatingSystemTypeId",
dataSource: osTypes
});
};
function brandTypeDropDownEditor(container, options) {
$('<input name="ComputerModelTypeId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataTextField: "BrandModel",
dataValueField: "ComputerModelTypeId",
dataSource: brandModelTypes
});
};
$(document).ready(function () {
loadLookupTypes(baseAssetMgmtURL + "ComputerTypes", function (data) {
computerTypes = data;
});
loadLookupTypes(baseAssetMgmtURL + "OperatingSystemTypes", function (data) {
osTypes = data;
});
loadLookupTypes(baseAssetMgmtURL + "ComputerModelTypes", function (data) {
brandModelTypes = data;
});
setGrid();
});
</script>