在 KendoGrid 中重新绑定 DropDownList，取决于在同一行的其他 DropDownList 中选择的值
Posted
技术标签:
【中文标题】在 KendoGrid 中重新绑定 DropDownList，取决于在同一行的其他 DropDownList 中选择的值【英文标题】：Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row 【发布时间】：2016-05-05 15:34:42 【问题描述】：这是一个常见问题，但我不知道如何使用 KendoUI 小部件和 javascript 解决此问题。 我有一个 KendoGrid，其数据源来自对 Web 服务的 AJAX 调用。 数据绑定到列。两列（Source 和 Destination）是两个下拉列表：
每一列定义为
if (stringStartsWith(colTitle, 'Source'))
columns.push(
field: dataItem.replace(/\s+/g, ''),
title: colTitle,
width: 150,
locked: false,
editor: sourceDropDownEditor,
//template: "#=SourcetankIdentifier#",
attributes: style: "text-align: left" ,
type: "text"
);
SourceDropDownEditor 如下：
function sourceDropDownEditor(container, options)
$('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList(
dataTextField: "Source",
dataValueField: "Source",
dataSource: Sources
);
目的地下拉列表也是如此。
现在，我想要的是，当用户单击“编辑”按钮（网格是使用内联编辑定义的）并从源 DDL 中选择某个源值时；目标 DDL 中的列表必须根据此值更改。
我编写了一个函数来检索正确的列表，这取决于在源 DDL 中选择的值。但我不能做的是获取该行的目标 DLL 并相应地设置数据源。
根据要求提供更多详细信息：
网格是动态构建的：
function generateGrid(JSONData)
var model = generateModel(JSONData, selectedMenu);
var columns = generateColumns(model);
var data = generateData(gridData, columns);
var grid = $("#mainGrid").kendoGrid(
edit: function (e)
..
,
dataSource:
data: data,
schema:
model: model
,
sort:
field: defaultSort.replace(/\s+/g, ''),
dir: "desc"
,
toolbar: [
..
],
columns: columns,
editable: "inline",
sortable: true,
resizable: true,
filterable: true,
selectable: "multiple",
cancel: function(e)
$('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
,
剑道道场
这里dojo.telerik.com/uXeKa。它基本上反映了网格模板和列字段
最终解决方案
最终解决方案在这里：dojo.telerik.com/uXeKa/2。 不需要在 Grid 的 Edit 功能中添加任何内容。只需要实现Source DDL的onChange函数，并设置目标的数据源。
【问题讨论】：
能否提供更多代码？我要求它识别以下内容， 1. 下拉菜单在正常模式或编辑模式下显示。 2.你如何将数据源绑定到下拉列表。 1.下拉菜单在编辑模式下显示。 2. 数据源“Sources”是一个静态数组，它被绑定到“SourceDDL”中，如第二段代码中所述。而第一段代码是 Grid 定义中描述的“generateColumns”方法的一部分。 我真的开始相信，这实际上是不可能实现的。因为数据源实际上是绑定到“列”，而不是每一行中的元素。 我很抱歉，但我现在不在城里，所以很可能会在周五尝试解决您的问题。 我不确定是否可以通过内联编辑完成...但如果没有内联编辑，它可以完成。 【参考方案1】：请尝试以下代码 sn-p。
<!DOCTYPE html>
<html>
<head>
<title>Jayesh Goyani</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var sources = [];
var destinations = [];
var products = [
ProductID: 1,
ProductName: "Chai",
SourceID: 1,
DestinationID: 1,
,
ProductID: 2,
ProductName: "Chang",
SourceID: 2,
DestinationID: 1,
,
ProductID: 3,
ProductName: "Aniseed Syrup",
SourceID: 3,
DestinationID: 2,
,
ProductID: 4,
ProductName: "Chef Anton's Cajun Seasoning",
SourceID: 4,
DestinationID: 2,
,
ProductID: 5,
ProductName: "Chef Anton's Gumbo Mix",
SourceID: 4,
DestinationID: 2,
];
$(document).ready(function ()
$("#grid").kendoGrid(
dataSource:
data: products,
schema:
model:
id: "ProductID",
fields:
ProductName: type: "string"
,
pageSize: 10
,
sortable: true,
edit: onGridEdit,
filterable: true,
pageable:
input: true,
numeric: false
,
columns: [
field: "ProductName" ,
field: "SourceID", title: "SourceID", values: sources ,
field: "DestinationID", title: "DestinationID", values: destinations ,
command: ["edit", "destroy"], title: " "
],
editable: "inline"
);
);
var destinationID = 0;
function onGridEdit(arg)
destinationID = arg.model.DestinationID;
$.ajax(
url: "http://localhost:3470/Home/GetSource",
type: 'GET',
success: function (data)
var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList");
sourceDDL.bind("change", onChange);
sourceDDL.setDataSource(data);
sourceDDL.value(arg.model.SourceID);
onChange();
);
function onChange(arg)
var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value();
$.ajax(
url: "http://localhost:3470/Home/GetDestination",
type: 'GET',
data: SourceID: sourceid ,
success: function (data)
var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList");
destinationDDL.setDataSource(data);
if (arg)
// Please uncomment below code if you want to reset ddl value on sourceDDl value change
// destinationDDL.select(-1);
else
destinationDDL.value(destinationID);
destinationID = 0;
);
</script>
</body>
</html>
供参考：-
public class Source
public int value get; set;
public string text get; set;
public class Destination
public int value get; set;
public string text get; set;
.....
.....
public ActionResult GetSource()
List<Source> list = new List<Source>();
list.Add(new Source() value = 1, text = "cat1" );
list.Add(new Source() value = 2, text = "cat2" );
list.Add(new Source() value = 3, text = "cat3" );
list.Add(new Source() value = 4, text = "cat4" );
list.Add(new Source() value = 5, text = "cat5" );
return Json(list, JsonRequestBehavior.AllowGet);
public ActionResult GetDestination(int? SourceID)
List<Destination> list = new List<Destination>();
list.Add(new Destination() value = 1, text = "des1_" + Convert.ToString(SourceID) );
list.Add(new Destination() value = 2, text = "des2_" );
list.Add(new Destination() value = 3, text = "des3_" );
list.Add(new Destination() value = 4, text = "des4_" );
list.Add(new Destination() value = 5, text = "des5_" );
return Json(list, JsonRequestBehavior.AllowGet);
更新 1：（根据您的编辑器，我更新了 jquery 选择器语句）
function onGridEdit(arg)
var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList");
function onChange(arg)
var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value();
var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList");
如果有任何问题，请告诉我。
【讨论】：
您好 Jayesh，感谢您的回答。不幸的是， $(arg.container).find("select[name^='您可以为源列和目标列执行两个编辑器 (DropDownLists)。对于目标编辑器，您可以使用 cascadeFrom 属性，其中包含源下拉列表 ID。根据源 DropDownLists 中的选定选项过滤目标。这是内置功能的 Kendo UI，您可以阅读更多表单 here。
【讨论】：
以上是关于在 KendoGrid 中重新绑定 DropDownList，取决于在同一行的其他 DropDownList 中选择的值的主要内容，如果未能解决你的问题，请参考以下文章
Element-UI ( Dropdow )下拉菜单组件command传输对象