Sets or gets the contextMenu property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the height property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the layout property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minGroupHeight property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the minGroupWidth property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the resizable property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} resizable={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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the rtl property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the theme property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} layout={layout} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the width property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when the widget is created.

Note: The create event binding has to be made before the jqxLayout's initialization.

Code examples

Bind to the create event of jqxLayout.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.on('create', (event) => {
            // Do Something...
        });
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a group has been pinned.

Code examples

Bind to the pin event of jqxLayout.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.on('pin', (event) => {
            // Do Something...
        });
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

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 jqxLayout.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.on('resize', (event) => {
            // Do Something...
        });
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a group has been unpinned.

Code examples

Bind to the unpin event of jqxLayout.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.on('unpin', (event) => {
            // Do Something...
        });
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.destroy();
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.loadLayout(layout);
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.refresh();
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        this.refs.myLayout.render();
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxLayout from 'jqwidgets-react/react_jqxlayout.js';
 
class App extends React.Component { 
    componentDidMount() {
        let value = this.refs.myLayout.saveLayout();
    }

    render() {       
        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 (
            <JqxLayout ref='myLayout'
                width={'100%'} height={'90%'} 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>
            </JqxLayout>
        )
    }
}
 
ReactDOM.render(<App />, document.getElementById('app'));