0

Chosenbox with a complex suggestion list

asked 2024-03-01 19:09:18 +0800

ziobleed gravatar image ziobleed
153 3

updated 2024-03-05 17:14:20 +0800

zk version: 6.5.8.2

approach : MVC

hi all,

currently the chosenbox offer a very simple ItemRender to list elements in the dropdown list AND to show the chosen element in the field: actual chosenbox

First problem: the item renderer is the same used in the dropdown list AND item selected

Second problem: the dropdown list is very simple, only simple text, cannot be customized with complex elements. Would be great if customisable like ListItemRenderer used in ListBox, for example adding a button to delete a particoular element in the dropdown list

My objective: Give to the user the possibility to delete some of suggested items in the drop down list, so them are not more proposed desired chosenbox

For example a suggestion list with the text of the item suggested and a "Delete this" X icon

There is a way to reach this objective?

Regards

ZB

delete flag offensive retag edit

Comments

added karma for posting images/links

jeanher ( 2024-03-04 11:31:25 +0800 )edit

2 Answers

Sort by » oldest newest most voted
1

answered 2024-03-04 11:47:40 +0800

MDuchemin gravatar image MDuchemin
2560 1 6
ZK Team

Hey there,

Regarding separate rendering options for the selected items and the drop-down, there is a feature request ticket currently opened:

https://tracker.zkoss.org/browse/ZK-5391

Regarding building a more complex content per row: Chosenbox doesn't offer sub-component rendering by design. Popups have to behave in a predictable way, with predictable row spacing and content to keep the design complexity manageable.

This said, ZK has a drop-down with fully customizable popup option: Bandbox

While this is not 100% the same as a chosenbox, if your goal is to build a control tied to an input field, with a search capability, selectable rows and extra customization of the individual rows, bandbox might worth considering.

The way I would approach it would be to build the bandpopup with two sections.

I'd make the bandbox readonly first if I don't want the user to edit the text value, this way it can open and display text in the input, but the user cannot type directly in the bandbox input (unless you want to give them that option, in a 'free text with suggestion' scenario)

In the top section, I'd put a textbox for search / filtering (similar to searchbox).

In the bottom section, I'd put a listbox. Listbox is the natural choice for tabular selection, especially since it supports both Mouse and Keyboard navigation (which you can pass from the bandbox input)

Then, the Listbox can receive your model, and your choice of either template or renderer to display the individual lines with extra controls.

From there's it's just a matter of forwarding selection events from the listbox, and decide on supplementary behaviors. Such as, closing the popup when the user makes a selection, replacing the text of the input with the selected text of the listbox, etc.

link publish delete flag offensive edit
0

answered 2024-03-05 17:20:04 +0800

ziobleed gravatar image ziobleed
153 3

Thanks a lot for the detailed response. Didn't know the Bandbox compoment.

I'll investigate the component following your implementation advice

ZB

link publish delete flag offensive edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
2 followers

RSS

Stats

Asked: 2024-03-01 19:09:18 +0800

Seen: 9 times

Last updated: Mar 05

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More