telerik mvc grid with ajax binding

Question

I have the following problem: I have a custom edit command for the telerik mvc grid. This is the code of the grid:

Html.Telerik().Grid<Customer>("customers")
                       .Name("Grid")
                       .DataKeys(k => k.Add(o => o.Id))
                       .DataBinding(dataBinding => dataBinding.Ajax().Delete("Delete", "Customer").Select("AjaxIndex", "Customer"))
                       .Scrollable(builder => builder.Height(350))
                       .Filterable()
                       .Sortable(s => s.OrderBy(order => order.Add(o => o.Id).Descending()))
                       .Columns(c =>
                                 {
                                     c.Bound(o => o.Id);
                                     c.Bound(o => o.FirstName);
                                     c.Command(s =>
                                                   {
                                                       s.Custom("editCustomer")
                                                           .Text("Edit")
                                                           .Ajax(true)
                                                           .Action("Edit", "Customer");
                                                            s.Delete().ButtonType(GridButtonType.Image);                                                                                                                }).Width(175);
                                 })
               .ClientEvents(builder => builder.OnComplete("onEditComplete"))
                   .Pageable(p => p.PageSize(5))
                   .Selectable()
                   .Render();

This is the call back javascript function of the edit command:

function onAppraisalPhaseComplete(e)
{
    if (e.name == "editCustomer") {
        $("#dialog-form").html(e.response.PartialViewHtml);
        open($("#dialog-form"), "Edit Customer"); // this will display a modal with the edit view
    }
}

The edit form is an ajax call to the following method:

    public ActionResult JsonEdit(Customer customer)
    {
        if ((Rules.GetBrokenRules(customer).Count == 0))// there is no validation errors
        {
            Repository.Update(customer);
        }
        else
        {
            ModelState.AddModelErrors(Rules.GetBrokenRules(customer));
            return Json(new
            {
                Success = false,
                PartialViewHtml = RenderPartialViewToString("Insert", appraisalPhaseViewModel)
            });
        }
//if save successful get the customers list and return the partial of the grid in Json
        var customers= Repository.GetAll().ToList();
        ViewData["customers"] = customers;

        return Json(new
        {
            Success = true,
            PartialViewHtml = RenderPartialViewToString("MasterGrid")
        });

The ajax call on complete is the following:

 function JsonSave_OnComplete(context) {
        var jsonEdit = context.get_response().get_object();
        if (jsonEdit.Success) { // if the operation is successful reload grid and close the modal dialog
            $("#MasterGridDiv").html(jsonEdit.PartialViewHtml);
            CloseDialog($('#dialog-form'));
        } else { //Redisplay the edit partial view in the modal
            $("#dialog-form").html(jsonEdit.PartialViewHtml);
        }
    }

After the edit operation is finished if I try to press the delete button it will call the JsonEdit Action instead of delete operation. I don't know what am I doing wrong here? In addition, sometimes the delete button doesn't work and the ajax binding is called instead of the delete button.

Answer 1

You did not provide complete javascript handlers for the buttons, just the callbacks. I should assume that you've done it right. However, there is an obvious problem with your code. You're trying manually rebind telerik grid by by injecting html from a sever side rendered view. That could cause your client event model to beehive unpredictably. Instead of :

$("#MasterGridDiv").html(jsonEdit.PartialViewHtml);

Try to use:

 $("#Grid").data("tGrid").rebind();