剑道ui网格内联编辑angularjs
我想在我的剑道ui网格中进行内联编辑。数据绑定似乎工作正常，但当我在编辑某些内容后单击“更新”按钮时，范围会得到更新，但编辑对话框不会消失。如果单击另一个编辑按钮，它将进入失效状态。毕竟，只有当我至少提供一个伪函数作为k-save时，它才会更新作用域。出于某种原因，单击“取消”按钮确实会更新范围。所以“取消”按钮实现了我对“更新”按钮的期望。
您可能会看到，我想更新客户端的本地范围，而不是向任何服务器发送任何内容。
有人能告诉我这里出了什么问题吗？
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css" />
</head>
<body>
<div id="example" ng-app="gridTestApp" ng-controller="TestController">
<kendo-grid
k-data-source="gridData"
k-columns="gridColumns"
k-on-change="selected = data"
k-selectable="true"
k-editable="editableOptions"
k-schema="gridSchema"
k-save="saveFunction">
</kendo-grid>
<p ng-show="selected">
<label>Artist: <input ng-model="selected.artist" /></label>
<br />
<label>Track: <input ng-model="selected.track" /></label>
</p>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<input ng-model="gridRow.artist"></input><input ng-model="gridRow.track"></input>
<br>
</li>
</ul>
<p>This is for testing data-binding</p>
<ul>
<li data-ng-repeat="gridRow in gridData">
<span ng-bind="gridRow.artist"></span> -<span ng-bind="gridRow.track"></span>
<br>
</li>
</ul>
</div>
<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
<script>
angular.module("gridTestApp",[ "kendo.directives" ])
.controller("TestController", function($scope){
$scope.gridData = new kendo.data.ObservableArray([
{ artist: "Pink Floyd", track: "The dark side of the Moon" },
{ artist: "The Beatles", track: "I've just seen a face" },
{ artist: "Queen", track: "Innuendo" }
]);
$scope.gridColumns = [
{ field: "artist", title: "Artist" },
{ field: "track", title: "Track" },
{ command: /*"destroy"*/["edit", "destroy"], title: " ", width: "175px", editable: "inline" }
];
$scope.editableOptions = {mode: "inline", update: true, destroy: true};
$scope.gridSchema = {
model: {
id: "artist",
fields: {
artist: { type: "string", validation: { required: true } },
track: { type: "string", validation: { required: true } }
}
}
}
$scope.saveFunction = function(){
console.log("somehting was modified");
}
});
</script>
</body>
</html>
我为你创建了一个plnkr。
共有1个答案
您的问题是模式-这不是网格配置选项，而是DataSource配置选项。
我建议创建一个实际的数据源，而不是ObservableArray（使用字符串id也可能不太理想）：
$scope.gridData = new kendo.data.DataSource({
data: [{
artist: "Pink Floyd",
track: "The dark side of the Moon"
}, {
artist: "The Beatles",
track: "I've just seen a face"
}, {
artist: "Queen",
track: "Innuendo"
}],
schema: {
model: {
id: "artist",
fields: {
artist: {
type: "string",
validation: {
required: true
}
},
track: {
type: "string",
validation: {
required: true
}
}
}
}
}
});
（演示）
-
嗨，我正在尝试做剑道网格，但它不工作，显示网格，但没有显示数据。我不知道怎么了。我不知道parametersMap是怎么工作的。请帮帮我。 控制器 这是剧本 Json数据返回：http://localhost:53232/Home/GetGeo?id=5
-
我对某些字段的验证有问题。我只想验证几个字段，其他字段不应该验证。在我的Email字段中，我启动了一个函数来检查格式是否正确，但其他字段只是设置为验证。任何帮助都将不胜感激。 使用此代码，在尝试保存/更新时将验证所有字段。我不想验证分机或电话号码。
-
我对剑道网格自定义编辑器有问题。当我点击剑道网格上的编辑按钮时，我想使用dateTimePicker作为我的编辑器。但当我尝试使用dateTimePicker自定义网格时，总会出现错误： 以下是简单的源代码： 或者你可以在这个链接上查看 我已经在许多不同的来源上检查了它，例如： 参考文献1 参考文献2
-
剑道内嵌单元格编辑不支持日期时间格式。我需要"dd/MMM/yyyy"数据格式，但是剑道网格显示"提交的日期必须是日期"错误。你能告诉我该怎么做吗
-
我使用Telerik的演示页面上显示的编辑网格。编辑网格后，我希望网格刷新。编辑网格后，网格是否有调用的任何事件？ 我试图使用数据绑定事件。在本例中，我读取数据源，但它告诉我刷新网格是一个无限循环。我试图使用saveChanges事件，但它不起作用。