如何访问剑道网格上弹出编辑窗口中的项目？

Question

我有一个联系人页面，用户可以在其中维护它。使用剑道网格，我在我的初始网格上列出了联系人，只有几列。当用户单击编辑按钮时，会弹出一个弹出窗口，因此可以执行编辑/删除。但是，联系人表有 3 个外键（AccountId、StateProvinceId、CountryRegionId），它们在主网格中显示为下拉列表，但在弹出窗口中不显示。如何在弹出编辑模式下填充这些下拉菜单并禁用某些字段？

@model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;

<div>
@(Html.Kendo().Grid<ContactModel>()
    .Name(Constants.ContactGridId)
    .EnableCustomBinding(true)
    .Sortable()
    .Columns(c =>
    {
        c.Bound(e => e.ContactId).Width(50);
        c.ForeignKey(e => e.AccountId, (IEnumerable)ViewData["Account"], "AccountId", "Name").Title("Account");
        c.Bound(e => e.PrimaryContact);
        c.Bound(e => e.ReceivesNotifications);
        c.Bound(e => e.FirstName);
        c.Bound(e => e.LastName);
        c.Bound(e => e.Department).Hidden();
        c.Bound(e => e.Address1).Hidden();
        c.Bound(e => e.Address2).Hidden();
        c.Bound(e => e.City).Hidden();
        c.ForeignKey(e => e.StateProvinceId, (IEnumerable)ViewData["StateProvinces"], "StateProvinceId", "StateAbbName").Title("State Province").Hidden();
        c.Bound(e => e.Zip).Hidden();
        c.ForeignKey(e => e.CountryRegionId, (IEnumerable)ViewData["CountryRegions"], "CountryRegionId", "CountryCode").Title("Country Region").Hidden();
        c.Bound(e => e.Phone).Hidden();
        c.Bound(e => e.PhoneExtension).Hidden();
        c.Bound(e => e.Fax).Hidden();
        c.Bound(e => e.Email).Hidden();
        c.Command(command => { command.Edit(); command.Destroy(); }).Width(155);
    })
    .Events(events =>
    {
        events.Cancel("Helpers.HideNotificationArea");
    })
    .Sortable()
    .Selectable()
    .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("EditContact"))


    .Pageable()
    .Filterable()
    .ToolBar(items =>
    {
        items.Create().Text("Add New Contact");
    })
    .DataSource(d => d
        .Ajax()
        .ServerOperation(true)
        .PageSize(15)
        .Model(model =>
        {
            model.Id(m => m.ContactId);
            model.Field(m => m.ContactId).Editable(false);
            model.Field(m => m.AccountId).DefaultValue(-1);
            model.Field(m => m.PrimaryContact).DefaultValue(false);
            model.Field(m => m.ReceivesNotifications).DefaultValue(false);
            model.Field(m => m.FirstName);
            model.Field(m => m.LastName);
            model.Field(m => m.Department);
            model.Field(m => m.Address1);
            model.Field(m => m.Address2);
            model.Field(m => m.City);
            model.Field(m => m.StateProvinceId).DefaultValue(-1);
            model.Field(m => m.Zip);
            model.Field(m => m.CountryRegionId).DefaultValue(-1);
            model.Field(m => m.Phone);
            model.Field(m => m.PhoneExtension);
            model.Field(m => m.Fax);
            model.Field(m => m.Email);
        })

                .Read(read => read.Action("Read_Contacts", Constants.ContactController))
                .Create(create => create.Action("Create", Constants.ContactController))
                .Update(update => update.Action("Update", Constants.ContactController))
                .Destroy(destroy => destroy.Action("Delete", Constants.ContactController))
        .Events(events =>
        {
            events.Error("function(e){Helpers.GridError(e, '" + Constants.ContactGridId + "')}");
            events.Change(@<text>
                function(e) {
                Helpers.HideNotificationArea(e);
                Helpers.OnChangeForeignKeyRead(e, ['AccountId'],['StateProvinceId'],['CountryRegionId']);
                }
            </text>);
        })
            )
)

