我正在使用带有自定义弹出模板的 Kendo Grid。
我想同时使用popup
和inline
模式。添加新记录时,网格应使用弹出模式并打开我的自定义模板;编辑时应使用inline
模式。
我提到了this DEMO在 this blog article ,它展示了如何同时使用 popup
和 inline
模式,但我无法使用自定义模板呈现弹出窗口。
谁能帮我解决这个问题吗?
谢谢。
这里是my DEMO :
HTML:
<h3>How to use Kendo-ui Grid use popup with custom template while adding and Inline while editing records</h3>
<div id="grid"></div>
<script id="popup-editor" type="text/x-kendo-template">
<h3>Edit Person</h3>
<p>
<label>Name:<input name="name" /></label>
</p>
<p>
<label>Age: <input data-role="numerictextbox" name="age" /></label>
</p>
</script>
JS:
var ds = {
data: createRandomData(20),
pageSize: 4,
schema: {
model: {
fields: {
Id: { type: 'number' },
FirstName: { type: 'string' },
LastName: { type: 'string' },
City: { type: 'string' }
}
}
}
};
var grid = $("#grid").kendoGrid({
dataSource: ds,
toolbar: [ { text : "Add new record", name: "create", iconClass: "k-icon k-add"} ],
// editable: "inline",
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
},
pageable: true,
columns: [
{ field: "FirstName", width: 100, title: "First Name" },
{ field: "LastName", width: 100, title: "Last Name" },
{ field: "City", width: 100 },
{ command: [ "edit" ]}
]
}).data("kendoGrid");
最佳答案
我已经编辑了你的并创建了这个新的 DEMO .
您可以使用剑道网格的setOptions
方法动态地将编辑模式更改为与自定义模板一起弹出
,如下所示:
$(".k-grid-popup", grid.element).on("click", function () {
// change grid editable mode to popup and set the popup editing template
grid.setOptions({
editable: {
mode: "popup",
template: kendo.template($("#popup-editor").html())
}
});
grid.addRow();
grid.options.editable = "inline";
});
关于javascript - 如何在弹出和内联模式下使用 Kendo UI Grid?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47073349/