add eventlistener onRowclick after component is first time rendered

[kashehiParticipant]

Hi, I have grid and I wrote method for rowclick ,But now I want use this method on useeffect for after component is first time rendered it run,
But better is to say you how can I add eventlistener onRowclick after component is first time rendered
Would you please help me?
this is my code
import {React, useRef, useEffect, useState} from ‘react’
import {MainGrid} from ‘../components/Grid’
import Window from ‘../components/Windows’
import contextApi from ‘../components/ContextApi’
import {FetchLetters} from ‘../hooks/KartablHook’
import {LetterAction} from ‘../components/Letter/LetterAction’
import ViewParaphForm from ‘../components/Letter/ViewParaphForm’
import JqxMenu from ‘../components/JqxMenu’
import {MenuItems} from ‘../components/JqxMenu’
export default function Kartabl() {
const myGridRef = useRef(null)
const contextMenu = useRef(null)
const viewWindowRef = useRef(null)
const deleteWindowRef = useRef(null)
const editWindowRef = useRef(null)
const viewParaphWindowRef = useRef(null)
const [menuPostion, setMenuPosition] = useState(”)
let [valueRow, getValue] = useState()
let [type, setType] = useState(”)
let [res, setResponse] = useState(”)

let isViewed = useState()

//getgriddata
const fetch = FetchLetters()

//creategrid
const source = {
datafields: [
{name: ‘IsViewed’, type: ‘string’},
{name: ‘IsDone’, type: ‘bool’},
{name: ‘ClosingType’, type: ‘bool’},
{name: ‘IsReplicated’, type: ‘bool’},
{name: ‘ReferedLetterId’, type: ‘bool’},
{name: ‘LetterId’, type: ‘int’},
{name: ‘LetterPostId’, 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’},
{name: ‘IsFile’, type: ‘string’},
{name: ‘paraph’, type: ‘string’},
{name: ‘IsFavorite’, type: ‘string’},
{name: ‘ReceiverFullName’, type: ‘string’},
],
datatype: ‘json’,
localdata: fetch,
}
const favoriterenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)

if (dataRecord.IsFavorite == ‘true’) {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks-fill” title=”علامت گذاری شده” style=”font-size: 1.6rem; color: #E49B0F;line-height:normal;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks” title=”علامت گذاری نشده” style=”font-size: 1.6rem; color: #3699ff;line-height:normal;”></i></div>’
}
}
const filerenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)
if (dataRecord.IsFile == 1) {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-paperclip” title=”پیوست دارد” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px” title=”پیوست ندارد”‘
}
}

const viewerenderer = function (row, datafield, value) {
const dataRecord = myGridRef.current.getrowdata(row)
// اگر نامه مشاهده شده باشد
if (value == ‘1’ && dataRecord.LetterType == ‘داخلی’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”داخلی’ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color:#ff8229 ;”></i></div>’
)
} else if (value == ‘1’ && dataRecord.LetterType == ‘وارده’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”وارده ‘ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
)
} else if (value == ‘1’ && dataRecord.LetterType == ‘صادره’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”صادره ‘ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
)
}
// اگر نامه مشاهده نشده باشد
if (value == ‘0’ && dataRecord.LetterType == ‘داخلی’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”داخلی ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #ff8229;”></i></div>’
} else if (value == ‘0’ && dataRecord.LetterType == ‘وارده’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”وارده ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
} else if (value == ‘0’ && dataRecord.LetterType == ‘صادره’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”صادره ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
}
}

const actionrenderer = (row, datafield, value) => {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-menu-down” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
}
// در صورتی که نامه پاراف داشته باشد
const paraphrenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)

if (dataRecord.paraph != 0) {
return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف دارد”><i class=”bi-card-list” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف ندارد”‘
}
}

