[英]Kendo Grid Popup Edit mode not displaying ComboBox data
當我在Kendo網格中處於彈出編輯模式時,在下拉列表上顯示組合框數據時出現問題。 當網格中的可編輯參數更改為“內聯”時,組合框的行為應與預期相同。 我認為問題出在自定義彈出模板中,但是許多更改仍未產生任何結果。
這是.cshtml文件中的腳本:
<script id="popup_editor" type="text/x-kendo-template">
<label for="name">Page Name</label>
<input name="name"
data-bind="name"
data-value-field="id"
data-text-field="name"
data-role="combobox" />
</script>
這是JavaScript:
var griddata = new kendo.data.DataSource({
transport: {
read: {
url: serviceRoot + "Approval/Get",
type: "POST",
contentType: jsonType,
cache: false
},
destroy: {
url: serviceRoot + "Approval/Delete",
type: "PUT",
complete: function(e) {
refreshData();
}
},
create: {
url: serviceRoot + "Approval/Create",
type: "PUT",
complete: function(e) {
refreshData();
}
},
update: {
url: serviceRoot + "Approval/Inline",
type: "PUT",
complete: function(e) {
refreshData();
}
}
},
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true,
scrollable: true,
height: 700,
schema: {
data: "list",
total: "total",
model: {
id: "id",
fields: {
id: { editable: false, nullable: false },
name: { editable: true, nullable: false, validation: { required: true }, type: "string" },
keyName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
countryName: { editable: true, nullable: false, validation: { required: true }, type: "string" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: griddata,
selectable: "row",
allowCopy: true,
scrollable: true,
resizable: true,
reorderable: true,
sortable: {
mode: "single",
allowUnsort: true
},
toolbar: [{ name: "create", text: "Create New Content" }}],
edit: function(e) {
if (e.model.isNew() === false) {
$('[name="PageName"]').attr("readonly", true);
}
},
columns: [
{ field: "id", hidden: true },
{ field: "name", title: "Page Name", editor: PageNameComboBoxEditor, width: "200px" },
{
command: [
{ name: "edit" },
{ name: "destroy" }
],
title: " ",
width: "250px"
}
],
editable: {
mode: "popup",
template: kendo.template($("#popup_editor").html())
},
pageable: {
refresh: true,
pageSizes: [5, 10, 15, 20, 25, 1000],
buttonCount: 5
},
cancel: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
});
function PageNameComboBoxEditor(container, options) {
ComboBoxEditor(container, options, "name", "id", "ApprovalPage/Get", options.model.id, options.model.name);
}
function ComboBoxEditor(container, options, textfield, valuefield, url, defaultid, defaultname) {
$("<input required data-text-field=\"" + textfield + "\" data-value-field=\"" + valuefield + "\" data-bind=\"value:" + options.field + "\"/>")
.appendTo(container)
.kendoComboBox({
autoBind: false,
dataTextField: textfield,
dataValueField: valuefield,
text: defaultname,
value: defaultid,
select: function(e) {
var dataItem = this.dataItem(e.item);
var test = dataItem;
},
dataSource: {
transport: {
read: {
url: serviceRoot + url,
type: "GET"
}
}
}
});
}
任何方向將不勝感激!
首先,我注意到您有錯別字和一些雙重初始化,並且它指定的值不同會導致問題(不確定這是否是您的問題,請嘗試將其刪除),
<input name="name"
data-bind="name" -> typo maybe? no data-binding declaration like these
data-value-field="id" -> double init, you have it on your ComboBoxEditor function dataValueField: valuefield,
data-text-field="name" -> double init, you have it on your ComboBoxEditor function dataTextField: textfield,
data-role="combobox" />
但是確保使其正常工作的方法通常是自定義編輯功能,以將kendo小部件聲明為mode: popup
如下所示:
<!DOCTYPE html> <html> <head> <base href="http://demos.telerik.com/kendo-ui/grid/editing-popup"> <style> html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; } </style> <title></title> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.common-material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.material.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.min.css" /> <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.429/styles/kendo.dataviz.material.min.css" /> <script src="http://cdn.kendostatic.com/2015.1.429/js/jquery.min.js"></script> <script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script> </head> <body> <div id="example"> <div id="grid"></div> <script id="popup_editor" type="text/x-kendo-template"> <div> <label for="name">Page Name</label> <input id="combo_box" name="name" data-role="combobox" /> </div> </script> <script> $(document).ready(function() { var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/service", dataSource = new kendo.data.DataSource({ transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, update: { url: crudServiceBaseUrl + "/Products/Update", dataType: "jsonp" }, destroy: { url: crudServiceBaseUrl + "/Products/Destroy", dataType: "jsonp" }, create: { url: crudServiceBaseUrl + "/Products/Create", dataType: "jsonp" }, parameterMap: function(options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; } } }, batch: true, pageSize: 20, schema: { model: { id: "ProductID", fields: { ProductID: { editable: false, nullable: true }, ProductName: { validation: { required: true } }, UnitPrice: { type: "number", validation: { required: true, min: 1 } }, Discontinued: { type: "boolean" }, UnitsInStock: { type: "number", validation: { min: 0, required: true } } } } } }); dataSource.fetch(); $("#grid").kendoGrid({ dataSource: dataSource, pageable: true, height: 550, toolbar: ["create"], editable: { mode: "popup", template: kendo.template($("#popup_editor").html()) }, edit: function(e) { $("#combo_box").kendoComboBox({ autoBind: false, dataTextField: 'ProductName', dataValueField: 'ProductID', filter: "contains", text: e.model.ProductName, value: e.model.ProductID, dataSource: ({ type: "jsonp", serverFiltering: true, transport: { read: { url: crudServiceBaseUrl + "/Products", dataType: "jsonp" }, } }) }); }, columns: [{ field: "ProductName", title: "Product Name" }, { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" }, { field: "UnitsInStock", title: "Units In Stock", width: "120px" }, { field: "Discontinued", width: "120px" }, { command: ["edit", "destroy"], title: " ", width: "250px" }], }); }); </script> </div> </body> </html>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.