Custom Cancel Button in Row

[Reid]

Is there a way to have a Custom Command Button that is only visible when the user is editing a cell and becomes invisible when the editing is complete?  And if so, when clicked resets the row to it's original values.  Right now if the model annotations specifies [required] for a field, if the user starts to edit that column then changes there mind they still have to enter a valid value there. 

I ask this because using the default Edit Inline mode the Update button when clicked hits the controller and resets the dirty flag on the records so the red indicators go away.  We want to have a custom master "Save" button that does a master save of all rows at once.

So basically a way to use the default Edit, Update, Cancel mechanism built into Kendo that just leaves the red indicators and dirty flags when the user clicks the update button and also snaps the row out of edit mode.  In this respect we would not need a custom "cancel" button.

Any suggestions would be welcome.

 

Thanks

[Venelin]

Hello Reid,

Please refer to this demo and see if it fits your requirement: http://demos.telerik.com/kendo-ui/grid/editing. It provides master Save and Cancel buttons so it should work.

Regards,
Venelin
Telerik

[Reid]

Thanks for the response.

 

The example you suggest uses a toolbar on the grid.  The specs for the UI I am dealing with has a custom toolbar on top of the form with a "Save" button.  So this will not work.

 

 

[Stephen]

You can use your own ToolBar and button and just call grid.dataSource.sync() in the button handler instead of using the built-in toolbar and save command.

[Venelin]

Hi Reid,

A general outline of a possible implementation is shown below:

1. Create your custom toolbar with the buttons you would like to have. Make the custom Cancel button initially invisible.

2. In the Grid, you can either create a template column to hold the Edit button for the specific record or use Edit command column but hide with CSS the Update and Cancel (as far as I understood these buttons will be placed in the custom toolbar instead). Whichever you choose attach a handler to the Edit button, in which you execute logic to show the Cancel button in the toolbar.

3. Obviously you have to re-hide the Cancel button when it is clicked or when Update is clicked (or any other event you like, depends on the UX).

4. Attach a handler to the Cancel button and cancel the row being edited with cancelRow method:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-cancelRow.

5. You can do the bulk update using saveChanges method:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-saveChanges

Regards,
Venelin
Telerik