jQuery UI Widgets Forums React Jqx layout

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 3 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Jqx layout Posts
  • Jqx layout #94259

    silverboyir
    Participant

    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>
            );
    Jqx layout #94286

    Hristo
    Participant

    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

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.