In my Vaadin 14 app, I want to add an Accordion component that has several components in its summary (which is always displayed), among which a Button. Clicking in the summary normally toggles the display of the AccordionPanel content. How can I prevent the AccordionPanel to collapse/expand when the button in the summary is clicked?
Objects are created simply as follows:
Accordion accordion = new Accordion();
MyPanel panel = new MyPanel();
accordion.add(panel);
with MyPanel constructor simply calling setSummary() with a layout containing the button.
I found the answer in this thread on the forum.
It turns out you can prevent the propagation of the button click with this hack:
button.getElement().addEventListener("click", click -> {
//do nothing
}).addEventData("event.stopPropagation()");
This seems like a core functionality that the framework should provide out of the box, but this ticket is still open.
Adding this to your view:
UI.getCurrent().getPage()
.executeJs("Array.from(document.getElementsByTagName('vaadin-accordion-panel')).forEach(element=>element.shadowRoot.querySelector(\"div[role=button]\").replaceWith(element.shadowRoot.querySelector(\"div[role=button]\").cloneNode(true)))");
will disable all clicks on all the accordions toggle and accordion summary. However you will need to include a button or trigger for opening and closing the accordion. I don't know if this is what you want?
Related
I have a Vaadin 23 application where I have a Div element with a Button in it (among other content) and a click listener added to it, as well as to the button:
Button button = new Button();
button.addClickListener(event -> { ... });
Div wrapper = new Div(button);
wrapper.addClickListener(event -> { ... });
The problem is that both listeners are firing when the button is clicked.
How can I make sure that only the button click listener is fired in that case? I want the click listener on the Div to fire when I click anywhere inside the Div except on the button.
Alternatively, if I could detect in the click listener on the Div that the click was actually on the button, I could simply ignore it. But I don't see how to do that either.
This is a port from a Vaadin 8 app where it was working correctly. The wrapper Div in that case was a CssLayout with a LayoutClickListener added.
There is a highly voted issue for adding this feature to Vaadin Flow. Different workarounds are also described in the issue.
In your case, I think the workaround would look like this:
button.getElement().addEventListener("click", ignore -> {}).addEventData("event.stopPropagation()");
With vaadin 23.1.x you can set a itemClickHandler when a user click on a item/row in the grid with myGrid.addItemClickListener(..)
This works fine.
But if you have a component column, with a button in it, then the ClickEvent of the Button is fired and also the itemClickListener of the grid row.
Is there a way to prevent the button click from also triggering the itemClickListener?
You must use this method to add the listener them you can
myGrid.getElement().addEventListener("item-click",
event -> ...)
.addEventData("event.stopPropagation()");
I'm not 100% sure if the even is item-click or just click.
I have an separate Add button (neither on toolbar, nor on grid) and I want to open a popup window (having some fields) after clicking this button in order to create a new record. I have a look at the Kendo Demo pages, but all the samples use grid's or toolbar's Create button. Instead of them, a need a sample with a separate button. Any sample please?
Update: I want to create a listview as shown below instead of grid:
If you call dataGrid.addRow() method and edit mode is set to "popup", Popup window will be displayed.
Look at this dojo
Is there a way to mimic the function of Mozilla Firefox tab function to jQuery Tabs that, when there are multiple of tabs, it adds a next button to view next tab after the last displayed tab.
I want to add this next button(encircled), to the jQuery tabs UI functionality. Also, if possible, to add the animation on the menu tab to move tabs as next/previous button is clicked, like on the said browser.
Thanks!
This could help. You will need custom logic.
This CSS trick can also help out. You can tweak the logic for the placement of the next button and you are good to go.
I have a TPageControl that contains five pages and the page shown is alternated setting the ActivePageIndex property in this way:
PageControl1.ActivePageIndex := 4;
the problem is that the page below covered by the page currently shown get click on his buttons while the mouse is pressed on the above page, how can I avoid this behaviour ? How can I avoid the propagation of the click on Pages below the currently shown (that is also the current index)?
The application uses CLX as Graphics library instead of VCL.
Delphi does not do click Propagation.
I would check if the button that gets click are placed on the TabSheet and not on the parent control. Find the button you want in the drop down list of object inspector and press - the selected item will be the parent of the button. Is it a TabSheet?
Or you can add this code as a first line of your button-click-function
ShowMessage(TButton(Sender).Parent.Name);