Sets or gets whether the window will be shown after it's creation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} autoOpen={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's close and show animation type.

'none'

'fade'

'slide'

'combined'

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} animationType={'slide'}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the window is collapsed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} showCollapseButton={true} collapsed={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines the duration in milliseconds of the expand/collapse animation.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} showCollapseButton={true} collapseAnimationDuration={3000}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's content's html content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} content={'New Content'}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's close animation duration.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} closeAnimationDuration={3000}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's close button size.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} closeButtonSize={20}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This setting specifies what happens when the user clicks the jqxWindow's close button.

'hide'

'close'-clicking the close button removes the window from the DOM

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} closeButtonAction={'close'}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets cancel button. When a cancel button is specified you can use this button to interact with the user. When any user press the cacel button window is going to be closed and the dialog result will be in the following format: { OK: false, Cancel: true, None: false }.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} cancelButton={this.state.cancelButton}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the screen area which is available for dragging(moving) the jqxWindow. Example value: { left: 300, top: 300, width: 600, height: 600 }. By default, the dragArea is null which means that the users will be able to drag the window in the document's body bounds.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} dragArea={this.state.dragArea}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the window is draggable.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} draggable={false}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the window is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} disabled={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the window's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} height={220}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Initializes the jqxWindow's content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} initContent={this.state.initContent}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the window is displayed as a modal dialog. If the jqxWindow's mode is set to modal, the window blocks user interaction with the underlying user interface.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} isModal={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the key which could be used for closing the window when it's on focus. Possible value is every keycode and the 'esc' strig (for the escape key).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} keyboardCloseKey={32}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Determines whether the keyboard navigation is enabled or disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} keyboardNavigation={false}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's minimum height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} minHeight={150}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's maximum height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} maxHeight={250}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's minimum width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} minWidth={200}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's maximum width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} maxWidth={350}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxWindow's background displayed over the underlying user interface when the window is in modal dialog mode.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} isModal={true} modalOpacity={0.3}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxWindow's z-index when it is displayed as a modal dialog.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} isModal={true} modalZIndex={9999}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxWindow overlay's z-index when it is displayed as a modal dialog.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} isModal={true} modalBackgroundZIndex={9999}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets submit button. When a ok/submit button is specified you can use this button to interact with the user. When any user press the submit button window is going to be closed and the dialog result will be in the following format: { OK: true, Cancel: false, None: false }.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} okButton={this.state.okButton}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's position. The value could be in the following formats: 'center', 'top, left', '{ x: 300, y: 500 }', '[300, 500]'.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={this.state.position}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} rtl={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables or disables whether the end-user can resize the window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} resizable={false}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's show animation duration.

Sets or gets whether a close button will be visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} showCloseButton={false}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the collapse button will be visible.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} showCollapseButton={true}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} theme={'material'}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets window's title content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} title={'Title'}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the window's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxWindow z-index.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}} zIndex={9999}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the window is closed.

Code examples

Bind to the close event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onClose={this.onClose} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onClose(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the window is collapsed.

Code examples

Bind to the collapse event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.setOptions({ showCollapseButton: true });
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onCollapse={this.onCollapse} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onCollapse(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the window is expanded.

Code examples

Bind to the expand event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.setOptions({ showCollapseButton: true });
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onExpand={this.onExpand} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onExpand(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the moving event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onMoving={this.onMoving} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onMoving(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the moved event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onMoved={this.onMoved} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onMoved(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the window is displayed.

Code examples

Bind to the open event of jqxWindow.

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

Code examples

Bind to the resizing event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onResizing={this.onResizing} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onResizing(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the resized event of jqxWindow.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
  
  public render() {
    return (
      <JqxWindow ref={this.myWindow} onResized={this.onResized} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
 
  private onResized(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Bringing the window to the front.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.bringToFront();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Hiding/closing the current window (the action - hide or close depends on the closeButtonAction).

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.close();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Collapse the current window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.collapse();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Closing all open windows which are not modal.

Disabling the window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.disable();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the widget.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.destroy();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enabling the window

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.enable();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Expand the current window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.expand();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Focuses the window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.focus();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns true when jqxWindow is opened and false when the jqxWindow is closed

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.isOpen();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Moving the current window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.move(300,600);
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Opening/showing the current window.

Hiding the current window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.hide();
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Resizes the window. The 'resizable' property is expected to be set to "true".

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.resize(300,300);
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Setting window's title

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.setTitle('New Title');
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Setting window's content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxWindow, { IWindowProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';
 
class App extends React.PureComponent<{}, IWindowProps> {
  private myWindow = React.createRef<JqxWindow>(); 
 
  constructor(props: {}) {
    super(props);
  }
 
  public componentDidMount(): void {
    this.myWindow.current!.setContent('New Content');
  }
   
  public render() {
    return (
      <JqxWindow ref={this.myWindow} 
        width={300} position={{ x: 100, y: 100}}>
        <div> 
       RISC
    </div>
    <div> 
        Some aspects attributed to the first RISC-labeled designs around 1975 include the
        observations that the memory-restricted compilers of the time were often unable
        to take advantage of features intended to facilitate manual assembly coding, and
        that complex addressing modes take many cycles to perform due to the required additional
        memory accesses...
        <p>
            <input type='button' id='ok' value='OK' />
            <input type='button' id='cancel' value='Cancel' />
        </p>
     </div>
      </JqxWindow>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);