const columns = [
{text: ‘LetterPostId ‘, datafield: ‘LetterPostId’, hidden: true},
{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: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘تاریخ ارسال’,
datafield: ‘SendReceiveDate’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘دبیرخانه’,
datafield: ‘Name’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘نوع’,
datafield: ‘LetterType’,
width: ‘10%’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ”,
datafield: ‘Action’,
width: ‘4%’,
cellsrenderer: actionrenderer,
filterable: false,
cellsalign: ‘center’,
align: ‘center’,
},
{
text: ”,
datafield: ‘IsFavorite’,
width: ‘4%’,
cellsrenderer: favoriterenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘paraph’,
width: ‘4%’,
cellsrenderer: paraphrenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘IsFile’,
width: ‘4%’,
cellsrenderer: filerenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘IsViewed’,
width: ‘4%’,
cellsrenderer: viewerenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ‘شماره نامه ‘,
datafield: ‘FormatNumber’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
align: ‘center’,
},
{
text: ‘تاریخ ارجاع’,
datafield: ‘ReferenceDate’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
align: ‘center’,
},
{
text: ‘موضوع’,
datafield: ‘Subject’,
width: ’25 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘فرستنده نامه’,
datafield: ‘SenderFullName’,
width: ’15 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘ارجاع دهنده نامه’,
datafield: ‘RefererFullName’,
width: ’15 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘طبقه بندی’,
datafield: ‘ReplicateType’,
width: ‘5 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
]

function CellGridKartableClick(event, row) {
setType(”)

var column = event.args.column
var rowindex = event.args.rowindex
// var DoEvent = column.cellclassname;
var datafield = column.datafield
const dataRecord = myGridRef.current.getrowdata(rowindex)

if (event.args.rightclick || datafield == ‘Action’) {
setType(‘actionMenu’)
setMenuPosition({
clientX: event.args.originalEvent.clientX,
clientY: event.args.originalEvent.clientY,
})
}
if (datafield == ‘IsFavorite’) {
setType(‘isFavorite’)
getValue({
letterCode: dataRecord.LetterId,
Title: dataRecord.Subject,
LetterPostId: dataRecord.LetterPostId,
flagSendRecive: 1,
})
}
if (datafield == ‘IsFile’) {
const isFile = dataRecord.IsFile

if (isFile == 1) {
getValue({
LetterCode: dataRecord.LetterId,
LetterPostID: dataRecord.LetterPostId,
AccountId: 4,
})
setType(‘isFile’)
}
}
if (datafield == ‘IsViewed’) {
isViewed = dataRecord.IsViewed

setType(‘isViewed’)

getValue({
LetterCode: dataRecord.LetterId,
LetterPostID: dataRecord.LetterPostId,
AccountId: 4,
IsView: dataRecord.IsViewed,
Number: dataRecord.Number,
LetterViewCode: dataRecord.FormatNumber,
Date1: dataRecord.AddedDate,
ReciveDate: dataRecord.ReferenceDate,
Lettre_Post_Sender: dataRecord.SenderFullName,
Lettre_Post_Reciver: dataRecord.ReceiverFullName,
Letter_Type: dataRecord.ReplicateType,
Letter_Priority: dataRecord.Priority,
Letter_SendReceiveType: dataRecord.SendReceiveType,
Subject: dataRecord.Subject,
Text: dataRecord.Text,
})
}
if (datafield == ‘paraph’) {
const isParaph = dataRecord.paraph

if (isParaph == 1) {
getValue({
LetterCode: dataRecord.LetterId,
})
setType(‘paraph’)
}
}
}

function openWindow() {
viewWindowRef.current.open()
}

function closeWindow() {
setType(”)
viewWindowRef.current.close()
}
function cancelEdit() {
setType(”)

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

return (
<div>
<contextApi.Provider
value={{
isViewed,
menuPostion,
contextMenu,
res,
setResponse,
openWindow,
viewParaphWindowRef,
viewWindowRef,
valueRow,
type,
}}
>
<MainGrid
ref={myGridRef}
source={source}
columns={columns}
CellGridKartableClick={CellGridKartableClick}
/>
<Window ref={viewWindowRef} title={‘مشاهده’}>
<LetterAction />
</Window>
{/* <Window ref={viewParaphWindowRef} title={‘مشاهده پاراف ها’}>
<ViewParaphForm />
</Window > */}
<JqxMenu ref={contextMenu}>
<MenuItems />
</JqxMenu>
</contextApi.Provider>
</div>
)
}

[kashehiParticipant]

Hi,
would you please help me, I am waiting for your answer.
thank you

[ivanpeevskiParticipant]

Hi kashehi,

There are two possible approaches for achieving that:
1. during the render, set CellGridKartableClick to be an empty function. Then inside of useEffect, you can set CellGridKartableClick to the actual function you want to use.
2. Create a boolean variable , for example “rendered = false”. Then inside useEffect, set “rendered = true”. And finally, at the top of the CellGridKartableClick function add a check for rendered and stop the function if it is false. For example:
if(!this.rendered){return;}

Depending on your use case, there might also be other approaches

Best regards,
Ivan Peevski
jQWidgets Team
https://www.jqwidgets.com/

[kashehiParticipant]

Hi,
Thank you for your help.
But I have another problem and not solved with your help.
I create grid on my page and I want with first click post some Info of that row to API ,But with first click it send value=0 to API instead of real value,
this is my code:
below code is that component I create grid on it:
import {React, useRef, useEffect, useState} from ‘react’
import {MainGrid} from ‘../components/Grid’
import Window from ‘../components/Windows’
import contextApi from ‘../components/ContextApi’
import {FetchLetters} from ‘../hooks/KartablHook’
import {LetterAction} from ‘../components/Letter/LetterAction’
import ViewParaphForm from ‘../components/Letter/ViewParaphForm’
import JqxMenu from ‘../components/JqxMenu’
import {MenuItems} from ‘../components/JqxMenu’
export default function Kartabl() {
const myGridRef = useRef(null)
const contextMenu = useRef(null)
const viewWindowRef = useRef(null)
const deleteWindowRef = useRef(null)
const editWindowRef = useRef(null)
const viewParaphWindowRef = useRef(null)
const [menuPostion, setMenuPosition] = useState(”)
let [valueRow, getValue] = useState({
LetterCode: 5365,
LetterPostID: 22872,
})
let [type, setType] = useState(”)
let [res, setResponse] = useState(”)
let [rendered, setRendered] = useState(false)
let isViewed = useState()

//getgriddata
const fetch = FetchLetters()

//creategrid
const source = {
datafields: [
{name: ‘IsViewed’, type: ‘string’},
{name: ‘IsDone’, type: ‘bool’},
{name: ‘ClosingType’, type: ‘bool’},
{name: ‘IsReplicated’, type: ‘bool’},
{name: ‘ReferedLetterId’, type: ‘bool’},
{name: ‘LetterId’, type: ‘int’},
{name: ‘LetterPostId’, 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’},
{name: ‘IsFile’, type: ‘string’},
{name: ‘paraph’, type: ‘string’},
{name: ‘IsFavorite’, type: ‘string’},
{name: ‘ReceiverFullName’, type: ‘string’},
],
datatype: ‘json’,
localdata: fetch,
}
const favoriterenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)

if (dataRecord.IsFavorite == ‘true’) {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks-fill” title=”علامت گذاری شده” style=”font-size: 1.6rem; color: #E49B0F;line-height:normal;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-bookmarks” title=”علامت گذاری نشده” style=”font-size: 1.6rem; color: #3699ff;line-height:normal;”></i></div>’
}
}
const filerenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)
if (dataRecord.IsFile == 1) {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-paperclip” title=”پیوست دارد” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px” title=”پیوست ندارد”‘
}
}

