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>