bind jqxgrid data after cellclickgrid

[kashehiParticipant]

Hi,
I have one grid on my main page and I want after click on special column that I named it “paraph” open grid in jqxwindow and bind grid data, But when I do this it show lengh error and not bind data, would you please help me?

// this is my main grid code:
import { React, useRef, useEffect, useState, } from ‘react’;
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’;
import { UpdateFavorite } from ‘../hooks/KartablHook’;
import { ViewLetter } from ‘../hooks/KartablHook’;
import { ViewLetterForm } from ‘../components/Letter/ViewLetterForm’;
import { LetterAction } from ‘../components/Letter/LetterAction’;
import ViewParaphForm from ‘../components/Letter/ViewParaphForm’;
import { FetchParaph } from ‘../hooks/ParaphHook’;
export default function Kartabl() {

const myGridRef = useRef(null);
const viewWindowRef = useRef(null);
const deleteWindowRef = useRef(null);
const editWindowRef = useRef(null);
const viewParaphWindowRef = useRef(null);
let [valueRow, getValue] = useState();
let [type, setType] = useState(”);
let [LetterCode, setLetterCode] = useState();

//getgriddata
const fetch = FetchLetters();
const updateFavorite = UpdateFavorite();
const viewLetter = ViewLetter();
const fetchParaph = FetchParaph();
//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’ },

],
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 (datafield == ‘IsFavorite’) {
getValue({

letterCode: dataRecord.LetterId,
Title: dataRecord.Subject,
LetterPostId: dataRecord.LetterPostId,
flagSendRecive: 1

})
setType(“isFavorite”)

}
if (datafield == ‘IsFile’) {

const isFile = dataRecord.IsFile

if (isFile == 1) {

getValue({

LetterCode: dataRecord.LetterId,
LetterPost_ID: dataRecord.LetterPostId,
AccountId: 4

})
setType(“isFile”)

}

}
if (datafield == ‘IsViewed’) {

const isViewed = dataRecord.IsViewed

if (isViewed != “1”) {

getValue({

LetterCode: dataRecord.LetterId,
LetterPost_ID: dataRecord.LetterPostId,
AccountId: 4

})
setType(“isViewed”)

}
else {

viewWindowRef.current.open()
}

}
if (datafield == ‘paraph’) {

const isParaph = dataRecord.paraph

if (isParaph == 1) {

getValue({
LetterCode: dataRecord.LetterId,

})
setType(“paraph”)

}

}

}

function openWindow() {

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

viewParaphWindowRef.current.open()
}
function closeWindow() {
viewWindowRef.current.close()
}
function cancelEdit() {

setType(”);

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

useEffect(() => {

if (type == “isFavorite”) {

updateFavorite(valueRow)
}
else if (type == “isFile”) {
openWindow()
viewLetter(valueRow)
}
else if (type == “isViewed”) {

viewLetter(valueRow)
}
else if (type == “paraph”) {
console.log(‘paraph’)
openParaphWindow()

}

}
, [type])

return (
<div>
<contextApi.Provider value={{ LetterCode, viewParaphWindowRef, viewWindowRef, editWindowRef, deleteWindowRef, cancelEdit, cancelDelete, valueRow, type }} >
<MainGrid ref={myGridRef} source={source} columns={columns} CellGridKartableClick={CellGridKartableClick} />
<Window ref={viewWindowRef} title={‘مشاهده’}>
<LetterAction />
</Window >
<Window ref={viewParaphWindowRef} title={‘مشاهده پاراف ها’}>
<ViewParaphForm />
</Window >
</contextApi.Provider>

</div >

)
}

this is my second grid code that should bind after previous celle grid click:
import { React, useRef, useEffect, useState, useContext } from ‘react’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.base.css’;
import ‘jqwidgets-scripts/jqwidgets/styles/jqx.energyblue.css’
import { MainGrid } from ‘../Grid’;
import Button from ‘../Buttons’;
import { FetchParaph } from ‘../../hooks/ParaphHook’;
import contextApi from ‘../ContextApi’;

