Problem trying to use the JqxDockPanel with React Typescript sample app

[nepalmerParticipant]

Hi,

I’m trying to test out the jQWidgets components and I’m trying to use the JqxDockPanel component using the standard sample React Typescript project and when I add the sample code

let myDockPanel = React.createRef<JqxDockPanel>();
.
.
.

<JqxDockPanel ref={myDockPanel} style={{ color: ‘white’ }} width={300} height={210}>
<div ref={first} data-dock=’left’ style={{ background: ‘#486974′ }}>
First Div
</div>
<div ref={second} data-dock=’top’ style={{ height: ‘100px’, background: ‘#368ba7′ }}>
Second Div
</div>
<div ref={third} data-dock=’right’ style={{ background: ‘#df7169’ }}>
Third Div
</div>
<div ref={fourth} style={{ background: ‘#a73654’ }}>
Fourth Div
</div>
</JqxDockPanel>

I get this error when I try and build/run

TS2322: Type ‘{ children: Element[]; ref: RefObject<JqxDockPanel>; style: { color: “white”; }; width: number; height: number; }’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes<JqxDockPanel> & Readonly<IDockPanelProps>’.
Property ‘children’ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes<JqxDockPanel>
& Readonly<IDockPanelProps>’.

Now React/Typescript isn’t my strongest dev environment, but I can’t seem to figure out how to resolve this. Can you help?

Thanks

[svetoslav_borislavovParticipant]

Hi,

Just use // @ts-ignore and the problem will be fixed:
<>
{/* @ts-ignore */}
<JqxDockPanel ref={myDockPanel} style={{ color: ‘white’ }} width={300} height={210}>
<div data-dock=’left’ style={{ background: ‘#486974′ }}>
First Div
</div>
<div data-dock=’top’ style={{ height: ‘100px’, background: ‘#368ba7′ }}>
Second Div
</div >
<div data-dock=’right’ style={{ background: ‘#df7169’ }}>
Third Div
</div>
<div style={{ background: ‘#a73654’ }}>
Fourth Div
</div>
</JqxDockPanel >
</>

I hope this helps!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[nepalmerParticipant]

Thanks that did the trick.

I’m running into a slightly different problem. I’m trying to go DockPanel Demo page – https://www.jqwidgets.com/react/react-dockpanel/index.htm by clicking on the link on the DockPanel page Getting started page – https://www.jqwidgets.com/react-components-documentation/documentation/jqxdockpanel/reactjs-dockpanel-getting-started.htm?search= but the demo page doesn’t work. But I feel like I’ve gotten to the demo page somehow since I got some demo code to use.

Can you tell me how to find the demo page for the DockPanel?

Thanks

[svetoslav_borislavovParticipant]

Hi,

We are very sorry, we do not have these demos, this is a fault on our side.
Meanwhile, if we can be helpful, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts