从 kendo 网格中的其他列获取数据项

Question

我认为在做网格时从另一列获取当前项目是微不足道的。

试着看看这个例子。硬编码的 106 应该是 DepartmentId，但我不能使用 p lambda，而且我不知道我还应该如何使用 Razor。

否则我想我必须在 JavaScript 中完成。

@(Html.Kendo().Grid<Product>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(c => c.Id))
          .Read(read => read.Action("Products_Read", "Product"))
          .Update(update => update.Action("Products_Update", "Product"))
      )
      .Columns(columns =>
      {
          columns.Bound(p => p.Id).Hidden(true);
          columns.Bound(p => p.Title).Title("Titel");
          columns.ForeignKey(p => p.DepartmentId, (System.Collections.IEnumerable)ViewData["Departments"], "Id", "Name");
          columns.ForeignKey(p => p.EditorialId, ((IEnumerable<Editorial>)ViewData["Editorials"]).Where(x => x.ParentId == 106), "Id", "Name");
          columns.Command(command => command.Edit().Text("Rediger").UpdateText("Gem").CancelText("Fortryd"));
      })
          .Pageable()
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Sortable())

Answer 1

这相当复杂，但这是我推荐的实施方式。它还假设您在控制器层中将 "department id" 或父 ID 作为某种路由参数（您将在控制器操作代码片段中看到它）。

首先，为承载 Kendo 网格的页面创建一个视图模型。它可能看起来像这样：

public class ListViewModel
{
    public IEnumerable<Department> Departments { get; set; }
    public IEnumerable<Editorial> Editorials { get; set; }

    public ListViewModel()
    {
        Departments = new List<Department>();
        Editorials = new List<Editorial>();
    }
}

在控制器的使用 Kendo 网格呈现视图的操作方法中，将其更新为类似于此的内容：

（注意：我假设在此示例中使用 Entity Framework，但您可以轻松换出您的数据访问方法。）

public class ActionResult Index(int parentId) // I'm assuming this is a route value of some sort
{
    var model = new ListViewModel();
    model.Departments = _dbContext.Departments.Where(x => x.ParentId == parentId).ToList();
    model.Editorials = _dbContext.Editorials.ToList();

    return View(model);
}

现在，将您的 Kendo 网格更改为：

@(Html.Kendo().Grid<Product>()
      .Name("grid")
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(c => c.Id))
          .Read(read => read.Action("Products_Read", "Product"))
          .Update(update => update.Action("Products_Update", "Product"))
      )
      .Columns(columns =>
      {
          columns.Bound(p => p.Id).Hidden(true);
          columns.Bound(p => p.Title).Title("Titel");
          columns.ForeignKey(p => p.DepartmentId, Model.Departments, "Id", "Name");
          columns.ForeignKey(p => p.EditorialId, Model.Editorials, "Id", "Name");
          columns.Command(command => command.Edit().Text("Rediger").UpdateText("Gem").CancelText("Fortryd"));
      })
          .Pageable()
          .Editable(editable => editable.Mode(GridEditMode.InLine))
          .Sortable())

这里唯一的变化是，您可以 Model.Editorials 而不是 ((IEnumerable<Editorial>)ViewData["Editorials"]).Where(x => x.ParentId == 106)，因为控制器会过滤掉您的结果。

Answer 2

这是我的 JavaScript 绑定解决方案。

你必须明白有等级、出版商、部门、社论。

<script>
var departments = $.parseJSON('@Html.Raw(Json.Encode(@ViewData["Departments"]))');
var editorials =  $.parseJSON('@Html.Raw(Json.Encode(@ViewData["Editorials"]))');

function onEdit(e) {
    //debugger;

    $("#DepartmentId").kendoDropDownList({ dataTextField: "Name",dataValueField: "Id",});
    $("#EditorialId").kendoDropDownList({ dataTextField: "Name",dataValueField: "Id",});

    $('#DepartmentId').data("kendoDropDownList").setDataSource(getDepartments(e.model.PublisherId));
    $('#EditorialId').data("kendoDropDownList").setDataSource(getEditorials(e.model.DepartmentId));
}

function getEditorials(parentId) {
    return jQuery.grep(editorials, (function (element, index) { return element.ParentId === parentId; }));
}

function getDepartments(parentId) {
    return jQuery.grep(departments, (function (element, index) { return element.ParentId === parentId; }));
}
</script>

我不会再post网格，它只需要编辑绑定

.Events(e => e.Edit("onEdit"))

从 kendo 网格中的其他列获取数据项

Reach dataitem from other column within a kendo grid

razor

kendo-grid

kendo-asp.net-mvc