Articles in this section
Category / Section

How to add custom Buttons in dialog editing

1 min read

How to add “Custom buttons in edit dialog instead of save and cancel button”

Please follow the below steps to add custom buttons in edit dialog by removing existing buttons at Onload event.

  1. Remove the existing Save and cancel button from edit dialog.

$("#GenericListGridsfEditButtons").children().remove(); //here GenericListGrid is Grid ID

  1. Append the custom buttons to edit dialog with necessary styles

$("#GenericListGridsfEditButtons").append("Add your custom button here");

  1. Perform your required action by binding required event to custom buttons.







     .ClientSideEvents(events => events.OnLoad("actionLoad")) // client

               Side Onload event initialized









   function actionLoad(sender) {


   $("#GenericListGridsfEditButtons").append("<button type='Button'

        style='height: 30px; width: 85px;' name='SaveandClose'

        id='GenericListGridEditSaveandClose' class='sf-

      button Metro background' onClick='actionClick(event)'>Save &

        Close</button> &nbsp &nbsp <button type='Button' style='height: 30px;

        width: 75px;' name='SaveandAdd' id='GenericListGridEditSaveandAdd'

        class='sf-button Metro background' onClick='actionClick(event)'>

        Save & Add</button>");



  function actionClick(e) {

    var gridobj=$find("GenericListGrid");

     if ( == "Save & Close")

        gridobj.sendSaveRequest(); // Bind any events here

     else {












The sample output is shown below,



Did you find this information helpful?
Help us improve this page
Please provide feedback or comments
Please sign in to leave a comment