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

Question

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

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文档或论坛中找不到任何示例或想法：

网格/事件

网格/编辑自定义编辑器

刷新/替换外键下拉列表的数据源

我也用正常的下拉列表读了这个例子：

剑道UI DropDownList上的更改触发事件

有人经历过这样的事情吗？我目前的想法是创建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 for Javascript：

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

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>

有关更多信息，请查看如何在列客户机模板中使用条件逻辑？。希望这有助于。。。

Answer 2

经过长期研究，我在本例中找到了解决方案：

使用级联DropDownList进行网格内联和弹出编辑

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

1） 您必须选择内嵌或弹出编辑模式：

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

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

2）接下来，网格中的新列将看起来像这样：

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

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

3） 您需要更改以前的方法，从向类添加提示到类的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()
    };
}

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

4） 最后，我们需要共享一个JSON：

第一个下拉：

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

第二个和更多下拉列表：

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