Programmatically Trigger Destroy Action

3 posts, 1 answers
  1. Jesse
    Jesse avatar
    24 posts
    Member since:
    Aug 2013

    Posted 01 Nov Link to this post

    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. 

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    318 posts

    Posted 03 Nov Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jesse
    Jesse avatar
    24 posts
    Member since:
    Aug 2013

    Posted 07 Nov Link to this post

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