Delete Row does not refresh Telerik MVC Grid Solution

Have you encountered an error in Telerik’s MVC grid where when you delete an item using Ajax Databinding the grid does not refresh but the row item was actually deleted?  I came across with this issue when I was working with Telerik MVC Grid and was wondering why when I perform Ajax insert and update the Grid gets refreshed but not when I delete an item.

Say you have the view below

@(Html.Telerik().Grid<ContactViewModel>()
.Name("grdAccountContact")
.DataKeys(k => k.Add(a => a.Id))
.ToolBar(c => c.Insert())
.DataBinding(d => d.Ajax()
.Select("SelectAccountContacts", "Setup", new { accountId = Model.AccountId, accountCode = Model.AccountCode })
.Update("UpdateAccountContact", "Setup", new { accountId = Model.AccountId })
.Delete("DeleteAccountContact", "Setup", new { accountId = Model.AccountId })
.Insert("InsertAccountContact", "Setup", new { accountId = Model.AccountId }))
.Columns(columns =>
{
columns.Command(a =>
{
    a.Edit().ButtonType(GridButtonType.Image);
    a.Delete().ButtonType(GridButtonType.Image);
}).Width(80);
columns.Bound(a => a.FirstName);
columns.Bound(a => a.LastName);
columns.Bound(a => a.TelephoneNumber);
columns.Bound(a => a.MobileNumber);
columns.Bound(a => a.FaxNumber);
columns.Bound(a => a.EmailAddress);
columns.ForeignKey(a => a.ContactTypeId, Model.ContactTypes, "Id", "Name").Width(230);
columns.Bound(a => a.Id).Hidden();
})

which renders this screen

When I click delete it deletes the item in the database but the Grid remains the same, the refresh is not invoked.  I had searched a lot on the internet to find solutions but its done in a rather long way, what they do is create custom deletes in JavaScript that handles the click event of the grid refresh, other solution creates custom attributes to Ignore Model Errors.  All of it contains long piece of codes, do I really need to add all of those lines?  If you try to understand the whole situation this can be solved in one line of code.

Ok lets further dig whats really happens on delete, when the delete button is clicked it calls my Action and in this sample it is “DeleteAccountContact”, if you check at the model that is being returned to the action you will see that it is not complete like how you passed it in selecting the items for the list (“SelectAccountContacts”).

This means one thing, it will throw an invalid ModelState, and by design of the TelerikGrid if there are ModelState Errors the grid will not rebind (why don’t telerik just ignore ModelState Errors on delete, you not need to verify a model on delete anyways).  Just look at the response it’s getting from firebug to verify this statement.

if you have validation rules then it will throw a silent exception because the Model is incomplete when it is passed to the Action on the first place.   So to prevent that and make the grid happy than all you need is to ignore the errors by calling ModelState.Clear(); like the code below

[AcceptVerbs(HttpVerbs.Post)]
[GridAction]
public ActionResult DeleteAccountContact(ContactViewModel accountContact, int? accountId)
{
    ModelState.Clear();
    accountTasks.DeleteAccountContact(accountContact);
    var viewModel = accountSetupQuery.GetAccountContacts(accountId.Value);

    return View(new GridModel<IContactDto>(viewModel));
}

I hoped this will help someone.