Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
I have a comboBox with more than 100 values but when we select the value from combobox . Combo box should be auto scroll to the Selecteditem but it is not.
Oke,
Let me take a try at this one.
Zk does make a change at client side when you type, but doesn't set a focus.
We can add that as a widgetListener.
I updated the fiddle : http://zkfiddle.org/sample/1a6roi7/4-auto-scroll-to-selected-comboitem
What did I do => I add some widgetListeners (You can remove 2 of the 3 when you only want to recalculate when you release your key.)
In the listeners, we are going to search the selected item and we are saying to set in visible.
Little like Darksu already said, but not on server side but on client side.
This gives the advantage we don't need a server call to have it correct and we are not waisting any resources of the server for this.
I created a new Combobox class => you can do what you want with it, as long the widget has the listener it will work.
When link dies :
public class MyCombobox extends Combobox implements BeforeCompose {
private static final String[] EVENTS = {"onKeyDown", "onKeyUp", "onKeyPress"};
@Override
public void beforeCompose() {
setEventListeners("zk($('.z-comboitem-selected')).scrollIntoView();");
}
private void setEventListeners(String script) {
for (String event : EVENTS) {
setWidgetListener(event, script);
}
}
}
Greetz chill.
Hi Aditi,
for me it does show the selected item. I select the last element in the list and when opening the drop down it scrolls into view.
http://zkfiddle.org/sample/1a6roi7/3-auto-scroll-to-selected-comboitem
If this does not happen on your side, please update the example to show your problem. Or provide at least some related details, such as your zk version and browser version.
Robert
Hi Robert,
Thanks for quick response. As you have stated the item is getting selected, but the combo is not scrolling to the specific item on typing the item. My requirement is to have auto complete feature with autodrop and the dropdown box should scroll to the item.
For example - On first time load if I type 'Item 149' then it is highlighted but list not scrolled to the specific position. End-user should see the highlighted item.
Similarly - when item 149 is already the selected item, and if I erase and enter 'item 1' the list should scroll back to top showing item 1 selected. (Couldn't attach image as I don't have enough points)
We are using ZK 7 version and IE 11 /Crome Version 49.0.2623.87 m
Please let me know how this can be achieved.
Hello Aditi,
Please use the following code:
Zul:
<zk>
<window border="none" apply="pkg$.MasterDetailComposer">
<combobox id="c" autodrop="true"/>
</window>
</zk>
Java:
package pkg$;
import org.zkoss.zk.ui.event.EventListener;
import org.zkoss.zk.ui.event.Events;
import org.zkoss.zk.ui.event.InputEvent;
import org.zkoss.zk.ui.util.Clients;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Combobox;
import org.zkoss.zul.ListModelList;
import org.zkoss.zul.Window;
public class MasterDetailComposer extends GenericForwardComposer<Window> {
Combobox c;
private static final long serialVersionUID = 748611244810222881L;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
ListModelList<String> itemsListModelList = new ListModelList<>();
itemsListModelList.add("A");
itemsListModelList.add("B");
itemsListModelList.add("C");
c.setModel(itemsListModelList);
c.addEventListener(Events.ON_CHANGING, new EventListener<InputEvent>(){
@Override
public void onEvent(InputEvent event) throws Exception {
Clients.scrollIntoView(c.getSelectedItem());
}
});
}
}
Best Regards,
Darksu
Hi Darksu, I am new to Zk and in my page i am using this "apply="org.zkoss.bind.BindComposer""and MVVM model. So please suggest me how I can implement custome composer in a window which use bind composer.
Regards, Avanish Rai
Hello Avanish,
For information regarding the creation of a custom composer please refer to the following url:
http://books.zkoss.org/wiki/ZKDeveloper'sReference/MVC/Controller/Composer#Custom_Controller
The thing you have to understand is that there are two Design Patterns MVC and MVVM.
http://books.zkoss.org/wiki/ZKDeveloper'sReference/MVVM/Data_Binding/BindComposer
http://books.zkoss.org/wiki/ZKDeveloper'sReference/MVC
There are some tricks that you can use for combining both such as wiring components but It's best to use only one of them. In your case MVVM.
Best Regards,
Darksu
Hi Darksu
I have tried your code for scrolling but its not working when the list item have many values.
When i write zimbawe in comboBox at that time scroll will not come to zimbawe
<zk xmlns:x="xhtml" xmlns:zk="zk"> <window border="none" apply="com.csdcsystems.amanda.property.MasterDetailComposer"> <combobox id="c" autodrop="true"/> </window> </zk>
public class MasterDetailComposer extends GenericForwardComposer<window> {
Combobox c;
private static final long serialVersionUID = 748611244810222881L;
public void doAfterCompose(Window comp) throws Exception {
super.doAfterCompose(comp);
ListModelList<String> itemsListModelList = new ListModelList<>();
itemsListModelList.add("Australia");
itemsListModelList.add("Brazil");
itemsListModelList.add("Canada");
itemsListModelList.add("Denmark");
itemsListModelList.add("Egypt");
itemsListModelList.add("France");
itemsListModelList.add("Germany");
itemsListModelList.add("History");
itemsListModelList.add("Ireland");
itemsListModelList.add("Jurasik");
itemsListModelList.add("Kerela");
itemsListModelList.add("London");
itemsListModelList.add("Monesty");
itemsListModelList.add("Nepal");
itemsListModelList.add("Opera");
itemsListModelList.add("Paris");
itemsListModelList.add("Queen");
itemsListModelList.add("Russia");
itemsListModelList.add("Sydney");
itemsListModelList.add("Turkey");
itemsListModelList.add("Urakein");
itemsListModelList.add("Youvin");
itemsListModelList.add("Zimbawe");
itemsListModelList.add("Australia1");
itemsListModelList.add("Brazil1");
itemsListModelList.add("Canada1");
itemsListModelList.add("Denmark1");
itemsListModelList.add("Egypt1");
itemsListModelList.add("France1");
itemsListModelList.add("Germany1");
itemsListModelList.add("History1");
itemsListModelList.add("Ireland1");
itemsListModelList.add("Jurasik1");
itemsListModelList.add("Kerela1");
itemsListModelList.add("London1");
itemsListModelList.add("Monesty1");
itemsListModelList.add("Nepal1");
itemsListModelList.add("Opera1");
itemsListModelList.add("Paris1");
itemsListModelList.add("Queen1");
itemsListModelList.add("Russia1");
itemsListModelList.add("Sydney1");
itemsListModelList.add("Turkey1");
itemsListModelList.add("Urakein1");
c.setModel(itemsListModelList);
c.addEventListener(Events.ON_CHANGING, new EventListener<InputEvent>() {
@Override
public void onEvent(InputEvent event) throws Exception {
Clients.scrollIntoView(c.getSelectedItem());
}
});
}
}
Hello Aditi,
Please use the following updated code:
c.addEventListener(Events.ON_CHANGING, new EventListener<InputEvent>(){
@Override
public void onEvent(InputEvent event) throws Exception {
for (int i=0; i < c.getModel().getSize(); i++) {
String item = (String) c.getModel().getElementAt(i);
if (event.getValue().equals(item)) {
c.setSelectedIndex(i);
Clients.scrollIntoView(c.getSelectedItem());
}
}
}
});
Best Regards,
Darksu
thanks chill.Its working fine now.
Hi all, I still have issue with this scroll, none of the given otions is working for me, Darksu code is not working because when debug I can see that the selected item is not changed untill actually selected, the automatic suggestion of an item does not change the selected item. The event is correctly triggered and the evenlistener is trying to select something but this something is always stuck to the original selected item of the combo, would anybody have an idea on how to have this combo list scroll to the suggested item ?
I am working with ZK 8.6, with MVVM
Zul :
<window id="combotest" border="normal" title="Combo Test" apply="org.zkoss.bind.BindComposer" viewModel="@id('vm') @init('comboTestViewModel')" >
<combobox id="combo" model="@load(vm.items)" use="MyCombobox" autodrop="true" selectedItem="@bind(vm.itemSelected)">
</combobox></window>
View Model :
public class comboTestViewModel{
@Autowired
private ItemService itemService;
private List<Item> items = new ArrayList();
private Item itemSelected;
@AfterCompose
public void afterCompose(@ContextParam(ContextType.VIEW) Component view) {
items = itemService.findAll();
}
public List<Item> getItems() {
return items;
}
public void setItems(List<Item> items) {
this.items= item;
}
public Item getItemSelected() {
return itemSelected;
}
public void setItemSelected(Item itemSelected) {
this.itemSelected= itemSelected;
}
}
And MyCombobox :
public class MyCombobox extends Combobox implements BeforeCompose {
@Override
public void beforeCompose() {
addEventListener(Events.ON_CHANGING, new EventListener<InputEvent>(){
@Override
public void onEvent(InputEvent event) throws Exception {
System.out.println(" event ON_CHANGING triggered");
if (getSelectedItem()!= null) {
System.out.println(" getSelectedItem.getlabel " + getSelectedItem().getLabel() );
} else {
System.out.println(" getSelectedItem is null");
}
Clients.scrollIntoView(getSelectedItem());
}
});
}}
Asked: 2016-03-23 07:19:57 +0800
Seen: 68 times
Last updated: Aug 07 '19