How can I access items on PopUp Edit window on Kendo grid? - asp.net

Question

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 populate these dropdown on Popup edit mode and disable some fields?
#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

You have to pass the values of your foreign key as ViewData and use the ViewData in your editor template.
#{
Html.Kendo().Grid(Model.Contacts)
.Editable(e => e.AdditionalViewData(new
{
Accounts = Model.Accounts
})
// ...
.Render();
}

Answer 2

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>