We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
|
import { DialogComponent } from "@syncfusion/ej2-react-popups";
render() {
return (
<div className="control-pane">
<div className="control-section">
<div className="col-md-9" id="dialog-target">
.
.
<DialogComponent width="300px" target="#dialog-target" visible={false} isModal={true} ref={dialog => (this.dialogInstance = dialog)} />
</div>
</div>
</div>
);
} |
|
constructor() {
.
.
this.toolbarOptions = [
"Add",
"Edit",
{
text: "Delete",
tooltipText: "Delete",
prefixIcon: "e-delete",
id: "delete"
},
“Update”
. . . .
];
this.editSettings = {
allowEditing: true,
allowAdding: true,
allowDeleting: true . .
};
} |
|
constructor() {
.
.
// Buttons for confirmation dialog
this.buttons = [
{
buttonModel: {
content: "OK",
cssClass: "e-flat",
isPrimary: true
},
click: this.confirmationClick.bind(this)
},
{
buttonModel: {
content: "Cancel",
cssClass: "e-flat"
},
click: this.cancelClick.bind(this)
}
];
// Button for dialog when no records are selected on clicking delete
this.buttons1 = [
{
buttonModel: {
content: "OK",
cssClass: "e-flat",
isPrimary: true
},
click: () => {
// Hides the dialog
this.dialogInstance.hide();
}
}
];
}
// Ok button click function
confirmationClick(args) {
// Flag variables are used for checking which operation is being performed
if (this.isDelete) {
this.isDelete = false;
// Hides the dialog
this.dialogInstance.hide();
// Deletes the selected record
this.gridInstance.deleteRecord();
}
}
// Cancel button click function
cancelClick(args) {
this.dialogInstance.hide();
} |
|
// Grid’s toolbarClick event function
toolbarClick(args) {
// Assigning buttons to dialog instance
this.dialogInstance.buttons = this.buttons;
if (args.item.id == "delete") {
if (this.gridInstance.getSelectedRecords().length !== 0) {
this.isDelete = true;
// Updates the dialog content
this.dialogInstance.content = "Do you wish to delete the selected record?";
// Displays the dialog
this.dialogInstance.show();
} else {
// Updates the dialog content
this.dialogInstance.content = "No record selected for deletion";
// Updates the button model for this scenario
this.dialogInstance.buttons = this.buttons1;
// Displays the dialog
this.dialogInstance.show();
}
}
} |
|
// Grid’s cellSaved event function
begin(args) {
if (args.requestType === 'beginEdit') {
this.gridInstance.toolbarModule.toolbar.enableItems(2, false);
}
if (args.requestType === 'save') {
this.gridInstance.toolbarModule.toolbar.enableItems(2, true);
}} |
|
[index.js]
dataBound() {
this.gridInstance.keyConfigs["delete"] = ""; // Prevent the delete key action
}
|
