从剑道网格中的其他列到达dataitem

时间:2015-03-04 11:48:58

标签: razor kendo-grid kendo-asp.net-mvc

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

试着看看这个例子。硬编码的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())

2 个答案:

答案 0 :(得分:0)

这是相当复杂的,但它将是我推荐的实现。它还假设您拥有&#34;部门ID&#34;或者父ID作为控制器层中某种路由参数(您将在控制器操作代码片段中看到这一点)。

首先,为托管 Kendo Grid的页面创建一个视图模型。它可能看起来像这样:

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 Grid渲染视图的控制器操作方法中,将其更新为类似于此的内容:

(注意:我假设在此示例中使用了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 Grid更改为:

@(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())

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

答案 1 :(得分:0)

这是我的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>

我不会再次发布网格,它只需要编辑绑定

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