所以经过一些研究，我发现自定义Kendo PopUp编辑器的***方法是创建一个自定义编辑器模板并将其放在你的〜Views / Shared / EditorTemplates文件夹中。一旦你在主网格cshtml上提供模板的名称，就像这样：

。可编辑（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   = 编辑标签 >  
 @ Html.LabelFor（model => model.PrimaryContact） 
<   / div  >  
<   div     class   =  editor-field >  
 @ Html.CheckBoxFor（model => model.PrimaryContact）
<   / div   >  

<   div     class   = 编辑标签 >  
 @ 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   = 编辑标签 >  
 @ Html.LabelFor（model =&gt ; model.LastName）
<   / div   >  
<   div     class   =  editor-field  >  
 @ Html.EditorFor（model => model.LastName）
 @ Html.ValidationMessageFor（model => model.LastName）
<   / div   >  

<   div     class   = 编辑标签 >  
 @ Html.LabelFor（model => m odel.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   = 编辑字段 >  
 @ Html.EditorFor（model =&g吨; model.Address1）
 @ Html.ValidationMessageFor（model => model.Address1）
<   / div  >  

<   div     class   =  editor-label >  
 @ Html.LabelFor（ model => model.Address2）
<   / div  >  
<   div     class   = 编辑字段 >  
 @ Html.EditorFor（model => m odel.Address2）
 @ Html.ValidationMessageFor（model => model.Address2）
<   / div   >  

<   div     class   = 编辑标签 >  
 @ Html.LabelFor（model => model.City）
<   / div  >  
<   div     class   =  editor-field >  
 @ Html.EditorFor（model => model.City）
 @ Html.ValidationMessageFor（model => model.Cit y）
<   / div  >  

<   div     class   =  editor-标签 >  
 @ Html.LabelFor（model => model.StateProvinceId）
<   / div   >  
<   div     class   =  editor-dropdown  >  
 @（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  &gt ;  

<   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   = 编辑标签 >  
 @ Html.LabelFor（model => model.CountryReg ionId）
<   / div  >  

<   div     class   =  editor-下拉列表 >  
 @（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 = &GT; model.Phone）
 @ Html.ValidationMessageFor（model => model.Phone）
<   / div  >  

<   div     class   =  editor-label >  
 @ Html.LabelFor（ model => model.PhoneExtension）
<   / div  >  
<   div     class   = 编辑字段 >  
 @ Html.EditorFor（model => m odel.PhoneExtension）
 @ Html.ValidationMessageFor（model => model.PhoneExtension）
<   / div   >  

<   div     class   = 编辑标签 >  
 @ Html.LabelFor（model => model.Fax）
<   / div  >  
<   div     class   =  editor-field >  
 @ Html.EditorFor（model => model.Fax）
 @ Html.ValidationMessageFor（model => model .Fax）
<   / div  &gt ;  

<   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   &GT; 跨度> 

I've a Contact page, where a user can maintain it. Using Kendo grid, I listed the contact on my initial grid with only few columns. When the user clicks edit button, a PopUp comes up so edit/delete can be performed. However, the contact table has 3 foreign keys (AccountId, StateProvinceId, CountryRegionId) that show up as dropdown list on the main grid but not on the PopUp window. How can I do this?

Below is the cshtml code..

@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>);
            })
                )
    )
    

</div>

So after doing some research, I found out the best way to customize the Kendo PopUp Editor is creating a custom editor template and place it on you ~Views/Shared/EditorTemplates folder. Once you provide the name of the template on you main grid cshtml like this:

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

Once I figured that out, there was another issue with the dropdownlist not showing the value from the table but it was populating ok. This took some time to figure out since there's not a lot of documentation on Kendo. The workaround for this was removing the .Name("ColumnName") property with

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

Here's the full code for _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">
            @(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">
            @(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>