Search results

Position in React Predefined Dialogs component

31 Jan 2023 / 3 minutes to read

Customize the dialog position by using the position property. The position can be represented with specific X and Y values.

  • The PositionDataModel.X can be configured with a left, center, right, or offset value. By default, the value is set as center.
  • The PositionDataModel.Y can be configured with a top, center, bottom, or offset value. By default, the value is set as center.

Alert position

[Class-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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',
            position: { X: 'center', Y: 'center' }
        });
    }
    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;
Copied to clipboard
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',
    position: { X: 'center', Y: 'center' }
});
}
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]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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',
            position: { X: 'center', Y: 'center' }
        });
    }
    return (<div className="App" id='dialog-target'>
        <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
    </div>);
}
export default App;
Copied to clipboard
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',
        position: { X: 'center', Y: 'center' }
    });
}

return (
    <div className="App" id='dialog-target'>
        <ButtonComponent id="alertBtn" cssClass="e-danger" onClick={buttonClick.bind(this)}>Alert</ButtonComponent>
    </div>
);
}
export default App;

Confirm position

[Class-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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',
            position: { X: 'center', Y: 'center' }
        });
    }
    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;
Copied to clipboard
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',
    position: { X: 'center', Y: 'center' }
});
}
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]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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',
            position: { X: 'center', Y: 'center' }
        });
    }
    return (<div className="App" id='dialog-target'>
        <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
    </div>);
}
export default App;
Copied to clipboard
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',
        position: { X: 'center', Y: 'center' }
    });
}

return (
    <div className="App" id='dialog-target'>
        <ButtonComponent id="confirmBtn" cssClass="e-success" onClick={buttonClick.bind(this)}>Confirm</ButtonComponent>
    </div>
);
}
export default App;

Prompt position

[Class-component]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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.." />',
            position: { X: 'center', Y: 'center' }
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
    <ButtonComponent id="promptBtn" isPrimary onClick={this.buttonClick.bind(this)}>Prompt</ButtonComponent>
  </div>);
    }
}
export default App;
Copied to clipboard
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.." />',
  position: { X: 'center', Y: 'center' }
});
}
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]

Source
Preview
App.jsx
App.tsx
Copied to clipboard
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.." />',
            position: { X: 'center', Y: 'center' }
        });
    }
    return (<div className="App" id='dialog-target'>
            <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
    </div>);
}
export default App;
Copied to clipboard
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.." />',
    position: { X: 'center', Y: 'center' }
    });
}

return (
    <div className="App" id='dialog-target'>
            <ButtonComponent id="promptBtn" isPrimary onClick={buttonClick.bind(this)}>Prompt</ButtonComponent>
    </div>
);

}
export default App;