Custom Cancel Button in Row

5 posts, 1 answers
  1. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 29 May Link to this post

    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

  2. Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 30 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Reid
    Reid avatar
    317 posts
    Member since:
    Oct 2008

    Posted 30 May in reply to Venelin Link to this post

    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.

     

     

  5. Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 30 May in reply to Reid Link to this post

    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.
  6. Answer
    Venelin
    Admin
    Venelin avatar
    352 posts

    Posted 01 Jun Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready