Programmatically Trigger Destroy Action

[Jesse]

I'm using the Grid with ServerOperation disabled and PopUp editing. I wanted to use bootstrap style edit and delete buttons and a custom delete confirmation message, so I added a Template column with a ClientTemplate containing the buttons. The buttons have an onclick pointing at my javascript functions. The edit button is working successfully and calling the server action, but the delete button does not hit the server action. I've verified through Chrome Developer Tools that my javascript is being hit and it does execute the grid.removeRow(item); line without any errors, but after that nothing happens. The row remains in the grid and the delete action isn't hit (or called as far as I can tell from the Network tab.) What am I missing? 

 

    @(Html.Kendo().Grid<BirthdayAddOnEditVM>(Model.ViewModel.AddOns)
      .Name(Html.NameFor(m => m.ViewModel.AddOns).ToString())
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => { model.Id(p => p.ID); model.Field(p => p.ID).DefaultValue(Guid.Empty); })
          .PageSize(4)
          .ServerOperation(false)
          //.Read(read => read.Action("BirthdayItems_Read", "Birthdays"))
          .Create(create => create.Action("BirthdayItems_Save", "Birthdays"))
          .Update(update => update.Action("BirthdayItems_Save", "Birthdays"))
          .Destroy(destroy => destroy.Action("BirthdayItems_Delete", "Birthdays").Type(HttpVerbs.Post))
          .Events(events => events.Error("function(e){ gridError(e, '" + Html.IdFor(m => m.ViewModel.AddOns) + "'); }" ))
      )
      .Columns(columns =>
      {
          columns.Bound(c => c.Name).Title("Add-On");
          columns.Bound(c => c.Price).Format("{0:C}");
          columns.Bound(c => c.PublishOnWebsite).ClientTemplate("<input type=\"checkbox\" disabled #: (PublishOnWebsite ? 'checked' : '')# />");
          columns.Bound(c => c.AllowForOnlinePurchase).ClientTemplate("<input type=\"checkbox\" disabled #: (AllowForOnlinePurchase ? 'checked' : '')# />");
          columns.Command(command => { command.Edit().Text(""); command.Destroy(); }).Width(180);
          columns.Template(t => { }).HeaderTemplate("").ClientTemplate(@"
                            <button type='button' onclick='editGridRow(this)' class='btn btn-primary btn-xs'><span class='glyphicon glyphicon-pencil' title='Edit'></span></button>
                            <button type='button' onclick='deleteGridRow(this)' class='btn btn-danger btn-xs'><span class='glyphicon glyphicon-remove' title='Delete'></span></button>");
      })
      .ToolBar(toolbar =>
      {
          toolbar.Template(@<text>
                            <span class="col-sm">Add-Ons</span>
                            <span><button type="button" class="btn btn-primary btn-xs" onclick="createGridRow(this)" title="Add New"><span class="glyphicon glyphicon-plus"></span></button></span>
                    </text>);
                })
      .Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))
      .Pageable()
      .Selectable(selectable =>
                  {
                      selectable.Mode(GridSelectionMode.Multiple);
                      selectable.Type(GridSelectionType.Row);
                  })
      .Sortable(sortable =>
                  {
                      sortable.SortMode(GridSortMode.SingleColumn);
                  })
      //.ColumnMenu()
      //.Navigatable()
      //.Filterable()
      //.Scrollable()
      .Deferred()
)

 

function editGridRow(elem) {
    var $elem = $(elem);
    var grid = $elem.closest("div[data-role='grid']").data("kendoGrid");
    var item = grid.dataItem($elem.closest("tr"))

    grid.editRow(item);
}

function deleteGridRow(elem){
    var $elem = $(elem);
    var grid = $elem.closest("div[data-role='grid']").data("kendoGrid");
    var item = grid.dataItem($elem.closest("tr"))

    if (confirm("Are you sure you want to delete " + item.Name + "?") === true)
        grid.removeRow(item);    //This gets hit
}

 public class BirthdaysController : Controller
{
    [HttpPost]
    public ActionResult BirthdayItems_Delete([DataSourceRequest]DataSourceRequest request, BirthdayAddOnEditVM birthdayItem)
    {
        //Never called
        ...
    }
}

 

As you may have noticed, I added the default edit and delete command buttons back in for testing. That delete button does call sever delete action. So I feel like grid.removeRow is not the right thing to use in my function, but that's what I've seen in all the examples. 

[Alex Hajigeorgieva]

Hello, Jesse,

Thank you very much for the code snippet and elaborate explanation of your scenario.

To get this code working, you do need the Kendo UI Grid removeRow() method, but it expects the row as a parameter. So if you modify it like below, it should start working:

grid.removeRow($elem.closest("tr"));

Should you face any further difficulties, please feel free to get back to us.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Jesse]

Ahh, great! Thank you, as well, for the code snippet.