Action Buttons
The Dialog provides options for rendering action buttons and customizing their content.
To specify action buttons in the Dialog, use the <DialogActionsBar>
element.
- Example
- View Source
- Open In Stackblitz
import React from 'react';
import ReactDOM from 'react-dom';
import { Dialog, DialogActionsBar } from '@progress/kendo-react-dialogs';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
visible: true
};
this.toggleDialog = this.toggleDialog.bind(this);
this.onDeleteData = this.onDeleteData.bind(this);
}
toggleDialog() {
this.setState({
visible: !this.state.visible
});
}
onDeleteData() {
alert("Data deleted.");
this.setState({
visible: !this.state.visible
});
}
render() {
return (
<div>
<button className="k-button" onClick={this.toggleDialog}>Open Dialog</button>
{this.state.visible && <Dialog title={"Delete Data"} onClose={this.toggleDialog}>
<p style={{ margin: "25px", textAlign: "center" }}>This action cannot be undone.</p>
<DialogActionsBar>
<button className="k-button k-primary" onClick={this.toggleDialog}>Cancel</button>
<button className="k-button" onClick={this.onDeleteData}>Delete</button>
</DialogActionsBar>
</Dialog>}
</div>
);
}
}
ReactDOM.render(
<App />,
document.querySelector('my-app')
);