Telerik MVC Grid Ajax delete action

Question

I have a grid where I want to be able to delete rows without having to return a new result set from the controller action.

This in in my view:

@(Html.Telerik().Grid<InterestTopicViewModel>()
          .Name("Grid")
          .DataKeys(keys => keys.Add(x => x.Id))
          .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.Image).ImageHtmlAttributes(new {style="margin-left:0"}))
          .DataBinding(dataBinding => dataBinding.Ajax()
                                         .Select("Select", "InterestTopic")
                                         .Insert("Insert", "InterestTopic")
                                         .Update("Update", "InterestTopic")
                                         .Delete("Delete", "InterestTopic"))
          .Columns(columns =>
                      {
                         columns.Bound(x => x.Name);
                         columns.Command(commands =>
                                            {
                                               commands.Edit().ButtonType(GridButtonType.Image);
                                               commands.Delete().ButtonType(GridButtonType.Image);
                                            }).Title("Actions");
                      })
          .Editable(editing => editing.Mode(GridEditMode.InLine))
        )

And here is in my controller:

  [AcceptVerbs(HttpVerbs.Post)]
  [GridAction]
  public ActionResult Delete(int id)
  {
     InterestTopicViewModel interestTopicViewModel = this.InterestTopicPresenter.GetInterestTopic(id);

     if (this.InterestTopicPresenter.DeleteInterestTopic(id))
        base.LogUserAction(UserActionLoggingType.DeleteInterest, interestTopicViewModel.Name);

     return this.View(new GridModel(this.InterestTopicPresenter.GetList()));
  }

As you can see, in my controller, I must return at the end of the function the entire list in a GridModel object. If I don't do that, the view will not be refreshes.

Is it possible just delete the record with the help of the controller and let Telerik deleting the div of the corresponding row in javascript?

Thank you.

hawkke · Accepted Answer · 2012-07-25 16:26:36Z

3

If you're not afraid of javascript and jQuery, it isn't too difficult. Rather than using the grid command columns and bindings, I usually just wire it up myself with a template, like such (using Razor syntax):

.Columns(columns =>
{
    columns.Bound(x => x.Name);
    columns.Template
    (
        @<text>
            <a href="#" onclick="delete(this, @item.Id);">Delete</a>
        </text>
    );
})

item is a field that Telerik provides in column template bindings that is typed to your model. Your delete function doesn't need to return the data. You can just do something like:

[AcceptVerbs(HttpVerbs.Post)] 
public ActionResult Delete(int id)
{
    // call your code to delete the item here
    return Json(new { resultCode = "success" });
}

Then create a javascript function to POST to your delete function.

function delete(sender, id)
{
    $.ajax({
        type: "POST", // important, only perform deletes on a post
        url: '/delete',
        data: { id: id },
        success: function (result)
        {
            if (result.resultCode == "success")
            {
                var row = $(sender).closest("tr");
                row.remove();
            }
        }
    });
}

Something like that. I don't know the exact syntax, but hopefully this is enough to get you started.

edited Jul 25, 2012 at 16:26

answered Jul 25, 2012 at 16:19

hawkke

4,2821 gold badge30 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samuel Over a year ago

This is a very nice solution. There is only one problem; I have a lot of grids in my project and if I need to implement a solution like that, I will do a lot of code just for this feature. In critial places, I will surely do that but for the rest, I prefer having a solution that is already implemented in the Telerik framework is possible.

Collectives™ on Stack Overflow

Telerik MVC Grid Ajax delete action

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related