React
Demos
Support
Forum
Download
Search results

Customize the Dialog appearance in React Dialog component

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

Source
Preview
index.tsx
index.html
App.css.jsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App  from './App';

ReactDOM.render(<App />, document.getElementById('container'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Dialog</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="styles.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/bootstrap.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/bootstrap.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/bootstrap.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='container'>
        <div id="dialog">
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.settings = { effect: 'Zoom', duration: 400, delay: 0 };
        this.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;
Previous
Next