jQWidgets Forums

jQuery UI Widgets Forums React jqxgrid in function component

This topic contains 3 replies, has 2 voices, and was last updated by  kashehi 2 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • jqxgrid in function component #130984

    kashehi
    Participant

    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

    jqxgrid in function component #130990

    kashehi
    Participant

    Hi again, Would you please answer my problem?
    I want functional component for grid with json call from server like above code.
    thank you

    jqxgrid in function component #130991

    Hi,

    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 USELESS

    const 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 Borislavov

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

    jqxgrid in function component #130998

    kashehi
    Participant

    Thank you so much, It helped me too much.

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

You must be logged in to reply to this topic.