Selecting a Component inside of a CellRender property

[ZlangleyParticipant]

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.

[HristoParticipant]

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

[Author]

Posts