Possible to move content into two separate files?

[walker1234Participant]

Let’s say I’ve the working code for two tabs here. If I want to put each of the tab’s code into separate file, then how should I proceed?

Here is the URL of working code:

https://stackblitz.com/edit/react-ts-gsdc4g

Maybe if I can something like firstTab.tsx and secondTab.tsx and import it into index.tsx?Please advise how to proceed with the help of above URL.

[HristoParticipant]

Hello walker1234,

It is a personal choice.
I think this topic will be helpful.
You could try to create two separate classes for these two tabs like this:

<JqxTabs>
    <ul>
        <li>First Tab</li>
        <li>Second Tab</li>
    </ul>
	<div>
		<FirstTab/>
	</div>
	<div>
		<SecondTab/>
	</div>
</JqxTabs>

I would like to mention that nesting of the jqxWindow in the jqxTabs is incorrect it should be separated or part of the div tag of the content.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

I would like to mention that nesting of the jqxWindow in the jqxTabs is incorrect it should be separated or part of the div tag of the content.

Thanks. I have few questions regarding not nesting of the jqxWindow in the jqxTabs. Please take a look at the code editor below:

https://stackblitz.com/edit/react-ts-drrzln?file=index.tsx

Q1.I’ve made the changes like you said and it throws an error.

Q2. Secondly, the error would disappear if I enclose tabs and window like this:

<div> // parent container
    <JqxTabs/>
    <JqxWindow />
</div>

This was done and I ran into some issues related to jQXWindow as I explained in my other thread here. Please take a look at the thread below:

https://www.jqwidgets.com/community/topic/jqxwindwo-js-throwing-an-error-h-undefined/

[HristoParticipant]

Hello walker1234,

I am sorry about that, it is better to create new widgets inside the initTabContent callback as the first example with jqxGrid.
You need to use the same approach this time for the newly created classes – FirstTab and SecondTab.
As you use the render method of the React.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

I’m little bit confused with what you are saying. Could you take a look at this post of mine and let me know why specifically I’m getting an error related to jqxWindow ?

https://www.jqwidgets.com/community/topic/jqxwindwo-js-throwing-an-error-h-undefined/

[HristoParticipant]

Hello walker1234,

You have an answer to the mentioned topic.
I would like to suggest one more option in addition to those mentioned there.
Try to disable some parts of the code that broke it.
Just use the comment on specific rows and check the example is work or not after that.
In that way, you will distinguish what exactly causes your issue.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Coming back to original question of this thread.

I separated first tab related code into firstTab.tsx as shown in the editor below.I haven’t started working on secondTab.tsx yet.

https://stackblitz.com/edit/react-ts-brhqoc

Since I’ve already moved private initGrid = () => { inside a separate file firstTab.tsx, in index.tsx where should I put {firstTab.tsx} to make sure both tabs in index.tsx works fine? I mean, even if I comment out private initGrid = () => { function from index.tsx both tabs should work fine.

Please take a look and let me know if there’s anything missing. Feel free to modify. Thanks

[HristoParticipant]

Hello walker1234,

Please, take a look at this example:
https://stackblitz.com/edit/react-ts-y7i3rr
It will be better to look into the example above.
This demonstrates creating a new class that includes jqxGrid and any other customizations.
Again in the specific place of the initTabContent callback where the new class is rendered with the render method of the React.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts