KendoReact DropDownButton: Handle click on each item, better solution?

1 Answer 274 Views
Button
Martin
Top achievements
Rank 1
Veteran
Iron
Martin asked on 28 Apr 2021, 01:46 PM | edited on 28 Apr 2021, 02:04 PM

Hello all!

So I have created a DropDownButton with four options like this:

handleTitleMenuClick = (e: any): void => {
    switch (e.itemIndex) {
        case0:
            this.openPartTypeModal();
            break;
        case1:
            this.openPartNameModal();
            break;
        case2:
            this.openAddSubPartModal();
            break;
        case3:
            this.deletePart();
            break;
        default:
            return;
    }
}

render =  () => {
    const titleMenuItems = [
        {text: "Change part type"},
        {text: "Rename part"},
        {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts},
        {text: "Delete part", disabled: this.state.subParts.length > 0}
    ];

    return (
        <div className="part-container">
            <div className="part-title">
                <div className="part-title-text">...</div>
                <div className="part-title-menu">
                    <DropDownButton buttonClass="part-title-menu-button"
                                    popupSettings={{popupClass: 'common-step-title-menu-container'}}
                                    icon={'more-vertical'}
                                    items={titleMenuItems}
                                    onItemClick={this.handleTitleMenuClick}
                    />
                </div>
            </div>
            <div className="part-content">...</div>
        </div>
    );
}

This works exactly like I intend it; I have four options in my dropdown and when I click on an option it behaves a expected.

However, this solution feels very clunky and I have been looking for a neater solution. What I would have deemed most intuitive was to have a "onClick" for each item, something like this:

const titleMenuItems = [
    {text: "Change part type", onClick: this.openPartTypeModal()},
    {text: "Rename part", onClick: this.openPartNameModal()},
    {text: "Add subpart", disabled: this.state.subParts.length >= this.state.maxSubParts, onClick: this.openAddSubPartModal()},
    {text: "Delete part", disabled: this.state.subParts.length > 0, onClick: this.deletePart()}
];

I have tried adding the above but that resulted in some strange rendering error (Warning: Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state.). I have looked through the documentation but I have not found anything that could help me.

The closest I found was an onClick in https://www.telerik.com/kendo-react-ui/components/buttons/api/ButtonItemProps/ but I don't understand if it's applicable here, and if so, how to implement it.

Maybe there is no alternative?

1 Answer, 1 is accepted

Sort by
0
Krissy
Telerik team
answered on 29 Apr 2021, 07:02 AM

Hello Martin,

Thank you for providing the code snippets.

The article in our documentation regarding the DropDownButtonProps is the following one: 
https://www.telerik.com/kendo-react-ui/components/buttons/api/DropDownButtonProps/ 

The property that allows you to handle the item click is the onItemClick, which will be fired each time an item is clicked.

My code improvement suggestion is to do the following things:

  • include the onClick handler for each individual item in the data (titleMenuItems)
  • handle the onItemClick event, where you map through the data and call the corresponding onClick event handler of the item that is clicke

I've created an example to showcase how to achieve this: 
https://stackblitz.com/edit/react-dropdownbutton-example?file=app/main.jsx 

Hope this example provides a solution that suits your application.

Regards,
Krissy
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Button
Asked by
Martin
Top achievements
Rank 1
Veteran
Iron
Answers by
Krissy
Telerik team
Share this question
or