Search results

Show Dialog with fullscreen in React Dialog component

You can show the dialog in fullscreen by passing true as argument to the dialog show method.

Source
Preview
App.tsx
App.css.jsx
App.jsx
index.jsx
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';

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(true);
}

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 header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog!}>
      This is a Dialog with fullscreen display </DialogComponent>
  </div>);
}
}
export default App;
import { DialogComponent } from '@syncfusion/ej2-react-popups';
import * as React from "react";
import './App.css';
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(true);
    }
    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 header='Dialog' showCloseIcon={true} visible={false} width='250px' target='#dialog-target' buttons={this.buttons} ref={dialog => this.dialogInstance = dialog}>
      This is a Dialog with fullscreen display </DialogComponent>
  </div>);
    }
}
export default App;
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('container'));