React UI Components Documentation

Gets whether the dockpanel is disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();  
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} 
        width={300} height={200} disabled={true}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the dockpanel's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();  
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} 
        width={300} height={200}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

When true, the last child gets the available width and height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();  
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} 
        width={300} height={200} lastchildfill={true}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the dockpanel's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();  
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} 
        width={300} height={200}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Occurs when the layout is performed.

Code examples

Bind to the layout event of jqxDockPanel.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();
 
  public componentDidMount(): void {
    this.myDockPanel.current!.setOptions({ layout: {} });
  }
   
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} onLayout={this.onLayout} 
        width={300} height={200}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
 
  private onLayout(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the DockPanel.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxDockPanel, { IDockPanelProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxdockpanel';
 
class App extends React.PureComponent<{}, IDockPanelProps> {
  private myDockPanel = React.createRef<JqxDockPanel>();
 
  public componentDidMount(): void {
    this.myDockPanel.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxDockPanel ref={this.myDockPanel} 
        width={300} height={200}>
        <div dock='left' style='background: #486974;'> First Div </div>
    <div dock='top' style='height: 100px; background: #368ba7;'> Second Div </div>
    <div dock='right' style='background: #df7169;'> Third Div </div>
    <div style='background: #a73654;'> Fourth Div </div>
      </JqxDockPanel>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);