const viewerenderer = function (row, datafield, value) {
const dataRecord = myGridRef.current.getrowdata(row)
// اگر نامه مشاهده شده باشد
if (value == ‘1’ && dataRecord.LetterType == ‘داخلی’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”داخلی’ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color:#ff8229 ;”></i></div>’
)
} else if (value == ‘1’ && dataRecord.LetterType == ‘وارده’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”وارده ‘ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
)
} else if (value == ‘1’ && dataRecord.LetterType == ‘صادره’) {
return (
‘<div style=”text-align:center;padding-top:5px” title=”صادره ‘ +
dataRecord.ViewDateTime +
‘” ><i class=”bi-envelope-open” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
)
}
// اگر نامه مشاهده نشده باشد
if (value == ‘0’ && dataRecord.LetterType == ‘داخلی’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”داخلی ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #ff8229;”></i></div>’
} else if (value == ‘0’ && dataRecord.LetterType == ‘وارده’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”وارده ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #C70039;”></i></div>’
} else if (value == ‘0’ && dataRecord.LetterType == ‘صادره’) {
return ‘<div style=”text-align:center;padding-top:5px” title=”صادره ” ><i class=”bi-envelope” style=”font-size: 1.6rem; color: #B4C424;”></i></div>’
}
}

const actionrenderer = (row, datafield, value) => {
return ‘<div style=”text-align:center;padding-top:5px”><i class=”bi-menu-down” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
}
// در صورتی که نامه پاراف داشته باشد
const paraphrenderer = (row, datafield, value) => {
const dataRecord = myGridRef.current.getrowdata(row)

if (dataRecord.paraph != 0) {
return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف دارد”><i class=”bi-card-list” style=”font-size: 1.6rem; color: #3699ff;”></i></div>’
} else {
return ‘<div style=”text-align:center;padding-top:5px” title=”پاراف ندارد”‘
}
}

