How to add only a "cancel changes" button with incell editing and external save for detail grid

[SK]

If a user adds a row but then wants to cancel it, I am trying to figure out how to add this functionality. The "cancel changes" button built into kendo is tied to toolbar.Save() which I am not using (we are saving changes in batch with a custom button).

@(Html.Kendo().Grid<x.Models.xModel>()
                                     .Name("xGrid_#=PONum#_#=lineNum#") 
                                      .Columns(columns =>
                                      {
                                          columns.Bound(p => p.comment).Title("Comment").Width(50).HtmlAttributes(new { @maxlength = "1000"});
                                          columns.Bound(p => p.updatedBy).Title("Updated By").Width(15).Editable("readOnlyCol");
                                          columns.Bound(p => p.lastUpdated).Title("Last Updated").Width(15).Format("{0:MM/dd/yyyy}").Editable("readOnlyCol");
                                      })
                                      .ToolBar(toolbar => {
                                          toolbar.Create();
                                      })
                                      .Editable(editable => editable.Mode(GridEditMode.InCell))
                                      .Selectable(selectable => selectable
                                        .Mode(GridSelectionMode.Single))
                                      .Events(ev => ev.Change("onChange"))
                                      .DataSource(dataSource => dataSource
                                        .Ajax()
                                        .Read(read => read.Action("GetX", "X", new { LineNbr = "#=lineNum#", purchaseOrderNbr = "#=PONum#" }).Data("GetFacilityCode"))
                                        .Sort(sort => sort.Add("lastUpdated").Descending())
                                        .PageSize(10)
                                        )
                                        .Sortable()
                                        .Pageable()
                                        .Width(500)
                                        .ToClientTemplate())

[SK]

If there is a way to add "cancel changes" and hide "save changes" when using toolbar.Save(), I would be OK with that too. 

[Stoyan]

Hi Sabri,

Thank you for sharing your code.

Please note that, if you are using a custom button to ensure that changes are saved in batches the same functionality can be achieved with the DataSource's Batch configuration property:

.DataSource(dataSource => dataSource
    .Ajax()
    .Batch(true)
  ...
)

Alternatively, you can set the CSS styles of the anchor tag with class k-grid-save-changes to display:none. This will remove the Save changes button.

    .k-grid-save-changes{
        display:none;
    }

In addition, to enable canceling the addition of a single row from a batch of newly added rows the columns.command configuration button can be used. It will add a column with a designated Delete button:

 columns.Command(command =>
        {
            command.Destroy();
        });

I hope the information above is useful. Please let me know, if further questions arise.

 

 

Regards,
Stoyan
Progress Telerik

[SK]

Stoyan, I did end up doing something similar and it worked. I came onto the project after the save feature was implemented so I was working with what I had. Thanks you.