Jqx layout

[silverboyirParticipant]

i get Uncaught TypeError: Cannot read property 'appendChild' of undefined error
and my code is like this :

let layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
            items: [
                {
                    type: 'layoutGroup',
                    orientation: 'vertical',
                    width: 500,
                    items: [{
                        type: 'documentPanel',
                        title: 'New Document',
                        contentContainer: 'Document1Panel',
                        initContent: () => {
                            render(
                                <Details
                                    data={this.props.data}
                                    elements={this.props.elements}
                                    url={url}
                                />,
                                document.getElementById('details_container')
                            );
                        }
                    }]
                }
            ]
        }];

        return (
            <JqxLayout width={800} height={600} layout={layout} contextMenu={true}>
                <div data-container='Document1Panel'>
                    <div style={{ padding: 5 }}>
                        <div id="details_container" style={{ margin: 5 }} />
                    </div>
                </div>
            </JqxLayout>
        );

[HristoParticipant]

Hello silverboyir,

The error become from this row -> “type: ‘layoutGroup'” instead of type: 'documentGroup'.
Please, try on that way:

let layout = [{
            type: 'layoutGroup',
            orientation: 'horizontal',
                items: [{
                    type: 'documentGroup',
                    orientation: 'vertical',
                    width: 500,
                    items: [{
                        type: 'documentPanel',
                        title: 'New Document',
                        contentContainer: 'Document1Panel',
                        initContent: () => {
                            ReactDOM.render(
                                <div>Test</div>,
                                //<Details
                                //    data={this.props.data}
                                //    elements={this.props.elements}
                                //    url={url}
                                ///>,
                                document.getElementById('details_container')
                            );
                        }
                    }]
            }]
        }];

        return (
            <JqxLayout width={800} height={600} layout={layout} contextMenu={true}>
                <div data-container='Document1Panel'>
                    <div style={{ padding: 5 }}>
                        <div id="details_container" style={{ margin: 5 }} />
                    </div>
                </div>
            </JqxLayout>
        )

(but you should add your changes – uncomment <Details /> component)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts