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.

Window Overview

The Window displays content in a modal or non-modal HTML window and, by default, can be moved, resized, and closed.

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

Basic Usage

The following example demonstrates the Window in action.

class LayoutsContainer extends React.Component {

     open() {
             $("[data-role='window']").each(function (index) {
                 $(this).data('kendoWindow').open()});
         }

     render() {
       return (
         <div>
               <Window title={"About Alvar Aalto"} width={"640px"}>
                   <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

                   <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

                   <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
               </Window>
               <span id="undo" className="k-button" onClick={this.open}>Click here to open the Window</span>
           </div>
       );
     }
   }

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

Installation

  1. Download and install the package.

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

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

Dependencies

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

  • @progress/kendo-ui

Features and Functionalities

The Window delivers options for customizing its actions.

Events

The following example demonstrates basic Window events. You can subscribe to all Window events by the handler name.

class LayoutsContainer extends React.Component {

     open() {
             $("[data-role='window']").each(function (index) {
                 $(this).data('kendoWindow').open()});
         }

         onOpen(){
             console.log('Open event was triggered!');
         }

          onClose(){
             console.log('Close event was triggered!');
         }

          onDragStart(){
             console.log('DragStart event was triggered!');
         }

          onDragEnd(){
             console.log('DragEnd event was triggered!');
         }

     render() {
       return (
         <div>
               <Window open={this.onOpen} close={this.onClose} dragstart={this.onDragStart} dragend={this.onDragEnd} title={"About Alvar Aalto"} width={"640px"}>
                   <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

                   <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

                   <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>
               </Window>
               <span id="undo" className="k-button" onClick={this.open}>Click here to open the Window</span>
           </div>
       );
     }
   }

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