Render a Dialog without header in React Dialog component

02 Feb 2023 / 2 minutes to read

The dialog can be rendered without header by setting the header property value as empty string or null. By default, dialog is rendered without header.

[Class-component]

Source

Preview

App.jsx

App.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.buttons = [{
                buttonModel: {
                    content: 'OK',
                    cssClass: 'e-flat',
                    isPrimary: true,
                },
                'click': () => {
                    this.dialogInstance.hide();
                }
            },
            {
                buttonModel: {
                    content: 'Cancel',
                    cssClass: 'e-flat'
                },
                '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 width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
        This is a dialog without header </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 buttons: any = [{
      buttonModel: {
          content: 'OK',
          cssClass: 'e-flat',
          isPrimary: true,
      },
      'click': () => {
          this.dialogInstance.hide();
      }
  },
  {
      buttonModel: {
          content: 'Cancel',
          cssClass: 'e-flat'
      },
      '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 width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
        This is a dialog without header </DialogComponent>
    </div>);
  }
}
export default App;

[Functional-component]

Source

Preview

App.jsx

App.tsx

import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
function App() {
    let dialogInstance;
    const buttons = [{
            buttonModel: {
                content: 'OK',
                cssClass: 'e-flat',
                isPrimary: true,
            },
            'click': () => {
                dialogInstance.hide();
            }
        },
        {
            buttonModel: {
                content: 'Cancel',
                cssClass: 'e-flat'
            },
            '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 width='250px' target='#dialog-target' buttons={buttons} ref={dialog => dialogInstance = dialog}>
        This is a dialog without header </DialogComponent>
    </div>);
}
export default App;

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

function App(){
    let dialogInstance: DialogComponent;
    const buttons: any = [{
        buttonModel: {
            content: 'OK',
            cssClass: 'e-flat',
            isPrimary: true,
        },
        'click': () => {
            dialogInstance.hide();
        }
    },
    {
        buttonModel: {
            content: 'Cancel',
            cssClass: 'e-flat'
        },
        '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 width='250px' target='#dialog-target' buttons={buttons} ref={dialog => dialogInstance = dialog!}>
        This is a dialog without header </DialogComponent>
    </div>
);
}
export default App;