jQuery UI Widgets Forums React add eventlistener onRowclick after component is first time rendered

This topic contains 5 replies, has 3 voices, and was last updated by  svetoslav_borislavov 1 year, 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • kashehi
    Participant

    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>
    )
    }


    kashehi
    Participant

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


    ivanpeevski
    Participant

    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/


    kashehi
    Participant

    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 +=

  • ${strUrl + Path + ‘.’ + Type}
  • }

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

    const fetchFile = (addData) => {
    fetchAtatchFileLetter.mutate((postData = addData))
    }

    return fetchFile
    }

    woul you please help me what should I do?
    Thank you


kashehi
Participant

Would you please help me???
thanks

Hi,

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

Best regards,
Svetoslav Borislavov

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

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

You must be logged in to reply to this topic.