Search results

Templates in React Dialog component

In Dialog the template support is provided to header, content and footer sections. So any text or HTML content can be appending in these sections.

The Dialog header content can be provided through the header property, and it will allow both text and any HTML content as a string. Also in header, close button is provided as built-in support, and this can be enabled through the showCloseIcon property.

The Dialog footer can be enabled by adding built-in buttons or providing any HTML string through the footerTemplate.

The buttons and footerTemplate properties can’t be used at the same time.

The below example demonstrates the usage of header and footer template in the Dialog

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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-react-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.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.handleClick = () => {
            this.dialogInstance.show();
        };
        this.dialogClose = () => {
            this.buttonInstance.style.display = 'inline-block';
        };
        this.dialogOpen = () => {
            this.buttonInstance.style.display = 'none';
        };
        this.keyDown = (e) => {
            if (e.keyCode === 13) {
                this.updateTextValue();
            }
        };
        this.updateTextValue = () => {
            const enteredVal = document.getElementById('inVal');
            const dialogTextElement = document.getElementsByClassName('dialogText')[0];
            if (enteredVal.value !== '') {
                dialogTextElement.innerHTML = enteredVal.value;
            }
            enteredVal.value = '';
        };
    }
    header() {
        return (<div>
          <img className="img2" src="https://ej2.syncfusion.com/products/typescript/dialog/template/images/1.png"/>
          <div title="Nancy" className="e-icon-settings dlg-template">Nancy</div>
      </div>);
    }
    footerTemplate() {
        return (<div>
              <input id="inVal" className="e-input" type="text" placeholder="Enter your message here!"/>

              <button id="sendButton" className="e-control e-btn e-primary" data-ripple="true">Send</button>
          </div>);
    }
    componentDidMount() {
        setTimeout(() => {
            document.getElementById('sendButton').onkeydown = (e) => {
                if (e.keyCode === 13) {
                    this.updateTextValue();
                }
            };
            document.getElementById('inVal').onkeydown = (e) => {
                if (e.keyCode === 13) {
                    this.updateTextValue();
                }
            };
            document.getElementById('sendButton').onclick = () => {
                this.updateTextValue();
            };
        });
    }
    render() {
        return (<div className="App" id='dialog-target'>
        <button className='e-control e-btn' id='targetButton1' ref={buttonElement => this.buttonInstance = buttonElement} role='button' onClick={this.handleClick = this.handleClick}>Open</button>
        <DialogComponent width='350px' target='#dialog-target' header={this.header} footerTemplate={this.footerTemplate} showCloseIcon={true} open={this.dialogOpen} close={this.dialogClose} ref={dialog => this.dialogInstance = dialog}>
              <div className="dialogContent">
                      <span className="dialogText">Greetings Nancy! When will you share me the source files of the project?</span>
              </div>
        </DialogComponent>
    </div>);
    }
}
export default App;

See Also