如何通过使用kendo ui在子网格中选择一行来更新主（父）网格？我有一个父网格使用本地数据来填充和onlclick添加新记录有一个标签网格。当我在子网格中选择一行，然后点击更新数据必须绑定到父网格。我能够检索所选元素但不能绑定到父网格数据源。请为此提供建议。
<!DOCTYPE html>
<html>
<head>
<title>Popup editing</title>
<meta charset="utf-8">
<link href="css/examples-offline.css" rel="stylesheet">
<link href="css/kendo.common.min.css" rel="stylesheet">
<link href="css/kendo.rtl.min.css" rel="stylesheet">
<link href="css/kendo.default.min.css" rel="stylesheet">
<script src="../js/jquery.min.js"></script>
<script src="../js/kendo.web.min.js"></script>
<script src="../js/userMaintenance.js"></script>
<script src="../js/console.js"></script>
<script>
</script>
</head>
<body>
<center><h2 style="color:blue;">User Maintenance</h2> </center>
<!-- grid element -->
<div id="example" class="k-content">
<div id="grid" ></div>
<script>
var data = createRandomData(50);
var main = [{Globalid:"fdsdf",UserName:"System Admin",SystemRole:"5",Title:"5"},
{Globalid:"qwewqeqwe",UserName:"System Admin",SystemRole:"5",Title:"5"}
];
var mylocaldatasource=new kendo.data.DataSource({
data:main
});
mylocaldatasource.read();
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
model: {
fields: {
Globalid: { type: "string" },
UserName: { type: "string" },
SystemRole: { type: "string" },
Title: { type: "string" }
}
}
}
},
height: 430,
pageable: false,
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
toolbar: ["create"],
columns: [
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
},
{
command: ["edit", "Remove"],
title: " ",
width: "160px"
}
],
edit: function(e){
e.container.find(".nested-tabstrip").kendoTabStrip({});
e.container.find(".tabstrip-grid").kendoGrid({
dataSource: mylocaldatasource,
pageable: false,
selectable:true,
height: 300,
columns:[
{
field: "Globalid",
title: "Global id"
},
{
field: "UserName",
title: "User Name"
},
{
field: "SystemRole",
title: "System Role"
},
{
field: "Title",
title: "Title",
format: "{0:c}",
width: "100px"
}
],
change:grid_change
});
}
});
function grid_change(e) {
var selectedRows = this.select();
var selectedDataItems = [];
for (var i = 0; i < selectedRows.length; i++) {
var dataItem = this.dataItem(selectedRows[i]);
selectedDataItems.push(dataItem);
// var globalid=this.dataItem(this.select()).Globalid;
alert(this.dataItem(this.select()).Globalid);
}
// selectedDataItems contains all selected data items
}
var grid = $("#grid").data("kendoGrid");
grid.bind("change", grid_change);
grid.dataSource.add({
id:i+1,
Globalid: this.dataItem(this.select()).Globalid,
UserName: selectedDataItems.UserName,
SystemRole: selectedDataItems.SystemRole,
Title: selectedDataItems.Title
});
});
</script>
</div>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<div class="nested-tabstrip">
<ul>
<li>
Search
</li>
<li>
Search Results
</li>
</ul>
<div>
<div class="Search">
<div class="k-edit-label">
<label for="Globalid">Global id:</label>
</div>
<div class="k-edit-field">
<input type="text" class="k-input k-textbox" name="Globalid" data-bind="value:Globalid">
</div>
<div class="k-edit-label">
<label for="UserName">User Name: </label>
</div>
<div class="k-edit-field">
<input name="UserName"
data-bind="value:UserName"
data-value-field="UserName"
/>
</div>
<div class="k-edit-label">System Role: </div>
<div class="k-edit-field">
<select name="SystemRole" >
<option value="PAA User">PAA User</option>
<option value="PAA Admin">PAA Admin</option>
<option value="Executive">Executive</option>
<option value="System Admin">System Admin</option>
</select>
</div>
<div class="k-edit-label">
<label for="Title">Title:</label>
</div>
<div class="k-edit-field">
<input type="text" name="Title" data-bind="value:Title" />
</div>
</div>
</div>
<div>
<div class="tabstrip-grid" id="childgrid"></div>
</div>
</div>
</body>
</html>
答案 0 :(得分：1)
您可以在定义子Grid的位置编写类似的内容。
$("#ChildGrid tbody tr").on("click", function (e) {
var grid = $("#ChildGrid").data("kendoGrid");
var dataItem = grid.dataItem(grid.select())
window.parent.CallFromChild(dataItem);
});
在主网格上创建此功能：
function CallFromChild(dataItemFromChild){
var parentGrid = $("#ParentGrid").data("kendoGrid");
var parentDataItem = parentGrid.dataItem.set("ColumnName",dataItemFromChild.Value);
}
你可以尝试这样的事情。希望这会有所帮助。