React UI Components Documentation

Sets or gets the autoOpen property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} autoOpen={false}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the animationType property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} animationType={'slide'}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the collapsed property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} collapsed={true}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the collapseAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} collapseAnimationDuration={3000}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the content property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} content={'New Content'}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} closeAnimationDuration={3000}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeButtonSize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} closeButtonSize={20}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the closeButtonAction property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} closeButtonAction={'close'}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cancelButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} cancelButton={cancelButton}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the dragArea property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} dragArea={dragArea}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the draggable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} draggable={false}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the disabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} disabled={true}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the initContent property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} initContent={initContent}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the isModal property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} isModal={true}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the keyboardCloseKey property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} keyboardCloseKey={32}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the keyboardNavigation property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} keyboardNavigation={false}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} minWidth={100}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the maxWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} maxWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the modalOpacity property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} modalOpacity={0.5}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the modalZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} modalZIndex={9999}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the modalBackgroundZIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} modalBackgroundZIndex={9999}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the okButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} okButton={okButton}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the position property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} position={top,left}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} rtl={true}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the resizable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} resizable={false}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showAnimationDuration property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} showAnimationDuration={3000}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCloseButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} showCloseButton={false}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the showCollapseButton property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} showCollapseButton={true}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} theme={'energyblue'}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the title property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} title={'Title'}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the zIndex property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300} zIndex={9999}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is closed.

Code examples

Bind to the close event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('close', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is collapsed.

Code examples

Bind to the collapse event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('collapse', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the user create new window.

Code examples

Bind to the created event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('created', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is expanded.

Code examples

Bind to the expand event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('expand', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is dragging by the user.

Code examples

Bind to the moving event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('moving', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is dropped by the user.

Code examples

Bind to the moved event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('moved', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the window is displayed.

Code examples

Bind to the open event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('open', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the end-user is resizing the window.

Code examples

Bind to the resizing event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('resizing', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the end-user has resized the window.

Code examples

Bind to the resized event of jqxWindow.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.on('resized', (event) => {
            // Do Something...
        });
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.bringToFront();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.close();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.collapse();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.closeAll();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.disable();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.destroy();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.enable();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.expand();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.focus();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myWindow.isOpen();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.move();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.open();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.hide();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.resize();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.setTitle();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxWindow from 'jqwidgets-react/react_jqxwindow.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myWindow.setContent();
    }

    render() {             
        return (
            <JqxWindow ref='myWindow'
                 width={500} height={400} minHeight={300} minWidth={300}>
                <div>About 30 St Mary Axe</div>
                <div>
                    <h3>30 St Mary Axe</h3>
                    <p>The Swiss Re Building (colloquially referred to as the Gherkin)...</p>
                    <p>The building is on the former site of the Baltic Exchange building....</p>               
                </div>
            </JqxWindow>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));