Resize in React Dialog component

20 Feb 202613 minutes to read

The Dialog supports resizing functionality. To resize the dialog, select and drag it using the resize handle (grip) or hover on any of the edges or borders of the dialog within the sample container.

A resizable dialog can be created by setting the enableResize property to true. This allows the dialog size to be changed dynamically, enabling users to view content in expanded mode. The resizeHandles property can be configured to specify all directions in which the dialog can be resized. When the target property is configured along with enableResize, the dialog can be resized only within its specified target container.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                this.setState({ hideDialog: false });
            }
        }];
    constructor(props) {
        super(props);
        this.state = {
            hideDialog: true
        };
    }
    handleClick() {
        this.setState({ hideDialog: true });
    }
    dialogClose = () => {
        this.setState({ hideDialog: false });
    };
    render() {
        return (<div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
      <DialogComponent width='250px' target='#dialog-target' visible={this.state.hideDialog} close={this.dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={this.buttons}>
      This is a Dialog with drag enabled </DialogComponent>
  </div>);
    }
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {hideDialog: boolean;}> {  
  public buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            this.setState({ hideDialog: false })
        }
    },
    {
      buttonModel: {
          content: 'Cancel',
          cssClass: 'e-flat'
      },
      'click': () => {
          this.setState({ hideDialog: false })
      }
    }];

  constructor(props: {}) {
      super(props);
      this.state = {
          hideDialog : true
      };
  }
public handleClick() {
    this.setState({ hideDialog: true })
}

public dialogClose = () => {
    this.setState({ hideDialog: false })
}

public render() {
  return (
  <div className="App" id='dialog-target'>
      <button className='e-control e-btn' id='targetButton1' role='button' onClick={this.handleClick = this.handleClick.bind(this)}>Open</button>
      <DialogComponent width='250px' target='#dialog-target' visible = {this.state.hideDialog} close = {this.dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true}  buttons={this.buttons}>
      This is a Dialog with drag enabled </DialogComponent>
  </div>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    const [status, setStatus] = React.useState({ hideDialog: true });
    let buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            'click': () => {
                setStatus({ hideDialog: false });
            }
        }];
    function handleClick() {
        setState({ hideDialog: true });
    }
    function dialogClose() {
        setStatus({ hideDialog: false });
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' target='#dialog-target' visible={status.hideDialog} close={dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true} buttons={buttons}>
            This is a Dialog with drag enabled </DialogComponent>
        </div>);
}
export default App;

app.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
  const [status, setStatus] = React.useState({ hideDialog: true });
  let buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            setStatus({ hideDialog: false })
        }
    },
    {
      buttonModel: {
          content: 'Cancel',
          cssClass: 'e-flat'
      },
      'click': () => {
          setStatus({ hideDialog: false })
      }
    }];

    function handleClick() {
        setState({ hideDialog: true })
    }

    function dialogClose(){
        setStatus({ hideDialog: false })
    }
    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
            <DialogComponent width='250px' target='#dialog-target' visible = {status.hideDialog} close = {dialogClose} header='Dialog' enableResize={true} resizeHandles={['All']} allowDragging={true} showCloseIcon={true}  buttons={buttons}>
            This is a Dialog with drag enabled </DialogComponent>
        </div>
    );
}
export default App;