React UI Components Documentation
Properties
| Name | Type | Default |
|---|---|---|
| contextMenu | Boolean | false |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} contextMenu={true}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| height | Number | null |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| layout | Array | [] |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} layout={layout}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| minGroupHeight | Number | 100 |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} minGroupHeight={200}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| minGroupWidth | Number | 100 |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} minGroupWidth={150}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| resizable | Boolean | true |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} resizable={false}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| rtl | Boolean | false |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} rtl={true}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| theme | String | '' |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600} theme={'energyblue'}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
| width | Number | null |
|
Sets or gets the import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
render() {
let layout: any[] = generateLayout();
let generateLayout = () => {
let layout = [{
type: 'layoutGroup',
orientation: 'horizontal',
items: [{
type: 'layoutGroup',
orientation: 'vertical',
width: '60%',
items: [{
type: 'documentGroup',
height: '50%',
minHeight: '25%',
items: [{
type: 'documentPanel',
title: 'Document 1',
contentContainer: 'Document1Panel'
}, {
type: 'documentPanel',
title: 'Document 2',
contentContainer: 'Document2Panel'
}]
}, {
type: 'tabbedGroup',
height: '50%',
pinnedHeight: '10%',
items: [{
type: 'layoutPanel',
title: 'Error List',
contentContainer: 'ErrorListPanel'
}, {
type: 'layoutPanel',
title: 'Output',
contentContainer: 'OutputPanel',
selected: true
}]
}]
}, {
type: 'tabbedGroup',
width: '40%',
items: [{
type: 'layoutPanel',
title: 'Solution Explorer',
contentContainer: 'SolutionExplorerPanel'
}, {
type: 'layoutPanel',
title: 'Properties',
contentContainer: 'PropertiesPanel'
}]
}]
}];
return layout;
}
return (
<JqxDockingLayout ref='myDockingLayout'
layout={layout} width={850} height={600}>
<div data-container="Document1Panel">
Document 1 content
</div>
<div data-container="Document2Panel">
Document 2 content
</div>
<div data-container="ErrorListPanel">
List of errors
</div>
<div data-container="OutputPanel">
Output
</div>
<div data-container="SolutionExplorerPanel">
Solution structure
</div>
<div data-container="PropertiesPanel">
List of properties
</div>
</JqxDockingLayout>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
|
||
Events |
||
| create | Event | |
|
This event is triggered when the widget is created. Note: The create event binding has to be made before the jqxDockingLayout's initialization. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('create', (event) => {
// Do Something...
});
}
|
||
| dock | Event | |
|
This event is triggered when a floatGroup has been docked. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('dock', (event) => {
// Do Something...
});
}
|
||
| floatGroupClosed | Event | |
|
This event is triggered when a floatGroup has been closed. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('floatGroupClosed', (event) => {
// Do Something...
});
}
|
||
| float | Event | |
|
This event is triggered when a group or panel has been floated. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('float', (event) => {
// Do Something...
});
}
|
||
| pin | Event | |
|
This event is triggered when a group has been pinned. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('pin', (event) => {
// Do Something...
});
}
|
||
| resize | Event | |
|
This event is triggered when a group has been resized (when the group has been resized with the mouse or when an adjacent group has been pinned, unpinned or closed). Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('resize', (event) => {
// Do Something...
});
}
|
||
| unpin | Event | |
|
This event is triggered when a group has been unpinned. Code examples
Bind to the
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.on('unpin', (event) => {
// Do Something...
});
}
|
||
Methods |
||
| Name | Return Type | |
| addFloatGroup | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.addFloatGroup(200,200,{x:10, y:10},'layoutPanel','Title','Content');
}
|
||
| destroy | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.destroy();
}
|
||
| loadLayout | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.loadLayout(layout);
}
|
||
| refresh | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.refresh();
}
|
||
| render | None | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
this.refs.myDockingLayout.render();
}
|
||
| saveLayout | Object | |
import React from 'react';
import ReactDOM from 'react-dom';
import JqxDockingLayout from 'jqwidgets-react/react_jqxdockinglayout.js';
class App extends React.Component {
componentDidMount() {
let value = this.refs.myDockingLayout.saveLayout();
}
|
||
