Reputation: 36
I'm having an issue with the Kendo Grid using a template add/edit. The object (ContactEmail) in the post for add/edit is null and I'm unable to figure out why, ContactID has a value. I've looked at responses to similar issues on KendoUI Forums & here but haven't found any that fix my issue.
Even without the template it doesn't work, so it appears to not be an issue with my custom template. There is also no validation so I don't understand why it wouldn't be going through. The Email is basically just a copy of the Phone, just changed to use the Email object.
I have 2 Kendo Grids on my View, which below is a snippet of them. Only the Email is having issues:
@model DORIS.POCO.Contact
<div id="phones">
<h4>Phones</h4>
<div id="phoneGrid" style="width:500px">
@(Html.Kendo().Grid<DORIS.POCO.ContactPhone>()
.Name("kendoContactPhones")
.Columns(columns =>
{
columns.Bound(m => m.Number).Title("Phone").ClientTemplate("#= getFormattedPhone(Number) #");
columns.Bound(m => m.Category).Title("Type");
columns.Bound(m => m.DescriptionOf).Title("Description");
columns.Bound(m => m.PrimaryPhone).Title("Primary").ClientTemplate("<input type='checkbox' disabled='true' #= PrimaryPhone ? checked='checked' :'' # />");
})
.Sortable()
.Selectable(s => s
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row)
)
.DataSource(d => d
.Ajax()
.Model(model => model.Id(m => m.PhoneID))
.Read(read => read.Action("GetContactPhones", "ContactPhones", new{ id = Model.ContactID }))
.Create(create => create.Action("KendoPhoneAdd", "ContactPhones", new{ id = Model.ContactID }))
.Update(update => update.Action("KendoPhoneEdit", "ContactPhones"))
.Destroy(destroy => destroy.Action("KendoPhoneDelete", "ContactPhones"))
.Sort(s => s.Add(m => m.PrimaryPhone).Descending())
)
.AutoBind(true)
.ToolBar(toolBar => toolBar.Template("<a id='addPhone' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-add'></span>Add</a><a id='editPhone' class='k-button k-button-icontext k-grid-edit'><span class='k-icon k-edit'></span>Edit</a><a id='deletePhone' class='k-button k-button-icontext k-grid-delete'><span class='k-icon k-delete'></span>Delete</a>"))
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ContactPhone").Window(w => w.Title("Manage Phone")))
.Events(e => e.DataBound("toggleBacktoTopButton"))
)
</div>
</div>
<div id="emails>">
<h4>Email</h4>
<div id="emailGrid" style="width:500px">
@(Html.Kendo().Grid<DORIS.POCO.ContactEmail>()
.Name("kendoContactEmails")
.Columns(columns =>
{
columns.Bound(m => m.Email).Title("Email");
columns.Bound(m => m.DescriptionOf).Title("Description");
columns.Bound(m => m.PrimaryEmail).Title("Primary").ClientTemplate("<input type='checkbox' disabled='true' #= PrimaryEmail ? checked='checked' :'' # />");
})
.Sortable()
.Selectable(s => s
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row)
)
.DataSource(d => d
.Ajax()
.Model(model => model.Id(m => m.EmailID))
.Read(read => read.Action("GetContactEmails", "ContactEmails", new{ id = Model.ContactID }))
.Create(create => create.Action("KendoEmailAdd", "ContactEmails", new{ id = Model.ContactID }))
.Update(update => update.Action("KendoEmailEdit", "ContactEmails"))
.Destroy(destroy => destroy.Action("KendoEmailDelete", "ContactEmails"))
.Sort(s => s.Add(m => m.PrimaryEmail).Descending())
)
.AutoBind(true)
.ToolBar(toolBar => toolBar.Template("<a id='addEmail' class='k-button k-button-icontext k-grid-add'><span class='k-icon k-add'></span>Add</a><a id='editEmail' class='k-button k-button-icontext k-grid-edit'><span class='k-icon k-edit'></span>Edit</a><a id='deleteEmail' class='k-button k-button-icontext k-grid-delete'><span class='k-icon k-delete'></span>Delete</a>"))
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("ContactEmail").Window(w => w.Title("Manage Email")))
.Events(e => e.DataBound("toggleBacktoTopButton"))
)
</div>
Below is the code for my ContactEmailsController, the Add Post method only:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult KendoEmailAdd([DataSourceRequest] DataSourceRequest request, ContactEmail email, int id)
{
if (email != null)
{
ContactEmail newEmail = new ContactEmail();
newEmail.DescriptionOf = email.DescriptionOf;
newEmail.Email = email.Email;
newEmail.EntityID = id;
newEmail.PrimaryEmail = email.PrimaryEmail;
db.ContactEmails.Add(newEmail);
db.SaveChanges();
}
return Json(new[] { email }.ToDataSourceResult(request, ModelState));
}
This is my ContactEmail Class:
public partial class ContactEmail
{
public int EmailID { get; set; }
public int EntityID { get; set; }
public string Email { get; set; }
public string DescriptionOf { get; set; }
public bool PrimaryEmail { get; set; }
public virtual Contact Contact { get; set; }
}
And finally, this is my editor template for ContactEmail:
@model DORIS.POCO.ContactEmail
@Html.HiddenFor(m => m.EmailID)
@Html.HiddenFor(m => m.EntityID)
<div class="editor-label">
@Html.LabelFor(m => m.Email)
</div>
<div class="editor-field">
@Html.EditorFor(m => m.Email )
@Html.ValidationMessageFor(m => m.Email)
</div>
<div class="editor-label">
@Html.Label("Description")
</div>
<div class="editor-field">
@Html.EditorFor(m => m.DescriptionOf)
@Html.ValidationMessageFor(m => m.DescriptionOf)
</div>
<div class="editor-label">
@Html.Label("Primary Email")
</div>
<div class="editor-field">
@Html.CheckBoxFor(m => m.PrimaryEmail)
@Html.ValidationMessageFor(m => m.PrimaryEmail)
</div>
I've been looking at this for quite a while including searching the internet for solutions. Maybe I'm looking too hard and the answer is super simple.
I believe I have included all the code related to this issue, however if you think I missed something let me know and I'll add it.
Thanks! Any assistance is much appreciated!
Upvotes: 0
Views: 5433
Reputation: 36
Turns out it was an issue with the naming of my variable in the controller. I changed the Post to:
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult KendoEmailAdd([DataSourceRequest] DataSourceRequest request, ContactEmail newEmail, int id)
{
if (newEmail != null)
{
ContactEmail email = new ContactEmail();
email.DescriptionOf = newEmail.DescriptionOf;
email.Email = newEmail.Email;
email.EntityID = id;
email.PrimaryEmail = newEmail.PrimaryEmail;
db.ContactEmails.Add(email);
db.SaveChanges();
}
return Json(new[] { newEmail }.ToDataSourceResult(request, ModelState));
}
Since my ContactEmail object has a property named "Email" it was conflicting with my variable named "email".
Upvotes: 1
Reputation: 30671
You can check this code library project which implements a custom popup editor: http://www.kendoui.com/code-library/mvc/grid/custom-popup-editor.aspx
Upvotes: 0