在KendoGrid中重新绑定DropDownList,具体取决于同一行中其他DropDownList中的Value Selected
ale*_*sio 10 jquery telerik kendo-ui kendo-grid kendo-dropdown
这是一个常见问题,但我不知道如何使用KendoUI小部件和Javascript来解决这个问题.我有一个KendoGrid,其数据源来自对Web服务的AJAX调用.数据绑定到列.两列(源和目标)是两个下拉列表:
每列定义为
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中选择的值.但我不能做的是获取该行的Destion 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();
},
KENDO DOJO
这里是dojo.telerik.com/uXeKa .它基本上反映了网格模板和列字段
最终解决方案
最终解决方案如下:dojo.telerik.com/uXeKa/2.不需要在Grid 的Edit函数中添加任何内容.只需要实现Source DDL的onChange函数,并设置目标的数据源.
请尝试使用下面的代码片段。
<!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");
}
如果有任何疑问请告诉我。
| 归档时间： |
|
| 查看次数： |
4762 次 |
| 最近记录： |