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.
-
Authorimage on grid not shown Posts
-
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?
thanksHi,
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.comBest regards,
Svetoslav BorislavovjQWidgets Team
https://www.jqwidgets.com/hok kok lok mok
-
AuthorPosts
You must be logged in to reply to this topic.