"Element menu" that behaves like a dropdown

3 Answers 87 Views
General Discussions
Martin
Top achievements
Rank 1
Veteran
Iron
Martin asked on 26 Apr 2021, 05:03 PM

I have a "list of components", rendered by a map. I have created a StackBlitz here: https://stackblitz.com/edit/react-ts-vieabu?file=index.tsx. Each "box" has a title div and a content div. When clicking on the title, the content should expand or collapse.

As you can see in the title I have a span with an image, which when clicked should display a dropdown menu. This menu has a couple of constraints that needs to be fulfilled:

  • It should open/close on clicking the ellipsis.
  • It should NOT open/close on hovering the ellipsis.
  • It should always close when clicking outside the opened menu.

So it should behave more or less exactly like a regular <select> dropdown, but I also need to be able to have custom elements and styling for each option in the menu. I have tried two approaches:

  1. I tried using the Menu component and using "openOnClick". The problem here is that I don't seem to be able to prevent opening on hover after every odd (first, third, fifth etc.) click.
  2. I tried using the Popup component and having a <ul> as menu element, but here I cannot do it so it closes when clicking outside the menu. I tried adding a document.addEventListener('click', ...) to the BoxContainer component but that did not help or I did something wrong.

What would you say is the best approach here? Menu, Popup or something else?

3 Answers, 1 is accepted

Sort by
0
Accepted
Stefan
Telerik team
answered on 27 Apr 2021, 07:26 AM

Hello, Martin,

Thank you for the details.

In this case, we can suggest checking the DropDownButton as it has the built-in logic to open and close based on the requirements:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/

It has an option to style each item:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/customization/

You can make the main button with an icon:

https://www.telerik.com/kendo-react-ui-develop/components/buttons/dropdownbutton/icons/

I hope this can prove helpful in this case.

Regards,
Stefan
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/.

0
Martin
Top achievements
Rank 1
Veteran
Iron
answered on 27 Apr 2021, 07:37 AM
Wow, totally missed that one. Thanks a lot! :D
0
Martin
Top achievements
Rank 1
Veteran
Iron
answered on 27 Apr 2021, 09:41 AM

Hello again, Stefan

It works almost as I want it but I have run into one problem. If I have the DropDownButton inside an element with an "onClick" I don't seem to be able to prevent the onclick on the parent element. Example:

<div onClick={myFunction}>
  <DropDownButton text="test" items={items} onItemClick={itemClickFunction} />
</div>

 

The onclick seems to happen on the parent element bot on the main button click and "onItemClick". The strange thing is that I have added a console.log in "myFunction" and that is not printed when opening/closing the dropdown or clicking an item. But the things that I want to happen in "myFunction" but not in "itemClickFunction" is still happening.

Any idea?

Martin
Top achievements
Rank 1
Veteran
Iron
commented on 27 Apr 2021, 12:39 PM

You can disregard this, I fixed it.
Tags
General Discussions
Asked by
Martin
Top achievements
Rank 1
Veteran
Iron
Answers by
Stefan
Telerik team
Martin
Top achievements
Rank 1
Veteran
Iron
Share this question
or