如何有条件地更改 Kendo 网格中下拉列表的值？

Question

我正在使用 ASP MVC 5、Kendo UI 和一些层开发一个项目。主要思想是，在我从 Kendo 网格的下拉列中选择一个值后，例如：

columns.Bound(b => b.Country).ClientTemplate("#=Country.Name#");

它应该根据之前的选择更新第二列和第三列：

columns.Bound(b => b.Category).ClientTemplate("#=Category.Name#");
columns.Bound(b => b.Client).ClientTemplate("#=Client.Name#");

我无法在 Telerik 文档或论坛中找到任何示例或想法：

Grid/Events

Grid / Editing custom editor

Refresh/Replace DataSource of Foreignkey DropDown List

我也读过这个带有普通下拉菜单的例子：

Kendo UI DropDownList on a change to trigger event

有没有人经历过这样的事情？我目前的想法是创建 N 个编辑器模板：

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
    .DataValueField("CategoryID")
    .DataTextField("CategoryName")
    .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)

然而，对于每个可能的国家，它可能真的很低效，我仍然不知道如何触发 on Change 事件。

Answer 1

我使用以下方法通过模板对网格的各个单元格进行样式设置。我认为您可以应用此逻辑来更改 DropDownList 中的值。

UI 对于 Javascript:

{
    field: "EmployeeName", type: "string", width: "55px", title: "Employee Name", 
        template: "#= GetEditTemplate(data) #"
}

UI 对于 MVC：

...
columns.Bound(t => t.EmployeeName).Title("Status Name").Template(@<text></text>)
    .ClientTemplate("#= GetEditTemplate(data)#").Width("55px");
...

示例： 这里数据参数传递给Javascript方法并在条件中使用：

<script>
//Change the color of the cell value according to the given condition
function GetEditTemplate(data) {
    var html;

    if (data.StatusID == 1) {
        html = kendo.format(
        "<span class='text-success'>" +
        data.EmployeeName
        + "</span>"
        );
    }
    else {
        html = kendo.format(
        "<span class='text-danger'>Cancel</span>"
        );
    }
    return html;
}
</script>

有关更多信息，您可以查看 How Do I Have Conditional Logic in a Column Client Template?。希望这有助于...

Answer 2

经过长时间的研究，我在这个例子中找到了解决方案：

Grid InLine and PopUp Editing using Cascading DropDownLists

然而，这不仅仅是复制和粘贴，我仍然不知道为什么这个例子在官方 FAQ Telerik 页面中不可用，但我想提供关键点以便做到这一点:

1) 您必须 select InLine 或 PopUp 编辑模式：

.Editable(editable => editable.Mode(GridEditMode.InLine))

为什么？因为当您要编辑或添加行时：

级联下拉列表完全链接到ID，例如：

2) 接下来，您在网格中的新列将如下所示：

columns.Bound(b => b.CategoryID).ClientTemplate("#=Category.Name#");

注意，在我使用 class 作为 Category 而不是 CategoryID 之前，ID 是 关键点.

3) 你需要改变之前的做法，将class的提示添加到它的ID中，例如：

非级联方式：

[UIHint("ClientStatus")]
public Statuses Status { get; set; }

public int StatusID { get; set; }

级联方式：

public Statuses Status { get; set; }

[UIHint("ClientStatus")]
public int StatusID { get; set; }

3) 级联方法的编辑器模板应如下所示：

基本款：

@model int

@(Html.Kendo().DropDownListFor(m => m)
        .AutoBind(false)
        .DataValueField("CategoriesID")
        .DataTextField("Name")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("PopulateCategories", "FullView"))
            .ServerFiltering(true);
        })
)
@Html.ValidationMessageFor(m => m)

级联：

@model int

@(Html.Kendo().DropDownListFor(m => m)
        .AutoBind(false)
        .DataValueField("ID")
        .DataTextField("Name")
        .DataSource(dataSource =>
        {
            dataSource.Read(read => read.Action("PopulateStatuses", "FullView").Data("filterCategories"))
            .ServerFiltering(true);
        })
        .CascadeFrom("CategoriesID")
)
@Html.ValidationMessageFor(m => m)

4) 级联正在调用一个 JavaScript 函数，如下所示：

function filterCategories() {
    return {
        categoriesID: $("#CategoriesID").data("kendoDropDownList").value()
    };
}

其中CategoriesID是第一个下拉的ID，在我们编辑或添加新行时生成。

4）最后需要分享一个JSON结果：

第一个下拉：

public JsonResult PopulateCategories()
{
        return Json(CategoriesData.GetCategories(), JsonRequestBehavior.AllowGet);
}

第二次及更多下拉：

public JsonResult PopulateStatuses(int categoryID)
{
        return Json(StatusesData.GetStatuses(categoryID), JsonRequestBehavior.AllowGet);
}

如何有条件地更改 Kendo 网格中下拉列表的值？

How can I conditionally change the values of a dropdown in a Kendo Grid?

c#

asp.net-mvc

kendo-ui

kendo-grid

kendo-asp.net-mvc