All Components

You are on the site of the Kendo UI Wrappers for React suite which contains wrappers for the Kendo UI for jQuery widgets. To explore the brand-new set of Kendo UI for React components which are built from the ground up, go to the Kendo UI for React suite.

Dialog Overview

The Dialog communicates specific information and prompts users to take specific actions by interacting with a modal dialog.

The Dialog wrapper for React is a client-side wrapper for the Kendo UI Dialog widget.

Basic Usage

The following example demonstrates the Dialog in action.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                       e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
               <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Installation

  1. Download and install the package.

    npm install --save @progress/kendo-dialog-react-wrapper
  2. Once installed, import the desired component from the package.

    import { Dialog } from '@progress/kendo-dialog-react-wrapper';
  3. You are required to install one of the Kendo UI themes to style your components.

Dependencies

The Dialog package requires you to install the following peer dependencies in your application:

  • @progress/kendo-ui

Features and Functionalities

Title

To set a title to the Dialog, use its title property.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                       e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
               <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

If not specified, the Dialog will not display a title.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                       e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog minWidth={250} width={450} actions = {this.actions}>
               <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Visibility

To control the visibility of the Dialog, use its open and close methods. By default, the component is visible. To hide it, use the close method.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                       e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
               <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Button Content

To specify the action buttons in the Dialog, use the actions property.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                       e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog title="Please confirm"  minWidth={250} width={450} actions = {this.actions}>
               <p style={{margin: "30px", textAlign: "center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );

Dimensions

To specify the dimensions of the Dialog, use its width and height configurations.

class LayoutsContainer extends React.Component {

      constructor(props) {
           super(props);
           this.actions = [
               {
                   text:"Yes",
                   primary:true,
                   action:function(e){
                      e.sender.close()
                   }
               },
                {
                   text:"No",
                   action:function(e){
                       e.sender.close()
                   }
               }
           ]
       }

       open(){
          $('[data-role="dialog"]').data('kendoDialog').open();
       }

     render() {
       return (
         <div className={"example-wrapper"}>
           <a className={"k-button"} onClick={this.open}>Open dialog</a>
           <Dialog title="Please confirm"  minWidth={250} width={450} height={400} actions = {this.actions}>
               <p style={{margin:"30px", textAlign:"center"}}>Are you sure you want to continue?</p>
           </Dialog>
       </div>
       );
     }
   }

   ReactDOM.render(
     <LayoutsContainer />,
     document.querySelector('my-app')
   );
In this article