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