export default function ViewParaphForm() {
console.log(‘viewparap’)
const myGridRef = useRef(null);

const { valueRow, type } = useContext(contextApi)

//getgriddata
const fetch = FetchParaph(valueRow);
//creategrid
const source = {
datafields: [
{ name: ‘IsSelected’, type: ‘bool’ },
{ name: ‘ParaphTitle’, type: ‘string’ },
{ name: ‘IsReplicated’, type: ‘string’ },
{ name: ‘AddedDate’, type: ‘string’ },
{ name: ‘LetterPostID’, type: ‘string’ },
{ name: ‘Sender’, type: ‘string’ },
{ name: ‘AddedTime’, type: ‘string’ },
{ name: ‘ReferenceTitle’, type: ‘string’ },
{ name: ‘RespiteDays’, type: ‘string’ },
{ name: ‘ReferenceLetterID’, type: ‘string’ },
{ name: ‘RespiteDate’, type: ‘string’ },
{ name: ‘Reciver’, type: ‘string’ },

],
datatype: ‘json’,
localdata: []

}

const columns = [

{ text: ‘LetterPostID’, datafield: ‘LetterPostID’, hidden: true },
{ text: ‘ReferenceLetterID’, datafield: ‘ReferenceLetterID’, hidden: true },
{ text: ‘IsReplicated’, datafield: ‘IsReplicated’, hidden: true },
{ text: ‘ردیف’, datafield: ‘Row’, width: ‘5%’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘نوع ارجاع’, datafield: ‘ReferenceTitle’, width: ’10 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘فرستنده’, datafield: ‘Sender’, width: ’10 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘گیرنده’, datafield: ‘Reciver’, width: ’10 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘تاریخ ارجاع’, datafield: ‘AddedDate’, width: ’15 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘زمان ارجاع’, datafield: ‘AddedTime’, width: ’15 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘مهلت پاسخ’, datafield: ‘RespiteDays’, width: ’10 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘تاریخ مهلت پاسخ’, datafield: ‘RespiteDate’, width: ’10 %’, cellsalign: ‘right’, align: ‘center’, editable: false },
{ text: ‘محتوای پاراف’, datafield: ‘ParaphTitle’, width: ‘5 %’, cellsalign: ‘right’, align: ‘center’, editable: false },

];
useEffect(() => {

if (valueRow != undefined) {

myGridRef.current.localdata = fetch;
myGridRef.current.updatebounddata();
}
}

, [valueRow])
return (
<div>
{/* <contextApi.Provider value={ createWindowRef } > */}
<MainGrid ref={myGridRef} source={source} columns={columns} />
{/* <Button onClick={onCreateButtonClick} value={‘ایجاد’}></Button> */}

{/* </contextApi.Provider> */}

</div >

)
}

and this is my custom hook:
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’;

export const FetchParaph= (addData) => {

const { viewParaphWindowRef } = useContext(contextApi)
const [Ref, SetRef] = useState(”)
let [postData, setDate] = useState();

const getParaph = useMutation(() => {
console.log(‘ppost’,postData)
return post(‘http://localhost:59521/api/LetterReferences/Select_Letter_Paraf’, postData)
},
{

onSuccess: () => {

// SetRef(viewParaphWindowRef)
// viewParaphWindowRef.current.open();
alert(” با موفقیت ثبت شد”);

},
onError: () => {
alert(“ثبت با خطا مواجه شد”);
},
onSettled: () => {
}
});

const paraphs = (addData) => {

getParaph.mutate(postData = addData);

}

return paraphs
}

[svetoslav_borislavovParticipant]

Hi,

The code that you posted has too many dependencies, please send a working demo with the error here:
support@jqwidgets.com

We are waiting for your reply.

Best regards,
Svetoslav Borislavov

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

[Author]

Posts