GridEditMode.InCell - Destroy Button Not Working

[Joe]

Hi,
I'm trying to use InCell editing with Ajax enabled and a Delete/Destroy button.

@(Html.Kendo().Grid<BreezeU.DAL.UserFile>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.Id).Title("Id").Visible(false);
            columns.Bound(p => p.Title).Title("Name");
            columns.Bound(p => p.LastUpdatedOn).Title("ModifiedDate").Format("{0:MM/dd/yyyy}").Width(140);
            columns.Command(commands =>
            {
                commands.Destroy(); // The "destroy" command removes data items
            }).Width(120);
        })
        .Events(ev => ev.Save(@"function(e){setTimeout(function(){$('#Grid').data('kendoGrid').dataSource.sync()})}"))
        .Editable(editable => editable.Mode(GridEditMode.InCell)) // Use inline editing mode
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model =>
            {
                model.Id(p => p.Id); // Specify the property which is the unique identifier of the model
                model.Field(p => p.Id).Editable(false); // Make the Id property not editable
                model.Field(p => p.LastUpdatedOn).Editable(false); // Make the date property not editable
            })
            .PageSize(20)
            .ServerOperation(false)
            .Read(read => read.Action("read", "files").Data("getAntiForgery")) // Set the action method which will return the data in JSON format
            .Update(update => update.Action("update", "files").Data("getAntiForgery"))  // Action invoked when the user saves an updated data item
            .Destroy(destroy => destroy.Action("delete", "files").Data("getAntiForgery")) // Action invoked when the user removes a data item
        )
        .Pageable() // Enable paging
        .Sortable() // Enable sorting
        )

Everything in the above code works great except when I click the Delete button. Nothing happens and no call is sent to the sever. 
However, if I simply change it to GridEditMode.InLine then the Delete button works. 

Also, I noticed that when using InCell editing, if I include a Save button in the toolbar, the Destroy operation can be triggered by clicking Save. But this is not the behavior I would like.

Is there anyway to have the Delete button call the destroy method when InCell editing is enabled?

Thanks

[Nikolay Rusev]

Hello Joe,

When using in-cell edit mode any create/update/delete operation is not committed (synced) with server until DataSource.sync() method is called. This method is usually executed by the `Save changes` button in Grid toolbar as in the demo: Batch editing.

Regards,
Nikolay Rusev
Telerik

 

 

[Joe]

Thanks Nikolay,
I added the "Remove" event and call DataSource.sync() and it works fine now...

My updated Events look like this...

.Events(ev => ev
    .Save(@"function(e){setTimeout(function(){$('#FilesGrid').data('kendoGrid').dataSource.sync()})}")
    .Remove(@"function(e){setTimeout(function(){$('#FilesGrid').data('kendoGrid').dataSource.sync()})}")
)

[Patrick]

I have a grid with a column defined as

columns.Command(command => { command.Destroy().Text(" "); }).Width(50);

and  the destroy defined as 

.Destroy(destroy => destroy.Action("DeleteCompanyRestriction", "SupplierMaintenance").Data("fnGetSelectedItemandVendorIDs")) 
   
The confirmation alert pops but then nothing happens.  How do I troubleshoot this.

Thanks

 

[Nikolay Rusev]

Hello Patrick,

We are not sure what is the cause of this behavior. Your question doesn't seem to be related to the original topic in this thread, so could you please open a separate support ticket/ forum post. It also will be easier for us to track different cases.

Regards,
Nikolay Rusev
Telerik