jQuery UI Widgets Forums React Selecting a Component inside of a CellRender property

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 2 days, 13 hours ago.

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

  • Zlangley
    Participant

    Hello,

    I’m having an issue with the custom cell renderer.

    
    const getEmployeeMenu = () => {
        return (
            <Menu onClick={() => console.log('menu item clicked')}>
                <Menu.Item disabled={false}>{formatMessage('item 1')}</Menu.Item>
                <Menu.Item disabled={false}>{formatMessage('item 2')}</Menu.Item>
                <Menu.Item disabled={false}>{formatMessage('item 3')}</Menu.Item>
                <Menu.Item disabled={false}>{formatMessage('item 4')}</Menu.Item>
                <Menu.Item disabled={true}>{formatMessage('item 5')}</Menu.Item>
                <Menu.Item disabled={true}>{formatMessage('item 6')}</Menu.Item>
                <Menu.Item key={'viewAvailableShifts'}>{formatMessage('item 6')}</Menu.Item>
            </Menu>
        );
    };
    export const employeeCellRenderer = (row, column, value) => {
        let employeeContextMenu = getEmployeeMenu();
        let menuHolder = (
            <Dropdown overlay={employeeContextMenu}>
                <i className={'fas fa-chevron-circle-down'}/>
            </Dropdown>
        );
    
        return ReactDOMServer.renderToStaticMarkup(
            <div className={styles.employeeCellExpanded}>
                <div className={styles.employeeCellExpanded}>
                    <div className={styles.avatar}><Avatar avatarId={Math.random() * 100} avatarInitials={value.substring(0, 1)}/></div>
                    <div className={styles.employeeName}>{value}</div>
                    <div className={styles.dropdownMenu}>{menuHolder}</div>
                </div>
                <div className={styles.utilizationBar}><EmployeeScheduledHoursBar availableHours={32} scheduledHours={4}/></div>
            </div>
        );
    };
    

    Inside of the read-only cell is a button that creates a drop-down. However, when I select the dropdown, it selected the cell. Is there a way to only pick up click events inside the cell container and not the container itself.

    • This topic was modified 6 days, 5 hours ago by  Zlangley.

    Hristo
    Participant

    Hello Zlangley,

    I did not see the component from our library.
    Could you clarify it?
    If you want to use the jqxMenu then I would like to suggest you look at this demo:
    Also, this one that demonstrates how to load the data from JSON.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.