我的Razor Layout上有一个Kendo UI Grid,它从控制器中获取数据。
在这个网格中,我希望有一组3个DropDownLists,它们是:
ProductGroups
,Products
,Services
我希望实现的行为是,当我向网格添加一行时,我首先选择ProductGroups
,并使用Products
(value)过滤的产品列表更新GroupId
DropDown。然后选择Product
并像第一个一样,使用Services
(value)过滤的服务更新productId
DropDown。
我不太清楚如何实现这一目标,有人可以帮助我吗?
感谢大家的帮助。
最好的祝福。
最简单的方法是使用级联下拉列表:http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html在每个列的编辑器模板中。
如果您使用弹出编辑,您可以考虑自定义弹出菜单,如下所示:http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx
如果您正在使用InLine编辑,则应使用此方法自定义编辑器模板:http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
如果您正在使用In Cell - 我们只能说它不可能。
这是我为GridEditMode.InCell所做的。我有客户和基金,每个客户都有自己的基金清单,所以当用户选择客户时,我只需要显示特定于此客户的基金
查看:Kendo Grid UI设置
c.ForeignKey(p => p.ClientId, Model.Clients, "Id", "ClientName")
.Title("Client")
.Width(100);
c.ForeignKey(p => p.FundId, Model.Funds, "Id", "Description")
.EditorViewData(new {funds = Model.Funds})
.EditorTemplateName("FundForeignKeyEditor")
.Title("Fund")
.Width(100);
})
.Editable(x => x.Mode(GridEditMode.InCell))
.Events(e => e.Edit("gridEdit"))
现在,当用户点击Fund时,你需要对资金的数据源进行过滤,你可以使用JavaScript在“gridEdit”事件上进行。您将此代码放在与上面代码相同的视图/文件中
<script type="text/javascript">
function gridEdit(e) {
var fundDropDown = e.container.find("#FundId").data("kendoDropDownList");
if (fundDropDown) {
fundDropDown.dataSource.filter({ field: "ClientId", operator: "eq", value: e.model.ClientId });
</script>
Fund拥有“FundForeighKeyEditor”编辑器模板,您必须将其添加到Views \ Shares \ EditorTemplate文件夹中。您可以使用任何名称,只需确保文件模板的名称与EditorTemplateName的名称匹配。在我的情况下,我使用“FundForeignKeyEditor”作为EditorTemplate和FundForeighKeyEditor.cshtml文件
FundForeighKeyEditor.cshtml
@model FundViewModel
@(
Html.Kendo().DropDownListFor(m => m)
.BindTo((System.Collections.IEnumerable)ViewData["funds"])
.DataTextField("Description")
.DataValueField("Id")
)
这是一个FundViewModel,它包含ClientId,所以我可以对它进行过滤
public class FundViewModel
{
public string Id { get; set; }
public string ClientId { get; set; }
public string Description { get; set; }
}
这适用于内联编辑模式。我还没有尝试过任何其他人。
绑定到第一个下拉列表的更改事件,找到目标下拉列表,并更改其数据源。 data-selector-type
是我添加到级联链中每个下拉列表的属性,以使选择变得容易。
function clientDropDownEditor(container, options) {
var clientCombo = $('<input id="client' + options.uid + '" data-selector-type="client" data-text-field="Name" data-value-field="Name" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoComboBox({
dataTextField: "Name",
dataValueField: "Name",
dataSource: {
transport: {
read: "json/data/getClients"
}
},
change: function (e) {
// Find the element with the required selector type in the same TR
var kendoComboSites = e.sender.element.closest("tr").find("[data-selector-type=site]").data("kendoComboBox");
kendoComboSites.dataSource.transport.options.read.url = "json/data/GetClientSites/" + e.sender.element.val() + "/" + $("#Id").val();
kendoComboSites.dataSource.read();
kendoComboSites.refresh();
}
}).data("kendoAutoComplete");
}