Customize the dialog appearance in React Dialog component

20 Feb 202613 minutes to read

You can customize the dialog appearance by providing a dialog template as a string or HTML element to the content property. In the following sample, the dialog is customized to appear as an error window.

[Class-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    settings = { effect: 'Zoom', duration: 400, delay: 0 };
    dialogInstance;
    buttons = [{
            buttonModel: {
                content: 'Close',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                this.dialogInstance.hide();
            }
        }];
    handleClick() {
        this.dialogInstance.show();
    }
    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 id="dlg-button" header='File and Folder Rename' showCloseIcon={true} width='400px' buttons={this.buttons} animationSettings={this.settings} closeOnEscape={true} ref={dialog => this.dialogInstance = dialog} target='#dialog-target'>
        <div>
          <div className='dialog-content'>
          <div className='msg-wrapper  col-lg-12'>
              <span className='e-icons close-icon col-lg-2'/>
              <span className='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>
              </div>
              <div className='error-detail col-lg-8'>
              <span>Specify a different name</span>
              </div>
          </div>
          </div>
      </DialogComponent>
  </div>);
    }
}
export default App;

app.tsx

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

class App extends React.Component<{}, {}> {
  public settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
  public dialogInstance: DialogComponent;
  public buttons: any = [{
      buttonModel: {
          content: 'Close',
          cssClass: 'e-flat',
          isPrimary: true,
      },
      'click': () => {
          this.dialogInstance.hide();
      }
  }];

  public handleClick() {
      this.dialogInstance.show();
  }

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 id="dlg-button"
        header='File and Folder Rename' showCloseIcon={true}
        width='400px' buttons={this.buttons} animationSettings={this.settings}
        closeOnEscape={true}  ref={dialog => this.dialogInstance = dialog!}
        target='#dialog-target'>
        <div>
          <div className = 'dialog-content'>
          <div className='msg-wrapper  col-lg-12'>
              <span className='e-icons close-icon col-lg-2'/>
              <span  className='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>
              </div>
              <div className='error-detail col-lg-8'>
              <span>Specify a different name</span>
              </div>
          </div>
          </div>
      </DialogComponent>
  </div>);
}
}
export default App;

[Functional-component]

app.jsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let settings = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance;
    const buttons = [{
            buttonModel: {
                content: 'Close',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        }];
    function handleClick() {
        dialogInstance.show();
    }
    return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent id="dlg-button" header='File and Folder Rename' showCloseIcon={true} width='400px' buttons={buttons} animationSettings={settings} closeOnEscape={true} ref={dialog => dialogInstance = dialog} target='#dialog-target'>
          <div>
            <div className='dialog-content'>
            <div className='msg-wrapper  col-lg-12'>
                <span className='e-icons close-icon col-lg-2'/>
                <span className='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>
                </div>
                <div className='error-detail col-lg-8'>
                <span>Specify a different name</span>
                </div>
            </div>
            </div>
        </DialogComponent>
    </div>);
}
export default App;

app.tsx

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

function App(){
    let settings: any = { effect: 'Zoom', duration: 400, delay: 0 };
    let dialogInstance: DialogComponent;
    const buttons: any = [{
        buttonModel: {
            content: 'Close',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            dialogInstance.hide();
        }
    }];

    function handleClick() {
        dialogInstance.show();
    }

    return (
    <div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' role='button' onClick={handleClick.bind(this)}>Open</button>
        <DialogComponent id="dlg-button"
          header='File and Folder Rename' showCloseIcon={true}
          width='400px' buttons={buttons} animationSettings={settings}
          closeOnEscape={true}  ref={dialog => dialogInstance = dialog!}
          target='#dialog-target'>
          <div>
            <div className = 'dialog-content'>
            <div className='msg-wrapper  col-lg-12'>
                <span className='e-icons close-icon col-lg-2'/>
                <span  className='error-msg col-lg-10'>Can not rename 'pictures' because a file or folder with that name already exists </span>
                </div>
                <div className='error-detail col-lg-8'>
                <span>Specify a different name</span>
                </div>
            </div>
            </div>
        </DialogComponent>
    </div>);
}

export default App;