React UI Components Documentation

Sets or gets the disabled property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} disabled={true}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxSplitter's height.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the orientation property.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} orientation={'horizontal'}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the panels property.

• size - sets the panel's size.
• min - sets the panel's minimum size.
• collapsible - sets whether the panel is collapsible.
• collapsed - sets whether the panel is collapsed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
   
  constructor(props: {}) {
    super(props);
      
    this.state = {
        panels: [{ size: 100 }, { size: 200 }]
    }
  }  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} panels={this.state.panels}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the resizable property. When this property is set to false, the user will not be able to move the split bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} resizable={false}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the size of the split bar.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} splitBarSize={10}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets whether the split bar is displayed.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} showSplitBar={false}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
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 JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600} theme={'material'}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Sets or gets the jqxSplitter's width.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a panel is collapsed.

Code examples

Bind to the collapsed event of jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} onCollapsed={this.onCollapsed} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
 
  private onCollapsed(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when a panel is expanded.

Code examples

Bind to the expanded event of jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} onExpanded={this.onExpanded} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
 
  private onExpanded(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the 'resize' operation has ended.

Code examples

Bind to the resize event of jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} onResize={this.onResize} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
 
  private onResize(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered when the 'resizeStart' operation has started.

Code examples

Bind to the resizeStart event of jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();  
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} onResizeStart={this.onResizeStart} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
 
  private onResizeStart(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Collapse a panel.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.collapse();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Destroys the jqxSplitter. This method will remove the jqxSplitter from the DOM and will remove all internal event handlers and styles.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.destroy();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Disables the jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.disable();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Enables the jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.enable();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Expands a panel.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.expand();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Renders the jqxSplitter.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.render();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the jqxSplitter. This method will perform a layout and will arrange the split panels.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxSplitter, { ISplitterProps } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';
 
class App extends React.PureComponent<{}, ISplitterProps> {
  private mySplitter = React.createRef<JqxSplitter>();
 
  public componentDidMount(): void {
    this.mySplitter.current!.refresh();
  }
   
  
  public render() {
    return (
      <JqxSplitter ref={this.mySplitter} 
        width={600} height={600}>
        <div>Left Side</div>
    <div>Right Side</div>
      </JqxSplitter>
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);