Template in React Dialog

4 Sep 202623 minutes to read

The React Dialog supports templating for the header, content, and footer sections. Text and HTML content can be appended to these sections through template properties.

The React Dialog header content is provided through the header property, which accepts both text and HTML content as a string or a React node/function (JSX) for full control over the header layout. A built-in close button can be enabled via the showCloseIcon property.

The React Dialog footer can be enabled using the built-in buttons collection or by providing any HTML string/React node through the footerTemplate.

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

Content

The React Dialog content is provided through the content property, which accepts both text and HTML strings, or by placing child JSX elements directly inside the <DialogComponent>.

The following example demonstrates the usage of header, footer, and content templates in the Dialog. In the example, the header is set via a React function returning JSX, the footer is set through the footerTemplate property returning JSX, and the content is added as child JSX elements within the DialogComponent.

[Class-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    dialogInstance;
    buttonInstance;
    dialogTextInstance;
    handleClick = () => {
        this.dialogInstance.show();
    };
    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>);
    }
    dialogClose = () => {
        this.buttonInstance.style.display = 'inline-block';
    };
    dialogOpen = () => {
        this.buttonInstance.style.display = 'none';
    };
    keyDown = (e) => {
        if (e.keyCode === 13) {
            this.updateTextValue();
        }
    };
    updateTextValue = () => {
        const enteredVal = document.getElementById('inVal');
        const dialogTextElement = document.getElementsByClassName('dialogText')[0];
        if (enteredVal.value !== '') {
            dialogTextElement.innerHTML = enteredVal.value;
        }
        enteredVal.value = '';
    };
    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;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

class App extends React.Component<{}, {}> {
  public dialogInstance: DialogComponent;
  public buttonInstance: HTMLElement;
  public dialogTextInstance: HTMLSpanElement;

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

  public header(): JSX.Element {
      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>
      )
  }

  public footerTemplate(): JSX.Element {
      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>
      )
  }

  public dialogClose = () => {
      this.buttonInstance.style.display='inline-block';
  }

  public dialogOpen = () => {
      this.buttonInstance.style.display='none';
  }

  public keyDown = (e: any) => {
              if (e.keyCode === 13) { this.updateTextValue(); }
  }

  public updateTextValue = () => {
      const enteredVal: HTMLInputElement = document.getElementById('inVal') as HTMLInputElement;
      const dialogTextElement: HTMLElement = document.getElementsByClassName('dialogText')[0] as HTMLElement;
      if ( enteredVal.value !== '') {
          dialogTextElement.innerHTML = enteredVal.value;
      }
      enteredVal.value = '';

  }

  public componentDidMount() {
      setTimeout(() => {
          (document as any).getElementById('sendButton').onkeydown = (e: any) => {
              if (e.keyCode === 13) { this.updateTextValue(); }
          };

          (document as any).getElementById('inVal').onkeydown = (e: any) => {
              if (e.keyCode === 13) { this.updateTextValue(); }
          };

          (document as any).getElementById('sendButton').onclick = (): void => {
              this.updateTextValue();
          };
      });
  }

  public 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;

[Functional-component]

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    let buttonInstance;
    let dialogTextInstance;
    function handleClick() {
        dialogInstance.show();
    }
    function 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>);
    }
    function 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>);
    }
    function dialogClose() {
        buttonInstance.style.display = 'inline-block';
    }
    function dialogOpen() {
        buttonInstance.style.display = 'none';
    }
    function keyDown(e) {
        if (e.keyCode === 13) {
            updateTextValue();
        }
    }
    function updateTextValue() {
        const enteredVal = document.getElementById('inVal');
        const dialogTextElement = document.getElementsByClassName('dialogText')[0];
        if (enteredVal.value !== '') {
            dialogTextElement.innerHTML = enteredVal.value;
        }
        enteredVal.value = '';
    }
    function componentCreated() {
        setTimeout(() => {
            document.getElementById('sendButton').onkeydown = (e) => {
                if (e.keyCode === 13) {
                    updateTextValue();
                }
            };
            document.getElementById('inVal').onkeydown = (e) => {
                if (e.keyCode === 13) {
                    updateTextValue();
                }
            };
            document.getElementById('sendButton').onclick = () => {
                updateTextValue();
            };
        });
    }
    return (<div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' ref={buttonElement => buttonInstance = buttonElement} role='button' onClick={handleClick}>Open</button>
            <DialogComponent created = {componentCreated} width='350px' target='#dialog-target' header={header} footerTemplate={footerTemplate} showCloseIcon={true} open={dialogOpen} close={dialogClose} ref={dialog => 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;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";

function App() {
  let dialogInstance: DialogComponent;
  let buttonInstance: HTMLElement;
  let dialogTextInstance: HTMLSpanElement;

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

  function header(): JSX.Element {
      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>
      )
  }

  function footerTemplate(): JSX.Element {
      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>
      )
  }

  function dialogClose () {
      buttonInstance.style.display='inline-block';
  }

  function dialogOpen () {
      buttonInstance.style.display='none';
  }

  function keyDown (e: any) {
        if (e.keyCode === 13) { updateTextValue(); }
  }

  function updateTextValue() {
      const enteredVal: HTMLInputElement = document.getElementById('inVal') as HTMLInputElement;
      const dialogTextElement: HTMLElement = document.getElementsByClassName('dialogText')[0] as HTMLElement;
      if ( enteredVal.value !== '') {
          dialogTextElement.innerHTML = enteredVal.value;
      }
      enteredVal.value = '';

  }

  function componentCreated() {
      setTimeout(() => {
          (document as any).getElementById('sendButton').onkeydown = (e: any) => {
              if (e.keyCode === 13) {updateTextValue(); }
          };

          (document as any).getElementById('inVal').onkeydown = (e: any) => {
              if (e.keyCode === 13) {updateTextValue(); }
          };

          (document as any).getElementById('sendButton').onclick = (): void => {
              updateTextValue();
          };
      });
  }

    return (
        <div className="App" id='dialog-target'>
            <button className='e-control e-btn' id='targetButton1' ref={buttonElement => buttonInstance = buttonElement!} role='button' onClick={handleClick}>Open</button>
            <DialogComponent created = {componentCreated} width='350px' target='#dialog-target' header={header} footerTemplate={footerTemplate } showCloseIcon={true}
            open= {dialogOpen} close= {dialogClose}
            ref={dialog => 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