jQuery UI Widgets Forums React initrowdetails not firing

Tagged: 

This topic contains 9 replies, has 4 voices, and was last updated by  svetoslav_borislavov 11 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • initrowdetails not firing #132976

    Corith
    Participant

    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)
    }}
    />
    initrowdetails not firing #132978

    steven_peterson8
    Participant
    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/
    initrowdetails not firing #132984

    Corith
    Participant
    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. 
    
    

    initrowdetails not firing #132985

    Corith
    Participant
    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.
    initrowdetails not firing #132987

    admin
    Keymaster

    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

    initrowdetails not firing #132988

    Corith
    Participant

    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

    initrowdetails not firing #132989

    Corith
    Participant

    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

    initrowdetails not firing #132991

    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/

    initrowdetails not firing #133009

    Corith
    Participant

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

    initrowdetails not firing #133011

    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/

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

You must be logged in to reply to this topic.