jQWidgets Forums

jQuery UI Widgets Forums React image on grid not shown

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • image on grid not shown #130949

    kashehi
    Participant

    Hi, I have a component with grid like this code:
    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 ‘../components/companydata’

    export 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>

    );
    }
    }

    on two column I want show image, that was my code and I do not know why image is not show, would you please help me why is my problem?
    thanks

    image on grid not shown #130954

    Hi,

    Could you, please check your path to the image?
    Here is an example of having an image column: https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-imagecolumn.htm
    Your code is correct as I can see, check your path to the image.
    If the problem still exists, please send us a demo project here support@jqwidgets.com

    Best regards,
    Svetoslav Borislavov

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

    image on grid not shown #130967

    w88indi20
    Participant

    hok kok lok mok

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

You must be logged in to reply to this topic.