| Name | Type | Default |
|---|
|
contextMenu
|
Boolean
|
false
|
Sets or gets the contextMenu property.
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 height property.
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 layout property.
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 minGroupHeight property.
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 minGroupWidth property.
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 resizable property.
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 rtl property.
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 theme property.
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 width property.
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'));
|
|
|
|
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 create event of jqxDockingLayout.
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... }); } 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'));
|
|
dock
|
Event
|
|
This event is triggered when a floatGroup has been docked.
Code examples
Bind to the dock event of jqxDockingLayout.
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... }); } 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'));
|
|
floatGroupClosed
|
Event
|
|
This event is triggered when a floatGroup has been closed.
Code examples
Bind to the floatGroupClosed event of jqxDockingLayout.
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... }); } 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'));
|
|
float
|
Event
|
|
This event is triggered when a group or panel has been floated.
Code examples
Bind to the float event of jqxDockingLayout.
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... }); } 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'));
|
|
pin
|
Event
|
|
This event is triggered when a group has been pinned.
Code examples
Bind to the pin event of jqxDockingLayout.
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... }); } 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'));
|
|
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 resize event of jqxDockingLayout.
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... }); } 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'));
|
|
unpin
|
Event
|
|
This event is triggered when a group has been unpinned.
Code examples
Bind to the unpin event of jqxDockingLayout.
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... }); } 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'));
|
|
|
| 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'); } 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'));
|
|
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(); } 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'));
|
|
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); } 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'));
|
|
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() { 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'));
|
|
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(); } 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'));
|
|
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(); } 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'));
|
