Kendo 网格中的 DropDownList 在选择之后才绑定
Kendo DropDownList in Grid not binding until after selection
我有一个可编辑的 Kendo 网格,其中有一个下拉列表字段。我有一个 U_UserId
和 U_Name
字段需要在该列中使用。名称显然显示,而 ID 应该是用于绑定的。我在下面的示例中删除了我的数据源 URL,但 DropDownList 数据显示得很好,带有名称和 ID 值列表。
我已经看了一段时间了,所以我可能遗漏了一些明显的东西。我遇到了与 this question 相同的问题(下拉列表不会绑定到该行中显示的用户,直到我单击下拉列表以展开它),但我认为我的模型和字段是正确的,所以我'我不确定为什么我仍然无法正确绑定下拉菜单。
这是我的网格和编辑器的 JS:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json-ajax",
transport: {
read: {
url: myUrl,
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
model: {
id: "OrderId",
fields: {
O_OrderNumber: {
editable: false
},
O_Date: {
editable: false, type: "date"
},
O_InvoiceNumber: {
editable: false
},
O_Status: {
editable: false
},
O_DueDate: {
editable: false, type: "date"
},
U_UserId: {
editable: true
},
U_Name: {
editable: false
},
O_VendorId: {
editable: false
},
O_TrackingNumber: {
editable: false
}
}
}
},
},
scrollable: false,
editable: true,
pageable: true,
columns: [
{
field: "O_OrderNumber",
title: "Order #",
hidden: false
},
{
field: "O_Date",
title: "Pull Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "O_InvoiceNumber",
title: "Invoice #",
hidden: false
},
{
field: "O_Status",
title: "Status",
hidden: false
},
{
field: "O_DueDate",
title: "Due Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "U_UserId",
title: "Owner",
hidden: false,
width: 130,
editor: ownerDropDownEditor,
template: "#=U_Name#"
},
{
field: "O_VendorId",
title: "Vendor",
hidden: false
},
{
field: "O_TrackingNumber",
title: "Tracking #",
hidden: false
}
]
}).data("kendoGrid");
});
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
编辑:出于好奇,我尝试更改我的下拉列表,使 DataTextField 和 DataValueField 都为 UserId
,并且立即进行了选择,但显示的是 ID (int) 值名称(字符串)。
因此,进一步调查我上面的编辑,我发现 this Telerik post,这听起来像是下拉列表实际上是由一个对象绑定的,而不是由下拉列表值绑定的。可以添加一个 data-value-primitive
属性,以便按值绑定。我更新了我的编辑器,它现在按预期运行:
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-value-primitive="true" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
我有一个可编辑的 Kendo 网格,其中有一个下拉列表字段。我有一个 U_UserId
和 U_Name
字段需要在该列中使用。名称显然显示,而 ID 应该是用于绑定的。我在下面的示例中删除了我的数据源 URL,但 DropDownList 数据显示得很好,带有名称和 ID 值列表。
我已经看了一段时间了,所以我可能遗漏了一些明显的东西。我遇到了与 this question 相同的问题(下拉列表不会绑定到该行中显示的用户,直到我单击下拉列表以展开它),但我认为我的模型和字段是正确的,所以我'我不确定为什么我仍然无法正确绑定下拉菜单。
这是我的网格和编辑器的 JS:
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "json-ajax",
transport: {
read: {
url: myUrl,
type: "GET"
}
},
batch: true,
pageSize: 20,
schema: {
data: "Data",
total: "Total",
model: {
id: "OrderId",
fields: {
O_OrderNumber: {
editable: false
},
O_Date: {
editable: false, type: "date"
},
O_InvoiceNumber: {
editable: false
},
O_Status: {
editable: false
},
O_DueDate: {
editable: false, type: "date"
},
U_UserId: {
editable: true
},
U_Name: {
editable: false
},
O_VendorId: {
editable: false
},
O_TrackingNumber: {
editable: false
}
}
}
},
},
scrollable: false,
editable: true,
pageable: true,
columns: [
{
field: "O_OrderNumber",
title: "Order #",
hidden: false
},
{
field: "O_Date",
title: "Pull Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "O_InvoiceNumber",
title: "Invoice #",
hidden: false
},
{
field: "O_Status",
title: "Status",
hidden: false
},
{
field: "O_DueDate",
title: "Due Date",
hidden: false,
type: "date",
format: "{0:MM/dd/yyyy}"
},
{
field: "U_UserId",
title: "Owner",
hidden: false,
width: 130,
editor: ownerDropDownEditor,
template: "#=U_Name#"
},
{
field: "O_VendorId",
title: "Vendor",
hidden: false
},
{
field: "O_TrackingNumber",
title: "Tracking #",
hidden: false
}
]
}).data("kendoGrid");
});
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}
编辑:出于好奇,我尝试更改我的下拉列表,使 DataTextField 和 DataValueField 都为 UserId
,并且立即进行了选择,但显示的是 ID (int) 值名称(字符串)。
因此,进一步调查我上面的编辑,我发现 this Telerik post,这听起来像是下拉列表实际上是由一个对象绑定的,而不是由下拉列表值绑定的。可以添加一个 data-value-primitive
属性,以便按值绑定。我更新了我的编辑器,它现在按预期运行:
function ownerDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-value-primitive="true" />')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "Name",
dataValueField: "UserId",
dataSource: {
type: "json",
transport: {
read: {
url: myOtherUrl,
type: "GET"
}
}
}
});
}