jQWidgets Forums
jQuery UI Widgets › Forums › React › jqxgrid in function component
Tagged: #jaxgrid functional component
This topic contains 3 replies, has 2 voices, and was last updated by kashehi 2 years, 5 months ago.
-
Author
-
Hi, I have company.js file and use jqxgrid class component, It works completly , But now I want use it as functional component but I have problem with binddata, Woul you please help me and convert this code to functional component?
import React, { useRef } from “react”;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import JqxGrid, {
IGridProps,
jqx,
} from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
import { GetCompanies } from ‘../data/companydata’class BindCompany extends React.PureComponent {
myGrid = React.createRef(JqxGrid);
constructor(props) {
super(props);const source = {
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘AdminFullName’, type: ‘string’ },
{ name: ‘edit’, type: ‘bool’ },
{ name: ‘delete’, type: ‘bool’ },],
datatype: “json”,};
const editrenderer = (row, datafield, value) => {
return ‘‘;
};
const delrenderer = (row, datafield, value) => {
return ‘‘;
};
this.state = {
columns: [
{ text: “کد “, datafield: “Id”, hidden: true },
{ text: “نام شرکت”, datafield: “Name”, width: ‘40%’, cellsalign: ‘right’ },
{ text: “مدیر عامل”, datafield: “AdminFullName”, width: ‘40%’, cellsalign: ‘right’ },
{ text: “ویرایش”, datafield: “edit”, width: ‘10%’, cellsalign: ‘center’, cellsrenderer: editrenderer, editable: false },
{ text: “حذف”, datafield: “delete”, width: ‘10%’, cellsalign: ‘center’, cellsrenderer: editrenderer, editable: false },
],
dataSource: source,
source: new jqx.dataAdapter(source),};
}
updateGrid = () => {
GetCompanies().then(data => {
this.state.dataSource.localdata = data;
this.myGrid.current.updatebounddata(‘sort’);
})
}componentDidMount() {
GetCompanies().then(data => {
this.state.dataSource.localdata = data;
this.myGrid.current.updatebounddata(‘sort’);
})
}render() {
return (
<div><JqxGrid ref={this.myGrid}
width={‘100%’}
height={‘100%’}
source={this.state.source}
columns={this.state.columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
editable={true}
onCellvaluechanged={this.onCellvaluechanged}
selectionmode={‘singlecell’}
theme={‘energyblue’}
/></div>
);
}
}export default BindCompany;
thank you
Hi again, Would you please answer my problem?
I want functional component for grid with json call from server like above code.
thank youHi,
Sorry for the delay, we don’t work on the weekend
Here is your Functional Component:import { useRef, useEffect, useState } from “react”;
import “jqwidgets-scripts/jqwidgets/styles/jqx.base.css”;
import “jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css”
import JqxGrid, { jqx } from “jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid”;
import { GetCompanies } from “../components/companydata”export default function BindCompany() {
// const myGrid = useRef(null);
const [source, setSource] = useState({
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘AdminFullName’, type: ‘string’ },
{ name: ‘edit’, type: ‘bool’ },
{ name: ‘delete’, type: ‘bool’ }
],
datatype: ‘json’
});useEffect(() => { updateGrid() }, []);
// useEffect(() => myGrid.current.updatebounddata(“sort”), [source]);
// THE ABOVE LINE IS USELESS BECAUSE WHEN THE COMPONENTS’ STATE UPDATES IT WILL TRIGGER A RERENDER
// THIS ALSO MAKES THE myGrid USELESSconst columns = [
{ text: “کد “, datafield: “Id”, hidden: true },
{ text: “نام شرکت”, datafield: “Name”, width: “40%”, cellsalign: “right” },
{ text: “مدیر عامل”, datafield: “AdminFullName”, width: “40%”, cellsalign: “right” },
{ text: “ویرایش”, datafield: “edit”, width: “10%”, cellsalign: “center”, cellsrenderer: editrenderer, editable: false },
{ text: “حذف”, datafield: “delete”, width: “10%”, cellsalign: “center”, cellsrenderer: delrenderer, editable: false },
];function editrenderer(row, datafield, value) {
return ‘‘;
};function delrenderer(row, datafield, value) {
return ‘‘;
};function updateGrid() {
GetCompanies()
.then(data =>
setSource(source => ({
…source,
localdata: data
}))
)}
return (
<div>
<JqxGrid
// ref={myGrid}
width={“100%”}
height={“100%”}
source={new jqx.dataAdapter(source)}
columns={columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
editable={true}
selectionmode={“singlecell”}
theme={“energyblue”}
/>
</div>
)
}Best regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/Thank you so much, It helped me too much.
-
AuthorPosts
You must be logged in to reply to this topic.