jqxgrid cellclick event

[kashehiParticipant]

Hi,
I have one functional component that create grid, in that grid I have multiple image column and I want after click on each image do somthing, but I dont know how can I use
componentDidMount() {
this.refs.myGrid.on(‘cellclick’, (event) => {
// Do Something…
});
}
in functional component, Would you please help me?
this is my code:
my grid:
import { React,forwardRef } 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’;
export const MainGrid = forwardRef((props, ref) => (

<JqxGrid
ref={ref}
width={‘100%’}
height={‘100%’}
source={new jqx.dataAdapter(props.source)}
columns={props.columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
// editable={true}
selectionmode={‘singlecell’}
theme={‘energyblue’}
pagesizeoptions={[’15’, ’30’, ’50’]}
filterable={true}
autoloadstate={true}
autosavestate={true}
showfilterrow={true}
cellclick={props.cellclick}

/>
))

this is my component code that use that grid:
import { React, useRef, useEffect, useState, } from ‘react’;
// import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
// import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import { MainGrid } from ‘../components/Grid’;
import Window from ‘../components/Windows’;
import Button from ‘../components/Buttons’;
import contextApi from ‘../components/ContextApi’;
import { FetchLetters } from ‘../hooks/KartablHook’;

export default function Kartabl() {

const myGridRef = useRef(null);
const createWindowRef = useRef(null);
const deleteWindowRef = useRef(null);
const editWindowRef = useRef(null);
let [valueRow, getValue] = useState();
let [type, setType] = useState();
//getgriddata
const fetch = FetchLetters();
//creategrid
const source = {
datafields: [
{ name: ‘IsDone’, type: ‘bool’ },
{ name: ‘ClosingType’, type: ‘bool’ },
{ name: ‘IsReplicated’, type: ‘bool’ },
{ name: ‘ReferedLetterId’, type: ‘bool’ },
{ name: ‘LetterId’, type: ‘int’ },
{ name: ‘Priority’, type: ‘int’ },
{ name: ‘SendReceiveType’, type: ‘int’ },
{ name: ‘ViewDateTime’, type: ‘string’ },
{ name: ‘Number’, type: ‘string’ },
{ name: ‘FormatNumber’, type: ‘string’ },
{ name: ‘AddedDate’, type: ‘string’ },
{ name: ‘SendReceiveDate’, type: ‘string’ },
{ name: ‘ReferenceDate’, type: ‘string’ },
{ name: ‘Subject’, type: ‘string’ },
{ name: ‘SenderFullName’, type: ‘string’ },
{ name: ‘RefererFullName’, type: ‘string’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘LetterType’, type: ‘string’ },
{ name: ‘ReplicateType’, type: ‘string’ },
{ name: ‘Text’, type: ‘string’ },

],
datatype: ‘json’,
localdata: fetch

}
const imagerenderer = (row, datafield, value) => {
return ‘‘;
};
const columns = [
{ text: ‘IsDone ‘, datafield: ‘IsDone’, hidden: true },
{ text: ‘ClosingType ‘, datafield: ‘ClosingType’, hidden: true },
{ text: ‘IsReplicated ‘, datafield: ‘IsReplicated’, hidden: true },
{ text: ‘ReferedLetterId ‘, datafield: ‘ReferedLetterId’, hidden: true },
{ text: ‘LetterId ‘, datafield: ‘LetterId’, hidden: true },
{ text: ‘SendReceiveType ‘, datafield: ‘SendReceiveType’, hidden: true },
{ text: ‘ViewDateTime ‘, datafield: ‘ViewDateTime’, hidden: true },
{ text: ‘Number ‘, datafield: ‘Number’, hidden: true },
{ text: ‘متن’, datafield: ‘Text’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘تاریخ ایجاد’, datafield: ‘AddedDate’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘تاریخ ارسال’, datafield: ‘SendReceiveDate’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘دبیرخانه’, datafield: ‘Name’, width: ’10 %’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ‘نوع’, datafield: ‘LetterType’, width: ‘10%’, cellsalign: ‘right’, editable: false, hidden: true },
{ text: ”, datafield: ‘IsFavorite’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘Action’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘IsFile’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘paraph’, width: ‘4%’, cellsrenderer: imagerenderer ,filterable:false,},
{ text: ”, datafield: ‘IsViewed’, width: ‘4%’, cellsrenderer: imagerenderer,filterable:false, },
{ text: ‘شماره نامه ‘, datafield: ‘FormatNumber’,width: ’10 %’, cellsalign: ‘right’, editable: false},
{ text: ‘تاریخ ارجاع’, datafield: ‘ReferenceDate’, width: ’10 %’, cellsalign: ‘right’, editable: false },
{ text: ‘موضوع’, datafield: ‘Subject’, width: ’25 %’, cellsalign: ‘right’, editable: false },
{ text: ‘فرستنده نامه’, datafield: ‘SenderFullName’, width: ’15 %’, cellsalign: ‘right’, editable: false },
{ text: ‘ارجاع دهنده نامه’, datafield: ‘RefererFullName’, width: ’15 %’, cellsalign: ‘right’, editable: false },
{ text: ‘طبقه بندی’, datafield: ‘ReplicateType’, width: ‘5 %’, cellsalign: ‘right’, editable: false },

];

function onCreateButtonClick() {
createWindowRef.current.open()
}

function onDeleteButtonClick() {
deleteWindowRef.current.open()
}

function cancelEdit() {

setType(”);

editWindowRef.current.close()
}
function cancelDelete() {
setType(”);
deleteWindowRef.current.close()
}

return (
<div>
<contextApi.Provider value={{ createWindowRef, editWindowRef, deleteWindowRef, valueRow, type, cancelEdit, cancelDelete }} >
<MainGrid ref={myGridRef} source={source} columns={columns} />

</contextApi.Provider>

</div >

)
}

[svetoslav_borislavovParticipant]

Hi,

You can use the onCellclick event to do something if the clicked cell is a image.
Here is info about the event:
// event arguments.
var args = event.args;
// row’s bound index.
var rowBoundIndex = args.rowindex;
// row’s visible index.
var rowVisibleIndex = args.visibleindex;
// right click.
var rightclick = args.rightclick;
// original event.
var ev = args.originalEvent;
// column index.
var columnindex = args.columnindex;
// column data field.
var dataField = args.datafield;
// cell value
var value = args.value;

You can use this info to identify the row, get the data and do the necessary tasks.

Best regards,
Svetoslav Borislavov

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

[kashehiParticipant]

Hi again,Thank you for your response, but I mean how can I change this code to functional component:
componentDidMount() {
this.refs.myGrid.on(‘cellclick’, (event) => {
// Do Something…
});
}

in my previous project with jquery I wrote this code:
function CellGridKartableClick(event) {

var column = event.args.column;
rowindex = event.args.rowindex;
var DoEvent = column.cellclassname;
var datafield = column.datafield;
if (datafield == “IsFile”) {
do somthing…….
}
}
and I checked each cell that user click on it with datafield,Now I want to write this code with react
thank you

[svetoslav_borislavovParticipant]

Hi,

Just paste your function in the component:
function CellGridKartableClick(event) {

var column = event.args.column;
rowindex = event.args.rowindex;
var DoEvent = column.cellclassname;
var datafield = column.datafield;
if (datafield == “IsFile”) {
do somthing…….
}
}

This will be your grid:
<JqxGrid
…other grid settings
onCellclick={CellGridKartableClick}
></JqxGrid>

Best regards,
Svetoslav Borislavov

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

[soi12Participant]

nice

[kashehiParticipant]

Thank you, It completely works.

[Author]

Posts