initrowdetails not firing

[CorithParticipant]

I’m having a bit of trouble getting the grid to work. In debugging the code, it appears that initrowdetails doesn’t fire off when the grid renders.

<JqxGrid
source={tableData}
columns={tableData.columns}
initrowdetails={ (index?: number, parentElement?: any, gridElement?: any, datarecord?: any) => {
   console.log('initrowdetails',parentElement)
}}
/>

[steven_peterson8Participant]

Hi,	

The initrowdetails function is fired when the row details are expanded for the first time. You should also have rowdetails={true} and a template.
For example:
            <JqxGrid
                source={tableData.dataSource}
                columns={tableData.columns}
                rowdetails={true}
                initrowdetails={(index, parentElement, gridElement, datarecord) => {
                    console.log('initrowdetails', parentElement)
                }}
                rowdetailstemplate={{
                    rowdetails: '<div style="margin: 10px;"><ul style="margin-left: 30px;"><li class="title"><li>Notes</li><div class="information"></div><div class="notes"></div></div>',
                    rowdetailsheight: 200
                }}
            />

Best regards,
Steven Peterson

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

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

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.

[adminKeymaster]

Hi Corith,

You can see https://www.jqwidgets.com/react/react-grid/index.htm and the row details and nested grid examples which show how to implement and use row details. For handling events in the Grid, you can look at https://www.jqwidgets.com/react-components-documentation/documentation/jqxgrid/reactjs-grid-api.htm. The list of available events is in the Events section. For example, in the Grid the ‘click’ is internally handled and you cannot bind to it, but there is an event called ‘cellclick’ called when a cell is clicked and you can use it instead of ‘click’.

Hope this helps.

Regards,
Peter

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

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
‘

[svetoslav_borislavovParticipant]

Hi,

What is the exact problem with your code? The Component that you send has many dependencies.
To reproduce the behaviour of your component, please send a fully functional component which is ready to start.
You can send us a demo project with mocked data. (You can use https://easyupload.io/ to upload it and give us the URL for downloading)

Best regards,
Svetoslav Borislavov

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

[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;
}

[svetoslav_borislavovParticipant]

Hi,

Well done, if you have any additional questions, do not hesitate to contact us!

Best regards,
Svetoslav Borislavov

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

[Author]

Posts