@progress/kendo-dialog-react-wrapper
Version:
Kendo UI Dialog wrapper for React
340 lines (276 loc) • 9 kB
Markdown
---
title: Overview
page_title: Dialog Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI Dialog wrapper for React delivers and use the component in React projects."
slug: overview_dialog
position: 0
---
# 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](http://docs.telerik.com/kendo-ui/api/javascript/ui/dialog) widget.
## Basic Usage
The following example demonstrates the Dialog in action.
```jsx-preview
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.
```sh
npm install --save /kendo-dialog-react-wrapper
```
2. Once installed, import the desired component from the package.
```sh
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](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:
* /kendo-ui
## Features and Functionalities
* [Title](#toc-title)
* [Visibility](#toc-visibility)
* [Button content](#toc-button-content)
* [Dimensions](#toc-dimensions)
### Title
To set a title to the Dialog, use its `title` property.
```jsx
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.
```jsx
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.
```jsx
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.
```jsx
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.
```jsx
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')
);
```
## Suggested Links
* [Kendo UI Dialog for jQuery](http://docs.telerik.com/kendo-ui/controls/layout/dialog/overview)
* [API Reference of the Dialog Widget](http://docs.telerik.com/kendo-ui/api/javascript/ui/dialog)