[CorithParticipant]

The issue is, or rather was, a row with nested tables would not expand.

We found the issue. A developer changed the padding values on the jqx-widget-content & jqx-fill-state-normal css classes.

.jqx-widget-content,
.jqx-fill-state-normal {
//padding-left: $input-padding-x !important;
//padding-right: $input-padding-x !important;
}

[CorithParticipant]

On the odd chance we’ve missed something. Here is our most recent implementation of the grid.

`import JqxGrid from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxgrid’
import {IDataTableColumns} from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdatatable’
import {
IChildProps,
IDropdownListItem,
IGridSourceExtended,
IResponse,
ITemplate,
} from ‘../../../../../common/interfaces’
import {createRef, useEffect, useMemo, useState} from ‘react’
import {ApplicationCenterRepositoryApi as Repository} from ‘../../../../../repository’
import ReactDOM from ‘react-dom’
import TemplateContent from ‘./TemplateContent’
import TemplateItem from ‘./TemplateItem’
import {Row, Col, Form, Button} from ‘react-bootstrap’
import JqxDropDownList from ‘jqwidgets-scripts/jqwidgets-react-tsx/jqxdropdownlist’

const environmentDropDown = createRef<JqxDropDownList>()
const languagesDropDown = createRef<JqxDropDownList>()
const templateGrid = createRef<JqxGrid>()

const TemplatesPage = (props: IChildProps) => {
const Api = useMemo(() => {
return new Repository()
}, [])

const [selectedEnvironment, setSelectedEnvironment] = useState(”)
const [seletedLanguages, setSelectedLanguage] = useState(”)
const [selectedTemplate, setSelectedTemplate] = useState(”)
const [showTemplateItem, setShowTemplateItem] = useState<boolean>(false)
const [showTemplateContent, setShowTemplateContent] = useState<boolean>(false)
const [environmentList, setEnvironmentList] = useState<IDropdownListItem[]>([])
const [languageList, setLanguageList] = useState<IDropdownListItem[]>([])

const applicationCode = props.applicationCode!

const [templates, setTemplates] = useState<IResponse<ITemplate>>({
currentPage: 0,
filteredCount: 0,
pageSize: 0,
results: [],
totalCount: 0,
totalPages: 0,
})

const rendergridrows = (params: any) => {
if (templateGrid.current?.getpaginginformation()) {
const pageNumber: number = Number(templateGrid.current?.getpaginginformation().pagenum) + 1 //page = old value
const pageSize: number = templateGrid.current?.getpaginginformation().pagesize

Api.getTemplates(applicationCode, pageNumber, pageSize).then((response) => {
setTemplates(response.data)
templateGrid.current?.updatebounddata()
})
}
return params.data
}

useEffect(() => {
Api.getTemplates(applicationCode, 1, 10).then((response) => {
setTemplates(response.data)
})

Api.getEnvironments(applicationCode, 1, 99).then((response) => {
setEnvironmentList(
response.data.results?.map((item, index) => {
return {
value: item.code,
label: item.name,
}
})
)
})

Api.getLanguages(1, 99).then((response) => {
setLanguageList(
response.data.results?.map((item, index) => {
return {
value: item.code,
label: item.name,
}
})
)
})
}, [Api, applicationCode])

const userTableData = (jsonData: any, recordCount: number): IGridSourceExtended => {
return {
localdata: jsonData,
totalrecords: recordCount,
datatype: ‘json’,
columns: [
{text: ‘Template Name’, dataField: ‘name’, width: ‘20%’} as IDataTableColumns,
{text: ‘Application Code’, dataField: ‘applicationCode’, width: ‘20%’} as IDataTableColumns,
{text: ‘Code’, dataField: ‘code’, width: ‘20%’} as IDataTableColumns,
{text: ‘Description’, dataField: ‘description’} as IDataTableColumns,
{
createwidget: (row: any, column: any, value: number, htmlElement: HTMLElement): void => {
const handleClick = () => {
setSelectedTemplate(row.bounddata.code)
setShowTemplateItem(true)
}
ReactDOM.render(
<div className=’text-center’>
<i role=’button’ className=’bi bi-pencil-square fs-3′ onClick={handleClick}></i>
</div>,
htmlElement
)
},
initwidget: (row: any, column: any, value: number, htmlElement: HTMLElement) => {},
datafield: ‘id’,
text: ‘Edit’,
cellclassname: ‘jqx-cell-custom’,
cellsalign: ‘center’,
align: ‘center’,
width: 75,
height: 1,
},

{
createwidget: (row: any, column: any, value: number, htmlElement: HTMLElement): void => {
const handleClick = () => {

setSelectedEnvironment(
environmentDropDown.current?.getItem(
environmentDropDown.current?.getSelectedIndex()
).value
)
setSelectedLanguage(
languagesDropDown.current?.getItem(languagesDropDown.current?.getSelectedIndex()).value
)
setSelectedTemplate(row.bounddata.code)
setShowTemplateContent(true)
}
ReactDOM.render(
<div className=’text-center’>
<i role=’button’ className=’bi bi-pencil-square fs-3′ onClick={handleClick}></i>
</div>,
htmlElement
)
},
initwidget: (row: any, column: any, value: number, htmlElement: HTMLElement) => {},
text: ‘Edit Content’,
cellclassname: ‘jqx-cell-custom’,
cellsalign: ‘center’,
align: ‘center’,
width: 120,
height: 1,
},
],
}
}
const tableData = userTableData(
templates.results.filter((d) => d.parentTemplateCode === null),
templates.totalCount
)

const nestedTables = {
initrowdetails: (index: any, parentElement: any, gridElement: any, record: ITemplate): void => {
const nestedGrids: any[] = []
const nestedGridContainer = parentElement.children[0]
nestedGrids[index] = nestedGridContainer

if (record.childTemplates.length !== 0) {
const childData = userTableData(record.childTemplates, record.childTemplates.length)
ReactDOM.render(
<JqxGrid width={‘99%’} source={childData} columns={childData.columns} />,
document.getElementById(nestedGridContainer.id)
)
}
},
rowdetailstemplate: (index: number) => {

var details: any = {
rowdetails: “<div id=’grid’ style=’margin: 3px;’></div>”,
}
const height = 2 * 5 + 31 + 33 * tableData.localdata[index].childTemplates.length // margins + header + rows
details.rowdetailsheight = height
//details.rowdetailshidden = false
return details
},
}

return (
<>
{!showTemplateItem && !showTemplateContent && (
<>
<Row>
<Form.Label as={Col} md=’auto’ className=’pt-4′>
Environment
</Form.Label>
<Col md={4}>
<JqxDropDownList
ref={environmentDropDown}
className=’jqx-dropdownlist-float’
width={‘100%’}
source={environmentList}
selectedIndex={0}
/>
</Col>

<Form.Label as={Col} md=’auto’ className=’pt-4′>
Culture
</Form.Label>
<Col md={4}>
<JqxDropDownList
ref={languagesDropDown}
className=’jqx-dropdownlist-float’
width={‘100%’}
source={languageList}
selectedIndex={0}
/>
</Col>
<Col className=’text-end’>
<Button size=’sm’ variant=’light’ id=’group-add-drawer_toggle’>
<i className=’fa fa-plus’></i> Add
</Button>
</Col>
</Row>

<Row>
<Col>
<JqxGrid
ref={templateGrid}
width={‘100%’}
autorowheight={false}
rowsheight={37}
autoheight={true}
altrows={true}
source={tableData}
columns={tableData.columns}
rowdetails={true}
pageable={true}
sortable={true}
onCellclick={(e:any)=>{
console.log(‘cell click event’)
templateGrid.current?.expandallgroups()
}}
onGroupcollapse={(e:any)=>{
console.log(‘collapse event’)
}}
onGroupexpand={(e:any)=>{
console.log(‘expand event’)
}}
rendergridrows={rendergridrows}
rowdetailstemplate={nestedTables.rowdetailstemplate}
initrowdetails={nestedTables.initrowdetails}
/>
</Col>
</Row>
</>
)}
<TemplateContent
applicationCode={applicationCode}
culture={seletedLanguages}
environment={selectedEnvironment}
visible={showTemplateContent}
id={selectedTemplate}
setShow={setShowTemplateContent}
/>
<TemplateItem visible={showTemplateItem} id={‘0’} setShow={setShowTemplateItem} />
</>
)
}

export default TemplatesPage
‘

[CorithParticipant]

We looked your source code first, and even put it on a sample page in our solution(s). Nope.
We gave cellclick method a try to invoked the expand all groups method. Nope.
We also tried rowdetailshidden = false, cellclick, and collapse all groups. Nope.

I upgraded to 16.0.0 thinking that might be the issue. It has some problems that need attention.
Have a look at 16.0.0
https://www.npmjs.com/package/jqwidgets-scripts?activeTab=code

/jqwidgets-scripts/jqwidgets-react-tsx/jqxvalidator/react_jqxvalidator.esm.js

[CorithParticipant]

FYI: Not a single other developer on our team has the click event working for nested tables. That allows for a wide array of implementations and data. 

We are using react 17.0.2, typescript 4.1.2, & jqwidgets-scripts 14.0.0

Tested with both Chrome and Edge. Windows 10 & 11. Windows and Mac.

[CorithParticipant]

Nope, still no go. The nested rows are there. When I set the rowdetails to true, it renders them just fine. However, in no case does the click event open or close, nor are there any errors in the console. 

[CorithParticipant]

onCellvaluechanged={() => {
                var summaryData = costGrid.current?.getcolumnaggregateddata('Cost', ['sum']);
                console.log(summaryData)
                if (summaryData == undefined) {
                  summaryData = '0';
              }
                setTotalCost(summaryData); //clears table
                console.log(summaryData);
              }}

[CorithParticipant]

August 31, 2021 at 3:18 pm

That was 16 months ago, and I’m running into the same problem with extracting the column sum to display elsewhere on a page (not just the footer).
It happens with a function embedded in the aggregates call, the aggregatesrenderer call, and the onCellvaluechanged event.

Echoing to the console works just fine, but when attempting to use a setState hook function, the grid begins to fail; in my case, it destroys any values stored in cells.

I’m using the licensed version 15.0.0.

onCellvaluechanged={() => {
                var summaryData = costGrid.current?.getcolumnaggregateddata('Cost', ['sum']);
                console.log(summaryData)
                if (summaryData == undefined) {
                  summaryData = '0';
              }
                setTotalCost(summaryData); //clears table
                console.log(summaryData);
              }}

[CorithParticipant]

Never mind. I see them. My phone browser cut them off.

[CorithParticipant]

Found it.

<JqxGrid ref={jqxGrid} source={dataSource} columns={dataSource.columns} />

[Author]

Posts