13

我有一个telerik网格如下:

Html.Telerik().Grid<MatchViewModel>().Name("Matches").Columns(cols =>
             {
                 cols.Bound(e => e.Name);
                 cols.Bound(e => e.Date);
                 cols.Bound(e => e.GuestTeamId);
                 cols.Bound(e => e.HostTeamId);
                 cols.Bound(e => e.PostponedDate);
             ==> cols.Bound(e => e.RefereeId).EditorViewData(new { RefereeName = '' });
                 cols.Bound(e => e.StatusId);
             })

在箭头所指的列中,我想将裁判名称作为 EditorTemplate 的附加数据发送。我从EditorViewData方法名称推断它可以帮助我这样做。但我无法让它工作。有人可以帮我吗?谢谢。

4

2 回答 2

24

如果您的页面有一个定义明确的模型,那么您永远不需要使用 ViewBag 或 ViewData,它们是草率的。EditorViewData 允许您即时创建 ViewData 以将额外数据传递给您的 EditorTemplate。

例如,假设您希望在 EditorTemplate 中为网格中的每个项目设置不同的 DropDownList 值,您将需要传递额外的数据来执行此操作。使用 EditorViewData,你可以从你的模型中添加额外的值来达到这个目的,而无需在你的控制器中编写任何 ViewBag 或 ViewData 对象。

我使用它的第一个地方是人员网格,它允许编辑添加到嵌套 TabStrip 内的资格网格中的已定义资格。诀窍是我不希望每个人的 DropDownList 包含他们已经获得的任何资格。像这样...

人员网格

@using Kendo.Mvc.UI
@model PeopleViewModel
@(Html.Kendo().Grid<PersonModel>()
    .Name("PersonGrid")
    .Columns(columns => {
        columns.Bound(b => b.LastName).EditorTemplateName("_TextBox50");
        columns.Bound(b => b.FirstName).EditorTemplateName("_TextBox50");
...
        columns.Command(cmd => { cmd.Edit(); cmd.Destroy(); }).Width(180);
    })
    .ClientDetailTemplateId("personTemplate")
    .ToolBar(toolbar => toolbar.Create())
    .Selectable()
    .Editable(editable => editable.Mode(GridEditMode.InLine))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model =>
            {
                model.Id(a => a.Id);
            })
        .Create(create => create.Action("CreatePerson", "People"))
        .Read(read => read.Action("ReadPeople", "People"))
        .Update(update => update.Action("UpdatePerson", "People"))
        .Destroy(destroy => destroy.Action("DestroyPerson", "People"))
    )
    .Events(events => events.DataBound("dataBound"))
)
<script type="text/javascript">
    function dataBound() {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    }
</script>
<script id="personTemplate" type="text/kendo-tmpl">
    @(Html.Kendo().TabStrip()
        .Name("TabStrip_#=Id#")
        .Items(items =>
                    {
...
                        items.Add().Text("Edit Qualifications")
                        .LoadContentFrom("PersonQualifications", "People", new {personId = "#=Id#"});
...
                    })
        .ToClientTemplate()
    )
</script>

人员视图模型

忽略继承的东西,它超出了这个讨论。但请注意,我在与此顶级视图相关的所有子视图上使用相同的模型。

public class PeopleViewModel : PageViewModel
{
    public int PersonId { get; set; }
    public PersonModel Person { get; set; }
    public IList<QualificationModel> AllQualifications { get; set; }
...

    public PeopleViewModel(BaseViewModel baseViewModel) : base(baseViewModel)
    {}
}

人员资格控制员

数据提供者在其他地方注入,但请注意模型展平的 POCO - 只是将 List 应用于模型构造函数的静态方法。

public ActionResult PersonQualifications(int personId)
{
    SetBaseContext(HttpContext);
    var model = new PeopleViewModel(BaseViewModel)
                     {
                        PersonId = personId,
                        AllQualifications = QualificationModel.FlattenToThis(_qualificationDataProvider.Read())
                     };
    return View(model);
}

嵌套网格(在 TabStrip 内加载的视图)

@using Kendo.Mvc.UI
@model PeopleViewModel
@{
    Layout = null;
}
@(Html.Kendo().Grid<PersonQualificationModel>()
    .Name("QualificationEditGrid_" + Model.PersonId)
    .Columns(columns =>
    {
        columns.ForeignKey(f => f.QualificationId, Model.AllQualifications, "Id", "Display")
===>        .EditorViewData(new {personId = Model.PersonId})
            .EditorTemplateName("PersonQualificationDropDownList");
        columns.Command(cmd =>
                            {
                                cmd.Edit();
                                cmd.Destroy();
                                }).Width(180);
    })
    .ToolBar(toolbar => toolbar.Create())
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Model(model => {
            model.Id(a => a.Id);
        })
        .Create(create => create.Action("CreatePersonQualification", "People"))
        .Read(read => read.Action("ReadPersonQualifications", "People", new {personId = Model.PersonId}))   
        .Destroy(destroy => destroy.Action("DestroyPersonQualification", "People"))
    )
)

编辑器模板(终于!)

忽略有助于共享此 EditorTemplate 的第一个 ViewData 引用。我们感兴趣的是更远一点。

@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
    .Name(ViewData.TemplateInfo.GetFullHtmlFieldName(""))
    .DataValueField("Id")
    .DataTextField("Name")
    .OptionLabel("Select...")
    .DataSource(dataSource => dataSource
===>    .Read(read => read.Action("ReadDdlQualifications", "People", new {personId = ViewData["personId"]}))
    )
)

控制器方法(只是为了彻底)

public JsonResult ReadDdlQualifications(int personId)
{
    var qualification = _qualificationDataProvider.ReadAvailableToPerson(personId);
    IList<IdNamePair> results = IdNamePair.FlattenToThis(qualification);
    return Json(results, JsonRequestBehavior.AllowGet);
}

显然,在这个例子中还有很多其他的东西(我希望我留下了足够的代码让它变得有意义),但它应该跨越需要它的点——而且它确实是需要的。

享受。

于 2012-12-05T00:26:30.590 回答
5

我遇到了与 Chad 相同的问题,正如 Trey 所提到的,这不能通过将信息传递给EditorViewData来完成。没有办法传递行数据项,只能传递页面数据。

作为替代方案,您可以将此脚本添加到编辑器模板中。然后,您可以从网格行访问字段值并将其传递给数据源调用,根据每行数据过滤下拉列表。

<script type="text/javascript">

    function getParentId() {
        var row = $(event.srcElement).closest("tr");
        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
        var dataItem = grid.dataItem(row);
        return { EmployeeId: dataItem.EmployeeId };
    }

</script>

然后将数据项添加到数据源上的读取方法中。

@(Html.Kendo().DropDownList()
        .Name("Product")
        .DataValueField("ProductId")
        .DataTextField("ProductName")
        .DataSource(ds => ds
            .Read(read => read.Action("ProductsRead", "Home")
                .Data("getParentId")
                ))
)
于 2014-01-24T16:18:25.283 回答