我有这个demo that relate with my situation，如何将dataSource中的其他数据绑定到我的弹出表单中。如果outletType = rest，将出现一个弹出表格。感谢您的帮助。
您不需要设置其他数据，所有dataSource的数据都可以在模式中使用，您不需要在网格中显示它们。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
</head>
<body>
<style>
#additionalVariables #lbl{width: 150px; display: inline-block; padding-bottom: 15px;
</style>
<div id="grid"></div>
<div id="additionalVariables" style="display:none">
<label id="lbl" for="capacity">Capacity</label>:
<input type="text" class="k-textbox" name="capacity" id="capacity" data-bind="value: selected.capacity" style="width:120px; text-align:center;">
<br>
<label id="lbl" for="roomservice">Room Service</label>:
<input class="k-radio" type="radio" name="roomservice" id="yes2" value="y" checked="checked"/>
<label class="k-radio-label" for="yes2" >Yes</label>
<input class="k-radio" type="radio" name="roomservice" id="no2" value="n" />
<label class="k-radio-label" for="no2" >No</label>
<br>
<label id="lbl" for="fastfood">Fast Food</label>:
<input class="k-radio" type="radio" name="fastfood" id="yes3" value="y" checked="checked"/>
<label class="k-radio-label" for="yes3" >Yes</label>
<input class="k-radio" type="radio" name="fastfood" id="no3" value="n" />
<label class="k-radio-label" for="no3" >No</label>
</div>
<script>
$(document).ready(function () {
var dataSource = [{
'capacity': '',
'roomservice': 'y',
'fastfood': 'y',
'outletType': 'retail',
'name': 'Data 1',
'additionalData': {
'a': 1
}
},
{
'capacity': 888,
'roomservice': 'n',
'fastfood': 'n',
'outletType': 'rest',
'name': 'Data 2',
'additionalData': {
'a': 2
}
},
{
'capacity': '',
'roomservice': 'y',
'fastfood': 'y',
'outletType': 'theme',
'name': 'Data 3',
'additionalData': {
'a': 3
}
},
{
'capacity': '1232',
'roomservice': 'y',
'fastfood': 'y',
'outletType': 'rest',
'name': 'Data 4',
'additionalData': {
'a': 4
}
},
];
grid = $('#grid').kendoGrid({
dataSource: dataSource,
editable: "inline",
toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field: "outletType", title: "Outlet Type", width: 150, editor: outletType,
template: data => data.outletType == "rest" ? "Rest" : (data.outletType == "retail") ? "Retail" : (data.outletType == "spa") ? "Spa" : "Theme" },
{ field: "name", title: "name", width: 75 },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
edit: openOutType
});
});
function openOutType(e){
if(e.model.outletType == 'rest'){
console.log(e.model.additionalData);
var additionalForm = $("#additionalVariables");
additionalForm.kendoWindow({
visible: false,
modal: true,
width: "350px",
height: "200px",
iframe: false,
resizable: false,
title: "Addtional Information"
});
additionalForm.data("kendoWindow").center().open();
}
}
function outletType(container, options) {
$('<input class="k-radio" id="radio1" name="outletType" type="radio" value="rest" >').appendTo(container);
$('<label class="k-radio-label" for="radio1">Rest </label>').appendTo(container);
$('<input class="k-radio" id="radio2" name="outletType" type="radio" value="spa" >').appendTo(container);
$('<label class="k-radio-label" for="radio2">Spa </label>').appendTo(container);
$('<input class="k-radio" id="radio3" name="outletType" type="radio" value="retail" >').appendTo(container);
$('<label class="k-radio-label" for="radio3">Retail </label>').appendTo(container);
$('<input class="k-radio" id="radio4" name="outletType" type="radio" value="theme" >').appendTo(container);
$('<label class="k-radio-label" for="radio4">Theme</label>').appendTo(container);
$('input:radio[name="outletType"]').change(function(){
if($(this).val() == 'rest'){
var additionalForm = $("#additionalVariables");
additionalForm.kendoWindow({
visible: false,
modal: true,
width: "350px",
height: "200px",
iframe: false,
resizable: false,
title: "Addtional Information"
});
additionalForm.data("kendoWindow").center().open();
}
});
}
</script>
</body>
</html>