jqxgrid inside jqxtab

[brunestoParticipant]

Hello, I am trying to run a jqxgrid inside a jqxtab with react, but the jqxgrid does not fill the tab content
I have set the width to 100% and height to 100% of the tab.
The solutions that I see in the forum mention defining the tab’s content inside initTabContent. But how to fit this within the react component lifecycle?
Thanks

[HristoParticipant]

Hello brunesto,

Could I ask you do you have any error message?

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[brunestoParticipant]

No, there is no error. The jqxgrid gets displayed, but it does not occupy fully the tab content.
What I am not able to achieve, is how to declare initTabContent (or something that would achieve the same functionality) so that it gets called within the react component lifecycle.
Thanks

[HristoParticipant]

Hello brunesto,

I try this scenario and looks fine.
You could set border: none; to the Grid <div> tag.
Please, take a look at this example:

import React from 'react';
import ReactDOM from 'react-dom';

import JqxGrid from '../jqwidgets-react/react_jqxgrid.js';
import JqxTabs from '../jqwidgets-react/react_jqxtabs.js';

class App extends React.Component {
	render () {
		let data = generatedata(50);
		let tabsHTML = 

&ltul>
<li style=”margin-left: 30px;”>Tab
&ltli>The Second Grid&lt/li>
&lt/ul>
<div>
The First Tab – Content
</div>
<div>
<div id=”jqxgrid” style=”border: none;”></div>
<div>
`;
let initTabContentCallback = () => {
let data = generatedata(200);
let source =
{
localdata: data,
datatype: “array”,
updaterow: (rowid, rowdata, commit) => {
commit(true);
},
datafields:
[
{ name: ‘firstname’, type: ‘string’ },
{ name: ‘lastname’, type: ‘string’ },
{ name: ‘productname’, type: ‘string’ },
{ name: ‘available’, type: ‘bool’ },
{ name: ‘quantity’, type: ‘number’ },
{ name: ‘price’, type: ‘number’ },
{ name: ‘date’, type: ‘date’ }
]
};
let dataAdapter = new $.jqx.dataAdapter(source);
let columns =
[
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’ },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’ },
{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’ },
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 }
];

$(‘#jqxgrid’).jqxGrid({ source: source, width: ‘100%’, height: ‘100%’, columns: columns });
};

return (
<div>
<JqxTabs ref=’myTabs’ template={tabsHTML}
initTabContent={initTabContentCallback}
width={‘90%’} height={600} position={‘top’}
/>
</div>
)
}
}

ReactDOM.render(<App />, document.getElementById(‘app’));
`
(app.js)

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[brunestoParticipant]

Thanks Hristo,
And is it possible to instanciate the grid using React component (ie. <JqxGrid source={dataAdapter} page … >)
instead of using javascript (ie $(‘#jqxgrid’).jqxGrid({ source: … )?

[HristoParticipant]

Hello brunesto,

Please, take a look at this example:

import React from 'react';
import ReactDOM from 'react-dom';

import JqxGrid from '../jqwidgets-react/react_jqxgrid.js';
import JqxTabs from '../jqwidgets-react/react_jqxtabs.js';

class App extends React.Component {
	
	render () {

		let data = generatedata(200);
		let source =
		{
			localdata: data,
			datatype: "array",
			datafields:
			[
				{ name: 'firstname', type: 'string' },
				{ name: 'lastname', type: 'string' },
				{ name: 'productname', type: 'string' },
				{ name: 'available', type: 'bool' }
			]
		};
		let dataAdapter = new $.jqx.dataAdapter(source);
		let columns =
		[
			{ text: 'First Name', columntype: 'textbox', datafield: 'firstname' },
			{ text: 'Last Name', datafield: 'lastname', columntype: 'textbox' },
			{ text: 'Product', columntype: 'dropdownlist', datafield: 'productname' },
			{ text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 }
		];
		return (			
			<JqxTabs width={'100%'} height={600} position={'top'}>
				
				<ul>
					<li>Grid</li>
				</ul>
							
							
				<div>
				
					<JqxGrid style={{ border: 'none' }}
						width={'100%'} height={'100%'} 
						source={dataAdapter} columns={columns}					
					/>
					
				</div>						
						
			</JqxTabs>

		)
	}
}

ReactDOM.render(<App />, document.getElementById('app'));

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts