The predefined dialogs supports dragging within its target container by grabbing the dialog header, which allows the user to reposition the dialog dynamically by using isDraggable
property.
[Class-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
buttonClick() {
DialogUtility.alert({
title: 'Low Battery',
width: '250px',
content: '10% of battery remaining',
isDraggable: true
});
}
render() {
return (<div className="App" id='dialog-target'>
<ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
</div>);
}
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
this.state = { };
}
public buttonClick() {
DialogUtility.alert({
title: 'Low Battery',
width: '250px',
content: '10% of battery remaining',
isDraggable : true
});
}
public render() {
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="alertBtn" cssClass="e-danger" onClick={this.buttonClick.bind(this)}>Alert</ButtonComponent>
</div>);
}
}
export default App;
[Functional-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.alert({
title: 'Low Battery',
width: '250px',
content: '10% of battery remaining',
isDraggable: true
});
}
return (<div className="App" id='dialog-target'>
<ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
</div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.alert({
title: 'Low Battery',
width: '250px',
content: '10% of battery remaining',
isDraggable : true
});
}
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
</div>
);
}
export default App;
[Class-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
buttonClick() {
DialogUtility.confirm({
title: 'Delete Multiple Items',
content: 'Are you sure you want to permanently delete these items?',
width: '300px',
isDraggable: true
});
}
render() {
return (<div className="App" id='dialog-target'>
<ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
</div>);
}
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
this.state = { };
}
public buttonClick() {
DialogUtility.confirm({
title: 'Delete Multiple Items',
content: 'Are you sure you want to permanently delete these items?',
width: '300px',
isDraggable : true
});
}
public render() {
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="confirmBtn" cssClass="e-success" onClick={this.buttonClick.bind(this)}>Confirm</ButtonComponent>
</div>);
}
}
export default App;
[functional-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.confirm({
title: 'Delete Multiple Items',
content: 'Are you sure you want to permanently delete these items?',
width: '300px',
isDraggable: true
});
}
return (<div className="App" id='dialog-target'>
<ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
</div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.confirm({
title: 'Delete Multiple Items',
content: 'Are you sure you want to permanently delete these items?',
width: '300px',
isDraggable : true
});
}
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
</div>
);
}
export default App;
[Class-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
buttonClick() {
DialogUtility.confirm({
title: 'Join Chat Group',
width: '300px',
content: '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
isDraggable: true
});
}
render() {
return (<div className="App" id='dialog-target'>
<ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
</div>);
}
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
this.state = { };
}
public buttonClick() {
DialogUtility.confirm({
title: 'Join Chat Group',
width: '300px',
content:'<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
isDraggable : true
});
}
public render() {
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
</div>);
}
}
export default App;
[Functional-component]
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.confirm({
title: 'Join Chat Group',
width: '300px',
content: '<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
isDraggable: true
});
}
return (<div className="App" id='dialog-target'>
<ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
</div>);
}
export default App;
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { DialogUtility } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
function buttonClick() {
DialogUtility.confirm({
title: 'Join Chat Group',
width: '300px',
content:'<p>Enter your name:</p> <input type="text" name="Required" class="e-input" placeholder="Type here.." />',
isDraggable : true
});
}
return (
<div className="App" id='dialog-target'>
<ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
</div>
);
}
export default App;