現在、Spring MVC を Kendo UI jQuery ライブラリ (最新バージョン) と組み合わせて使用するプロジェクトに取り組んでいます。私が抱えている問題は、剣道グリッドのデータソースをインラインでローカル (剣道データソース) とリモートで更新することです。datasource オブジェクトの synch メソッドと set メソッドを使用しましたが、どちらも機能しませんでした。
私のjQueryコード:
/*global $:false */
$(document).ready(function () {
"use strict";
var request;
$("#tabstrip").kendoTabStrip();
var applicationDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/appinfo/findApplications",
dataType: "json"
},
create: {
url: "/appinfo/submit",
dataType: "json",
type: "POST"
},
update: {
url: "/appinfo/updateApplication",
dataType: "json",
type: "POST"
},
destroy: {
url: "/appinfo/deleteApplication",
dataType: "json"
},
schema: {
model: {
id: "applicationId",
fields: {
applicationId: {type: "number"},
applicationName: {type: "string"},
url: {type: "string"},
serverName: {type: "string"},
environmentName: {type: "string"},
ipAddress: {type: "string"},
genericUserName: {type: "string"},
genericPassword: {type: "string"}
}
}
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
if (operation == "destroy" && options.models) {
console.log("Delete worked");
return { models: kendo.stringify(data.models) };
}
}
},
batch: true,
pageSize: 10
});
var applicationGrid = $("#applicationsGrid").kendoGrid({
dataSource: applicationDataSource,
pageable: true,
height: 600,
scrollable: true,
sortable: true,
filterable: true,
toolbar: [
{name: "create", text: "Add New Application"}
],
columnMenu: true,
editable: {
update: true,
destroy: true,
create: true,
mode: "inline",
confirmation: "Are you sure you want to delete this record?"
},
columns: [
{field: "applicationName", title: "Application Name"},
{field: "url", title: "URL"},
{field: "serverName", title: "Server", editor: serverDropDownEditor, width: "300px"},
{field: "environmentName", title: "Environment", editor: environmentDropDownEditor, width: "300px"},
{field: "ipAddress", title: "Database", editor: databaseIpAddressDropDownEditor, width: "300px"},
{field: "genericUserName", title: "Default Username"},
{field: "genericPassword", title: "Default Password"},
{title: "Modify", command: ["edit" , "destroy"]}
],
edit: function (e) {
var dataItem = applicationDataSource.at(e.currentTarget);
console.log("DataSource Count: " + applicationDataSource.total());
},
save: function (e) {
var dataItem = applicationDataSource.at(e.currentTarget);
console.log("DataSource Count: " + applicationDataSource.total());
console.log("The model on save: " + e.model.applicationName);
applicationDataSource.sync();
},
create: function (e) {
console.log("Create this: " + e.values);
applicationDataSource.insert(e.model);
applicationDataSource.sync();
},
delete: function (e) {
console.log("Delete this: " + e.model);
applicationDataSource.remove(e.model);
}
});
function serverDropDownEditor(container, options) {
$('<input required data-text-field="serverName" data-value-field="serverId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: " - Select - ",
dataTextField: "serverName",
dataValueField: "serverId",
dataSource: {
transport: {
read: {
url: "/appinfo/findServers",
dataType: "json"
}
}
}
});
}
function environmentDropDownEditor(container, options) {
$('<input required data-text-field="environmentName" data-value-field="environmentId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: " - Select - ",
dataTextField: "environmentName",
dataValueField: "environmentId",
dataSource: {
transport: {
read: {
url: "/appinfo/findEnvironments",
dataType: "json"
}
}
}
});
}
function databaseIpAddressDropDownEditor(container, options) {
$('<input required data-text-field="ipAddress" data-value-field="databaseInfoId" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
optionLabel: " - Select - ",
dataTextField: "ipAddress",
dataValueField: "databaseInfoId",
dataSource: {
transport: {
read: {
url: "/appinfo/findDatabases",
dataType: "json"
}
}
}
});
}
});
ところで.... Kendo-UI Web の最新バージョンを使用しています。