const columns = [
{text: ‘LetterPostId ‘, datafield: ‘LetterPostId’, hidden: true},
{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: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘تاریخ ارسال’,
datafield: ‘SendReceiveDate’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘دبیرخانه’,
datafield: ‘Name’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ‘نوع’,
datafield: ‘LetterType’,
width: ‘10%’,
cellsalign: ‘center’,
editable: false,
hidden: true,
},
{
text: ”,
datafield: ‘Action’,
width: ‘4%’,
cellsrenderer: actionrenderer,
filterable: false,
cellsalign: ‘center’,
align: ‘center’,
},
{
text: ”,
datafield: ‘IsFavorite’,
width: ‘4%’,
cellsrenderer: favoriterenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘paraph’,
width: ‘4%’,
cellsrenderer: paraphrenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘IsFile’,
width: ‘4%’,
cellsrenderer: filerenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ”,
datafield: ‘IsViewed’,
width: ‘4%’,
cellsrenderer: viewerenderer,
filterable: false,
cellsalign: ‘center’,
},
{
text: ‘شماره نامه ‘,
datafield: ‘FormatNumber’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
align: ‘center’,
},
{
text: ‘تاریخ ارجاع’,
datafield: ‘ReferenceDate’,
width: ’10 %’,
cellsalign: ‘center’,
editable: false,
align: ‘center’,
},
{
text: ‘موضوع’,
datafield: ‘Subject’,
width: ’25 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘فرستنده نامه’,
datafield: ‘SenderFullName’,
width: ’15 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘ارجاع دهنده نامه’,
datafield: ‘RefererFullName’,
width: ’15 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
{
text: ‘طبقه بندی’,
datafield: ‘ReplicateType’,
width: ‘5 %’,
cellsalign: ‘right’,
editable: false,
align: ‘center’,
},
]

function CellGridKartableClick(event, row) {
if (rendered == false) {
return
}
setType(”)

var column = event.args.column
var rowindex = event.args.rowindex
// var DoEvent = column.cellclassname;
var datafield = column.datafield
const dataRecord = myGridRef.current.getrowdata(rowindex)

if (event.args.rightclick || datafield == ‘Action’) {
setType(‘actionMenu’)
setMenuPosition({
clientX: event.args.originalEvent.clientX,
clientY: event.args.originalEvent.clientY,
})
}
if (datafield == ‘IsFavorite’) {
setType(‘isFavorite’)
getValue({
letterCode: dataRecord.LetterId,
Title: dataRecord.Subject,
LetterPostId: dataRecord.LetterPostId,
flagSendRecive: 1,
})
}
if (datafield == ‘IsFile’) {
const isFile = dataRecord.IsFile

if (isFile == 1) {
getValue({
LetterCode: dataRecord.LetterId,
LetterPostID: dataRecord.LetterPostId,
AccountId: 4,
})
setType(‘isFile’)
}
}
if (datafield == ‘IsViewed’) {
isViewed = dataRecord.IsViewed

setType(‘isViewed’)

getValue({
LetterCode: dataRecord.LetterId,
LetterPostID: dataRecord.LetterPostId,
AccountId: 4,
IsView: dataRecord.IsViewed,
Number: dataRecord.Number,
LetterViewCode: dataRecord.FormatNumber,
Date1: dataRecord.AddedDate,
ReciveDate: dataRecord.ReferenceDate,
Lettre_Post_Sender: dataRecord.SenderFullName,
Lettre_Post_Reciver: dataRecord.ReceiverFullName,
Letter_Type: dataRecord.ReplicateType,
Letter_Priority: dataRecord.Priority,
Letter_SendReceiveType: dataRecord.SendReceiveType,
Subject: dataRecord.Subject,
Text: dataRecord.Text,
})
console.log(‘getval’, valueRow)
}
if (datafield == ‘paraph’) {
const isParaph = dataRecord.paraph

if (isParaph == 1) {
getValue({
LetterCode: dataRecord.LetterId,
})
setType(‘paraph’)
}
}
}

function openWindow() {
viewWindowRef.current.open()
}

function closeWindow() {
setType(”)
viewWindowRef.current.close()
}
function cancelEdit() {
setType(”)

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

useEffect(() => {
setRendered(true)
})

return (
<div>
<contextApi.Provider
value={{
isViewed,
menuPostion,
contextMenu,
res,
setResponse,
openWindow,
viewParaphWindowRef,
viewWindowRef,
valueRow,
type,
}}
>
<MainGrid
ref={myGridRef}
source={source}
columns={columns}
CellGridKartableClick={CellGridKartableClick}
/>
<Window ref={viewWindowRef} title={‘مشاهده’}>
<LetterAction />
</Window>
{/* <Window ref={viewParaphWindowRef} title={‘مشاهده پاراف ها’}>
<ViewParaphForm />
</Window > */}
<JqxMenu ref={contextMenu}>
<MenuItems />
</JqxMenu>
</contextApi.Provider>
</div>
)
}

this code is my code that I post data to custom hook:
import {useContext, useEffect, useState} from ‘react’
import {ViewLetter} from ‘../../hooks/KartablHook’
import {ViewLetterForm} from ‘./ViewLetterForm’
import {useFetchImageLetter} from ‘../../hooks/KartablHook’
import contextApi from ‘../ContextApi’
import {UpdateFavorite} from ‘../../hooks/KartablHook’
import {FetchAttachFileLetter} from ‘../../hooks/KartablHook’
export const LetterAction = () => {
const viewLetter = ViewLetter()
const {isViewed, valueRow, type, viewWindowRef, contextMenu, menuPostion} = useContext(contextApi)
console.log(‘valll’, valueRow)
const [valueInfo, setValueInfo] = useState(valueRow)
const {mutateAsync: fetchImageLetter, data} = useFetchImageLetter(valueInfo)

const [dataInfo, setData] = useState(data)

const updateFavorite = UpdateFavorite()
const fetchAttachFileLetter = FetchAttachFileLetter()
// برای اینکه در ابتدای لود ممکن است مقدار متغییر undefiend باشد
//این کد نوشته شده است
useEffect(() => {
if (data !== undefined && dataInfo === undefined) {
setData(data)
}
}, [data])

useEffect(() => {
if (type === ‘isFavorite’) {
updateFavorite(valueRow)
}

if (type === ‘actionMenu’) {
const scrollTop = window.scrollY
const scrollLeft = window.scrollX

contextMenu.current.open(
parseInt(menuPostion.clientX, 10) + 5 + scrollLeft,
parseInt(menuPostion.clientY, 10) + 5 + scrollTop
)
}
}, [valueRow, type])

useEffect(() => {
if (type === ‘isViewed’ || type === ‘isFile’) {
console.log(‘valueeffect’, valueRow)
// if (valueRow !== undefined && valueInfo === undefined) {
console.log(‘valueeffect’, valueRow)
setValueInfo(valueRow)
// viewLetter(valueRow)
fetchImageLetter()
// }
viewWindowRef.current.open()
// if (isViewed != 1) {
// viewLetter(valueRow)
// }

// fetchAttachFileLetter(valueRow)
}
}, [type, valueRow])
return <ViewLetterForm data={dataInfo} />
}

this is my custom hook code:
import {React, useRef, useEffect, useState, createContext, useContext} from ‘react’
import {useQuery, useMutation, QueryClient, useQueryClient} from ‘react-query’
import {get, post} from ‘../components/Fetch’
import contextApi from ‘../components/ContextApi’
import {AddCompany} from ‘../components/Company/AddCompany’
import {ViewLetterForm} from ‘../components/Letter/ViewLetterForm’

export const FetchLetters = () => {
const {data} = useQuery(‘Letters’, () => {
return get(‘http://localhost:59521/api/Letters/SelectLetterForKartable’)
})

return data
}

export const UpdateFavorite = (addData) => {
let [postData, setDate] = useState()

const updateFavorite = useMutation(
() => {
return post(‘http://localhost:59521/api/Favorites/UpdateFavorite’, postData)
},
{
onSuccess: () => {
alert(‘ با موفقیت ثبت شد’)
},
onError: () => {
alert(‘ثبت با خطا مواجه شد’)
},
onSettled: () => {},
}
)

const favoriteRow = (addData) => {
updateFavorite.mutate((postData = addData))
}

return favoriteRow
}

export const ViewLetter = (addData) => {
const {openWindow, viewWindowRef, onViewButtonClick, editWindowRef, deleteWindowRef, cancelEdit} =
useContext(contextApi)
const [Ref, SetRef] = useState(”)
let [postData, setDate] = useState()

const viewLetter = useMutation(
() => {
return post(‘http://localhost:59521/api/LetterViews/ViewLetter’, postData)
},
{
onSuccess: () => {},
onError: () => {
alert(‘مشاهده نامه با خطا مواجه شد’)
},
onSettled: () => {},
}
)

const viewFlag = (addData) => {
viewLetter.mutate((postData = addData))
}

return viewFlag
}

export const useFetchImageLetter = (addData) => {
// let [postData, setDate] = useState()
console.log(‘setvaluehook’, addData)
// if (addData !== undefined) {
const fetchImageLetter = useMutation(
() => {
return post(‘http://localhost:59521/api/Files/SelectImageLetterByID_Html’, addData)
},

{
onSuccess: (response) => {
console.log(‘res’, response)
const result = response.split(‘;’)

// if (result[0] != ”) {
// setResponse({
// path: result[0] + ‘.pdf’,
// desc: result[2],
// })
// }
},
onError: () => {
// alert(“مشاهده نامه با خطا مواجه شد”);
},
onSettled: () => {},
}
)
return fetchImageLetter
// }
}

export const FetchAttachFileLetter = (addData) => {
const {res, setResponse} = useContext(contextApi)
let [postData, setDate] = useState()
const [state, setstate] = useState()

const fetchAtatchFileLetter = useMutation(
() => {
return post(‘http://localhost:59521/api/Files/SelectFilesByID’, postData)
},
{
onSuccess: (response) => {
const strUrl =
‘http://’ + window.location.hostname + ‘:’ + window.location.port + ‘/UploadFiles/’
if (response != ”) {
let loopData = []
const data = response.split(‘<‘)

for (var i = 0; i < data.length; i++) {
var res = data[i].split(‘;’)
var Path = res[0]
var lowerCaseValue = res[1].toString().toLowerCase()
var DateTimeInsert = res[2]
var filename = res[3]
var Type = lowerCaseValue
// var src = “../../images/IconAtachment/unknownFile.png”;
var str = ”
var name = Math.random()
var IdLetterRefrence = res[4]
var IdLetter = res[5]
var Size = res[6]
var LetterPostId = res[7]
loopData.push(strUrl + Path + ‘.’ + Type)
// loopData +=

[kashehiParticipant]

Would you please help me???
thanks

[svetoslav_borislavovParticipant]

Hi,

Can you please send this to support@jqwidgets.com with an example demo?

Best regards,
Svetoslav Borislavov

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

• This reply was modified 3 weeks, 1 day ago by  svetoslav_borislavov.

[Author]

Posts