Properties

NameTypeDefault
cookies boolean false

Enables or disables the cookies. If the cookies are enabled then the docking layout is going to be saved and kept every time the page is being reloaded. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        cookies={true}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
cookieOptions DockingCookieOptions {}
Interface DockingCookieOptions {
  domain?: string;
  expires?: number;
}

Sets or gets the cookie options. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        cookies={true} cookieOptions={{ domain: 'jqwidgets.com', expires: 90 }}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disabled boolean false

Sets or gets whether the docking is disabled. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        disabled={true}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
floatingWindowOpacity number 0.3

Sets or gets the opacity of the window which is currently dragged by the user. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        floatingWindowOpacity={0.4}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
height number | string auto

Sets or gets the docking's height. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        height={300}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
keyboardNavigation boolean false

Enables or disables the jqxDocking's keyboard navigation. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        keyboardNavigation={true}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
mode DockingMode default
DockingMode: "default" | "docked" | "floating"

Sets or gets docking's mode.

Possible Values: 
'default'-the user can  drop every window inside any docking panel or outside the docking panels
'docked'-the user can drop every window just into the docking panels
'floating'-the user can drop any window just outside of the docking panels.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        mode={'docked'} width={200}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
orientation DockingOrientation horizontal
DockingOrientation: "horizontal" | "vertical"

Sets or gets docking's orientation. This property is setting whether the panels are going to be side by side or below each other. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        orientation={'horizontal'}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
rtl boolean false

Sets ot 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 JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        rtl={true}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
theme string '' 
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        theme={'material'}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
width number | string auto

Sets or gets the docking's width. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        width={300}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
windowsMode object null

Sets ot gets specific mode for each window. The value of the property is object with keys - window's ids and values - specific modes.

windowsOffset number 5

Sets or gets the offset between the windows. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
        windowsOffset={7}>
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Events

dragStart Event

This event is triggered when the user start to drag any window.

Code examples

Bind to the dragStart event of jqxDocking. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} onDragStart={this.onDragStart} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
 
  private onDragStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
dragEnd Event

This event is triggered when the user drop any window.

Code examples

Bind to the dragEnd event of jqxDocking. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();  
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} onDragEnd={this.onDragEnd} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
 
  private onDragEnd(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Methods

NameArgumentsReturn Type
addWindow windowId, mode, panel, position

Adding new window to the docking. This method accepts four arguments. The first one is id of the window we wish to add to the docking. The second argument is window's mode (default, docked, floating) the third argument is the panel's number and the last one is the position into the panel. The last three arguments are optional.

closeWindow windowId

Closing specific window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.closeWindow('window1');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
collapseWindow windowId

Collapsing a specific window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.collapseWindow('window1');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
destroy None

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 JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disableWindowResize windowId

Disabling the resize of a specific window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.disableWindowResize('window1');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
disable None

Disabling the jqxDocking.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
exportLayout None

Exporting docking's layout into a JSON string.
enable None

Enabling the docking
expandWindow windowId

Expanding a specific window.
enableWindowResize windowId

Enabling the resize of a specific window which is not docked into a panel.
focus None

Focuses the widget. 

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.focus();
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
hideAllCloseButtons None

Hiding the close buttons of all windows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.hideAllCloseButtons();
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
hideAllCollapseButtons None

Hiding the collapse buttons of all windows.
hideCollapseButton windowId

Hiding the collapse button of a specific window.
hideCloseButton windowId

Hiding the close button of a specific window.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.hideCloseButton('window1');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
importLayout Json

Importing the docking layout from a JSON string.
move windowId, panel, position

Moving window to specific position into specific panel. This method have three parameters. The first one is id of the window we want to move, the second one is number of the panel where we want to move our window and the last one is the position into this panel.

pinWindow windowId

Pinning a specific window

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.pinWindow('window2');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
setWindowMode windowId, mode

Setting mode to a specific window. This method accepts two arguments - window id and mode type.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.setWindowMode('window2','default');
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
showCloseButton windowId

Showing the close button of a specific window.
showCollapseButton windowId

Showing the collapse button of a specific window.
setWindowPosition windowId, top, left

Moving window in floating mode to a specific position.
showAllCloseButtons None

Showing the close buttons of all windows.
showAllCollapseButtons None

Showing the collapse buttons of all windows.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDocking, { IDockingProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdocking';
 
class App extends React.PureComponent<{}, IDockingProps> {
  private myDocking = React.createRef<JqxDocking>();
 
  public componentDidMount(): void {
    this.myDocking.current!.showAllCollapseButtons();
  }
   
  
  public render() {
    return (
      <JqxDocking ref={this.myDocking} 
       >
        <div>
      <div id="window1">
        <div>Header 1...</div>
        <div>Content 1...</div>
      </div>
      <div id="window2">
        <div>Header 2...</div>
        <div>Content 2...</div>
      </div>
      <div>
        <div>Header 3...</div>
        <div>Content 3...</div>
      </div>
    </div>
      </JqxDocking>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
unpinWindow windowId

Unpinning a specific window