Question

我有一个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.i的附加数据，从EditorViewData方法名称推断它可以帮助我这样做。但是我无法让它工作。任何人帮我这个？感谢。

Answer 1

如果您的页面有一个定义良好的模型，您不需要使用ViewBag或ViewData，它们很草率。 EditorViewData允许您即时创建ViewData以将额外数据传递给EditorTemplate。

例如，假设您希望在EditorTemplate中为网格中的每个项目使用不同的DropDownList值，则需要传递额外的数据才能执行此操作。使用EditorViewData，您可以为模型添加其他值，而无需在Controller中编写任何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>

PeopleViewModel

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

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)
    {}
}

PersonQualifications Controller

数据提供程序被注入其他地方，但请注意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（最后！）

忽略有助于共享此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);
}

显然在这个例子中还有很多其他的东西（我希望我留下足够的代码才能使它有意义），但是它应该在需要的时候得到它 - 而且它真的需要它。

享受。

Answer 2

我遇到了与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>

然后将数据项添加到数据源上的read方法。

@(Html.Kendo().DropDownList()
        .Name("Product")
        .DataValueField("ProductId")
        .DataTextField("ProductName")
        .DataSource(ds => ds
            .Read(read => read.Action("ProductsRead", "Home")
                .Data("getParentId")
                ))
)

Telerik MVC Grid列定义中的“EditorViewData”是什么？

2 个答案: