Question

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

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 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"])
)

对于每个可能的国家/地区，但它可能效率非常低，我仍然不知道如何触发更改事件。

Answer 1

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

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>

有关详细信息，请查看How Do I Have Conditional Logic in a Column Client Template?。希望这会有所帮助...

Answer 2

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

Grid InLine and PopUp Editing using Cascading DropDownLists

然而，这不只是复制和粘贴，我仍然不知道为什么这个例子在官方FAQ Telerik页面中不可用，但我想提供关键点以便这样做：< / p>

1）您必须选择 InLine 或 PopUp 编辑模式：

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

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

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

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

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

在我将课程用作类别而不是 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() }; }

其中，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 Grid中下拉列表的值？

2 个答案: