[kashehiParticipant]

I found my problem, I should use
datafields: [{name: ‘id‘}, {name: ‘parentid‘}
not datafields: [{name: ‘Id‘}, {name: ‘ParentId‘}

[kashehiParticipant]

It is better to say How can I get return id from json not id that return from element of tree?

Thank You

[kashehiParticipant]

Thank you,
I did that but my problem was:
the object that return just lable and automated id,I need all of property related to item, as the same as json fields
like:
‘id’: ’10’,
‘parentid’: ‘6’,
‘text’: ‘Cappuccino’,
‘value’: ‘$2.3’
thank you

[kashehiParticipant]

Hi,Thank you for response, But my problem is that when I click on tree item and “onselect” method is run
const row = args.row;
is undefiend, I dont know Why is happened,Would you please help me?
thank you

[kashehiParticipant]

Would you please help me???
thanks

[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]

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

[kashehiParticipant]

Thank you, It completely works.

[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

[kashehiParticipant]

I correct my code but the problem is that all nodes on tree are in the same level ad parent not in diffrent level of parent and child
would you please tell me what is my problem?

export function PostTree() {

const [source, setSource] = useState({
datafields: [
{ name: ‘id’,map: ‘Id’},
{ name: ‘parentid’ },
{ name: ‘Title’ },

],
id: ‘id’,
datatype: ‘json’,

});

const dataAdapter = new jqx.dataAdapter(source, { autoBind: true });
const records = dataAdapter.getRecordsHierarchy(‘id’, ‘ParentId’, ‘items’, [{ name: ‘Title’, map: ‘label’ }]);

useEffect(() => {
BindTreeSemat()

},[]);

//bindtree
function BindTreeSemat() {
fetch(‘http://localhost:59521/api/Charts/SelectCompany_Charts’)
.then((response) => {
if (response.ok) {
const data = response.json()

.then(data =>
setSource(source => ({
…source,
localdata: data
})))
console.log(setSource)
} else {
throw Error(response.status);
}
})

}

return (
<JqxTree
source={records}

/>
);

}

[kashehiParticipant]

Hi,
I found my problem, It was because of my useEffect hook.

[kashehiParticipant]

Hi, Thank you for help.
I did it and it works but now I have another problem:
When my grid render and I want click on edit or delete button I should click multiple on button to open jqwind and edit fields,
I dont Know why it happens, would you please help me?
This is my code:
import { React, useRef, useEffect, useState } 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’;
import JqxInput from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxinput’;
import JqxWindow from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow’;
import JqxButton from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons’;
export default function BindCompany() {

const myGridRef = useRef(null);

const editWindowRef = useRef(null);
const deleteWindowRef = useRef(null);

const editNameRef = useRef(null);
const editAdminNameRef = useRef(null);
const editPhoneRef = useRef(null);
const editFaxRef = useRef(null);
const editAddressRef = useRef(null);

const [source, setSource] = useState({
datafields: [
{ name: ‘Id’, type: ‘int’ },
{ name: ‘Name’, type: ‘string’ },
{ name: ‘AdminFullName’, type: ‘string’ },
{ name: ‘Phone’, type: ‘string’ },
{ name: ‘Fax’, type: ‘string’ },
{ name: ‘Address’, type: ‘string’ },
{ name: ‘edit’, type: ‘bool’ },
{ name: ‘delete’, type: ‘bool’ }
],
datatype: ‘json’
});

useEffect(() => { updateGrid() });
const columns = [
{ text: ‘کد ‘, datafield: ‘Id’, hidden: true },
{ text: ‘تلفن ‘, datafield: ‘Phone’, hidden: true },
{ text: ‘دورنگار ‘, datafield: ‘Fax’, hidden: true },
{ text: ‘آدرس ‘, datafield: ‘Address’, hidden: true },
{ text: ‘نام شرکت’, datafield: ‘Name’, width: ’45 %’, cellsalign: ‘right’, editable: false },
{ text: ‘مدیر عامل’, datafield: ‘AdminFullName’, width: ’45 %’, cellsalign: ‘right’, editable: false },
{
buttonclick: (row) => {

// get the data and append in to the inputs
const dataRecord = myGridRef.current.getrowdata(row);
editNameRef.current.val(dataRecord.Name);
editAdminNameRef.current.val(dataRecord.AdminFullName);
editPhoneRef.current.val(dataRecord.Phone);
editFaxRef.current.val(dataRecord.Fax);
editAddressRef.current.val(dataRecord.Address);
// show the popup window.
editWindowRef.current.Id = dataRecord.Id;
editWindowRef.current.currentEditedRow = row;
editWindowRef.current.open();
},
cellsrenderer: () => {
return ‘ویرایش’;
},
columntype: ‘button’, datafield: ‘edit’, text: ‘ویرایش’, width: ‘5 %’
},
{
buttonclick: (row) => {

// get the data and append in to the inputs
const dataRecord = myGridRef.current.getrowdata(row);

// show the popup window.
deleteWindowRef.current.Id = dataRecord.Id;
deleteWindowRef.current.currentDeletedRow = row;
deleteWindowRef.current.open();
},
cellsrenderer: () => {
return ‘حذف’;
},
columntype: ‘button’, datafield: ‘delete’, text: ‘حذف’, width: ‘5 %’
},
];

//bindgrid
function updateGrid() {
fetch(‘http://localhost:59521/api/Companies/SelectCompanys’)
.then((response) => {
if (response.ok) {
const data = response.json()
.then(data =>
setSource(source => ({
…source,
localdata: data
})))

} else {
throw Error(response.status);
}
})

}

function saveEdit() {

const editedRow = editWindowRef.current.currentEditedRow

if (editedRow < 0) {
return;
}
const data = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({

CompanyID: editWindowRef.current.Id,
CompanyName: editNameRef.current.val(),
CompanyTell: editPhoneRef.current.val(),
CompanyFax: editFaxRef.current.val(),
CompanyAddress: editAddressRef.current.val(),
CompanyCEO: editAdminNameRef.current.val(),
})
};

fetch(‘http://localhost:59521/api/Companies/UpdateCompany’, data)
.then((response) => {
if (response.ok) {
editWindowRef.current.currentEditedRow = null;
editWindowRef.current.hide();
return response.json()
} else {
throw Error(response.status);
}
})

}

function cancelEdit() {
editWindowRef.current.hide()
}

function commitDelete() {

const deletedRow = deleteWindowRef.current.currentDeletedRow

if (deletedRow < 0) {
return;
}

const data = {
method: ‘POST’,
headers: { ‘Content-Type’: ‘application/json’ },
body: JSON.stringify({

CompanyID: deleteWindowRef.current.Id,
})
};

fetch(‘http://localhost:59521/api/Companies/DeleteCompany’, data)
.then((response) => {
if (response.ok) {
deleteWindowRef.current.currentDeletedRow = null;
deleteWindowRef.current.hide();
return response.json()
} else {
throw Error(response.status);
}
})

}

function cancelDelete() {
deleteWindowRef.current.hide()
}

return (
<div>
<JqxGrid
ref={myGridRef}
width={‘100%’}
height={‘100%’}
source={new jqx.dataAdapter(source)}
columns={columns}
altrows={true}
sortable={true}
columnsresize={true}
enabletooltips={true}
pageable={true}
rtl={true}
editable={true}
selectionmode={‘singlecell’}
theme={‘energyblue’}
/>
<JqxWindow
ref={editWindowRef}
width={“auto”}
height={“auto”}
showCollapseButton={true}
theme=’energyblue’
draggable={true}
resizable={true}
autoOpen={false}
rtl={true}
isModal={true}
modalOpacity={0.3}
>
<div>ویرایش</div>
<div style={{ overflow: ‘hidden’ }}>
<table>
<tbody>

<tr>
<td align={‘right’}>نام شرکت:</td>
<td align={‘left’}>
<JqxInput ref={editNameRef} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>مدیر عامل:</td>
<td align={‘left’}>
<JqxInput ref={editAdminNameRef} width={150} height={23} />
</td>
</tr >
<tr>
<td align={‘right’}>شماره تماس:</td>
<td align={‘left’}>
<JqxInput ref={editPhoneRef} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>دور نگار:</td>
<td align={‘left’}>
<JqxInput ref={editFaxRef} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’}>آدرس:</td>
<td align={‘left’}>
<JqxInput ref={editAddressRef} width={150} height={23} />
</td>
</tr>
<tr>
<td align={‘right’} />
<td style={{ paddingTop: ’10px’ }} align={‘right’}>
<JqxButton
style={{ display: ‘inline-block’, marginRight: ‘5px’ }}
onClick={saveEdit}
width={50}
>Save</JqxButton>
<JqxButton
style={{ display: ‘inline-block’, marginRight: ‘5px’ }}
onClick={cancelEdit}
width={50}
> Cancel</JqxButton >
</td >
</tr >
</tbody >
</table >
</div >
</JqxWindow >
<JqxWindow
ref={deleteWindowRef}
width={250}
height={230}
resizable={false}
isModal={false}
autoOpen={false}
modalOpacity={‘0.01’}
>
<div>Delete</div>
<div style={{ overflow: ‘hidden’ }}>
<table>
<tbody>
<tr>
<td align={‘right’} />
<td style={{ paddingTop: ’10px’ }} align={‘right’}>
<JqxButton
style={{ display: ‘inline-block’, marginRight: ‘5px’ }}
onClick={commitDelete}
width={50}
>Delete</JqxButton>
<JqxButton
style={{ display: ‘inline-block’, marginRight: ‘5px’ }}
onClick={cancelDelete}
width={50}
>Cancel</JqxButton>
</td>
</tr>
</tbody >
</table >
</div >
</JqxWindow >
</div >

)
}

[kashehiParticipant]

Hi,
Thank you so much for your complete response, It helps me.
Thank you

[kashehiParticipant]

Thank you so much, It helped me too much.

[kashehiParticipant]

Hi again, Would you please answer my problem?
I want functional component for grid with json call from server like above code.
thank you

[Author]

Posts