Answer 1

您必须将外键的值作为 ViewData 传递，并在编辑器模板中使用 ViewData。

@{
    Html.Kendo().Grid(Model.Contacts)
        .Editable(e => e.AdditionalViewData(new
        {
            Accounts = Model.Accounts
        })
        // ...
        .Render();
}

Answer 2

所以在做了一些研究之后，我发现自定义 Kendo 弹出式编辑器的最佳方法是创建自定义编辑器模板并将其放在 ~Views/Shared/EditorTemplates 文件夹中。一旦您在主网格 cshtml 上提供模板的名称，如下所示：

.Editable(editable => editable.Mode(GridEditMode.PopUp)
                        .TemplateName("_EditContact")

一旦我弄清楚了，下拉列表还有另一个问题，它没有显示表格中的值，但它填充正常。这需要一些时间才能弄清楚，因为关于剑道的文档并不多。解决方法是使用

删除 .Name("ColumnName") 属性

.HtmlAttributes(new { @ColumnNameId = "ColumnName" } )

这是 _EditContact.cshtml 的完整代码

@model Humana.Billings.Web.Models.ContactModel
@using Humana.Billings.Web.Helpers;
@using System.Collections;

<div class="editor-label">
    @Html.LabelFor(model => model.ContactId)
</div>
<div class="editor-field">
    @(Html.Kendo().TextBoxFor(model => model.ContactId)
    .Enable(false)
)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.PrimaryContact)
</div>
<div class="editor-field">
    @Html.CheckBoxFor(model => model.PrimaryContact)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.ReceivesNotifications)
</div>
<div class="editor-field">
    @Html.CheckBoxFor(model => model.ReceivesNotifications)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.FirstName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.FirstName)
    @Html.ValidationMessageFor(model => model.FirstName)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.LastName)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.LastName)
    @Html.ValidationMessageFor(model => model.LastName)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Department)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Department)
    @Html.ValidationMessageFor(model => model.Department)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Address1)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Address1)
    @Html.ValidationMessageFor(model => model.Address1)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Address2)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Address2)
    @Html.ValidationMessageFor(model => model.Address2)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.City)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.City)
    @Html.ValidationMessageFor(model => model.City)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.StateProvinceId)
</div>
<div class="editor-dropdown">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Html.Kendo().DropDownListFor(model => model.StateProvinceId)
            //.Name("StateProvince")
            .HtmlAttributes(new { @StateProvinceId = "StateProvince" })
            .Filter("startswith")
            .DataValueField("StateProvinceId")
            .DataTextField("StateAbbName")
            .BindTo((System.Collections.IEnumerable)ViewData["StateProvinces"])
    )
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Zip)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Zip)
    @Html.ValidationMessageFor(model => model.Zip)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.CountryRegionId)
</div>

<div class="editor-dropdown">
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@(Html.Kendo().DropDownListFor(model => model.CountryRegionId)
            //.Name("CountryRegion")  
            .HtmlAttributes(new { @CountryRegionId = "CountryRegion" })
            //.Filter("startswith")
            .DataValueField("CountryRegionId")
            .DataTextField("CountryCode")
            //.AutoBind(true)
            .BindTo((System.Collections.IEnumerable)ViewData["CountryRegions"])
            //.ToClientTemplate()
    )
</div>


<div class="editor-label">
    @Html.LabelFor(model => model.Phone)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Phone)
    @Html.ValidationMessageFor(model => model.Phone)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.PhoneExtension)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.PhoneExtension)
    @Html.ValidationMessageFor(model => model.PhoneExtension)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.Fax)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Fax)
    @Html.ValidationMessageFor(model => model.Fax)
    </div>

<div class="editor-label">
    @Html.LabelFor(model => model.Email)
</div>
<div class="editor-field">
    @Html.EditorFor(model => model.Email)
    @Html.ValidationMessageFor(model => model.Email)
</div>