How to add custom Buttons in dialog editing
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.
- Remove the existing Save and cancel button from edit dialog.
$("#GenericListGridsfEditButtons").children().remove(); //here GenericListGrid is Grid ID
- Append the custom buttons to edit dialog with necessary styles
$("#GenericListGridsfEditButtons").append("Add your custom button here");
- Perform your required action by binding required event to custom buttons.
[CSHTML]
@(Html.Syncfusion().Grid<Student>("GenericListGrid")
...
.ClientSideEvents(events => events.OnLoad("actionLoad")) // client Side Onload event initialized
...
)
|
[SCRIPT]
function actionLoad(sender) { $("#GenericListGridsfEditButtons").children().remove(); $("#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>     <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 (e.target.textContent == "Save & Close") gridobj.sendSaveRequest(); // Bind any events here else { gridobj.sendSaveRequest(); gridobj.sendAddNewRequest(); } }
|
The sample output is shown below,
Fig
