1

Autoscroll on selecteditem on combo not working

asked 2016-03-23 07:19:57 +0800

Aditi gravatar image Aditi
13 2

updated 2016-03-23 07:21:10 +0800

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.

delete flag offensive retag edit

11 Answers

Sort by ยป oldest newest most voted
0

answered 2016-04-18 08:16:22 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9
https://github.com/chillw...

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.

link publish delete flag offensive edit
0

answered 2016-03-24 01:03:51 +0800

cor3000 gravatar image cor3000
4952 2 7
ZK Team

updated 2016-03-24 01:04:36 +0800

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

link publish delete flag offensive edit
0

answered 2016-03-28 05:47:53 +0800

avanish240288 gravatar image avanish240288
11

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.

link publish delete flag offensive edit
0

answered 2016-04-03 08:27:06 +0800

Darksu gravatar image Darksu
1991 1 4

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

link publish delete flag offensive edit
0

answered 2016-04-05 04:12:34 +0800

avanish240288 gravatar image avanish240288
11

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

link publish delete flag offensive edit
0

answered 2016-04-05 07:34:07 +0800

Darksu gravatar image Darksu
1991 1 4

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

link publish delete flag offensive edit
0

answered 2016-04-18 06:07:31 +0800

Aditi gravatar image Aditi
13 2

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());
        }
    });
}

}

link publish delete flag offensive edit
0

answered 2016-04-18 09:47:18 +0800

Darksu gravatar image Darksu
1991 1 4

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

link publish delete flag offensive edit
0

answered 2016-04-18 10:20:59 +0800

Aditi gravatar image Aditi
13 2

updated 2016-04-18 10:53:47 +0800

chillworld gravatar image chillworld flag of Belgium
5337 4 9
https://github.com/chillw...

thanks chill.Its working fine now.

link publish delete flag offensive edit
0

answered 2019-08-07 06:32:17 +0800

vince1101 gravatar image vince1101
31

updated 2019-08-07 06:40:55 +0800

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());
        }
    });
}}
link publish delete flag offensive edit

Comments

please start a new thread next time, you can still refer to an old topic, instead of extending an old discussion that had already been answered/accepted back then.

cor3000 ( 2019-08-07 10:36:58 +0800 )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
1 follower

RSS

Stats

Asked: 2016-03-23 07:19:57 +0800

Seen: 65 times

Last updated: Aug 07

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