具有级联下拉列表的 Kendo UI 网格
Posted
技术标签:
【中文标题】具有级联下拉列表的 Kendo UI 网格【英文标题】:Kendo UI Grid with Cascading DropDownList 【发布时间】:2012-09-12 19:03:07 【问题描述】:我的 Razor 布局上有一个 Kendo UI Grid,它从控制器获取数据。
在这个网格中,我希望有一组 3 个下拉列表,它们是:
ProductGroups
、Products
、Services
我希望实现的行为是,当我向 Grid 添加一行时,我首先选择 ProductGroups
,然后 Products
DropDown 将更新为由 GroupId
(值)过滤的产品列表。然后选择Product
并像第一个一样,用productId
(值)过滤的服务更新Services
DropDown。
我不太清楚如何实现这一点,有人可以帮助我吗?
感谢大家的帮助。
最好的问候。
【问题讨论】:
【参考方案1】:这是我为 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;
【讨论】:
弗拉德,这很有趣。我正在尝试同样的事情,在 incell 编辑中级联 ddl。但是,当您单击第一个 ddl 过滤第二个时,单元格将离开编辑模式。你的结果不一样吗? 您能否解释一下您从 Controller 或 Editortemplate 获取的“fundDropDown.dataSource”和“Model.Funds”是在哪里定义的?它在 MVC5 中不起作用,基金数据源的调用/定义在哪里,请您详细说明和帮助。在这个问题上急需帮助。谢谢你:) @Shivam657 fundDropDown 在 javascript 代码中定义: var fundDropDown = e.container.find("#FundId").data("kendoDropDownList");请查看我的 gridEdit 事件的 javascript 代码。 Model.Funds 来自控制器(它是 Razor 模型的一部分)。 FundViewModel 中的“资金”来自 .EditorViewData(new funds = Model.Funds)【参考方案2】:最简单的方法是使用级联下拉列表: http://demos.kendoui.com/web/dropdownlist/cascadingdropdownlist.html 在每个列的编辑器模板中。
如果您使用弹出式编辑,您可以考虑自定义弹出式菜单,如下所示: http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx
如果您使用内联编辑,您应该使用这种方法来自定义编辑器模板: http://docs.kendoui.com/documentation/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates
如果您使用的是 InCell - 只能说不可能。
【讨论】:
这是一个三列网格,每个网格都有一个组合。每个组合的模板不太可行,因为在具有不同数据源的多个上下文中需要这样做,并且必须根据选择前一个组合来过滤每个组合。 "如果您使用的是 InCell - 只能说不可能。"错误信息!显然你可以在编辑模式下获得DropDownList
对象并根据e.model.FkId
过滤它,就像@Vlad Bezden 的回答一样。【参考方案3】:
这适用于内联编辑模式。其他的我还没试过。
绑定第一个下拉列表的更改事件,找到目标下拉列表,并更改其数据源。 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");
【讨论】:
以上是关于具有级联下拉列表的 Kendo UI 网格的主要内容,如果未能解决你的问题,请参考以下文章
从下拉列表中选择选项后,Kendo UI Grid 中的下拉菜单显示对象-对象