listbox with nonSelectabletags inplace new listitem

answered 2014-06-16 10:27:30 +0800

cyiannoulis
1201 ● 10

As Robert said, if you are using a model to populate your listbox, you have to control the selections through this model. Here is a working MVC example:

<?page title="MVC Students" contentType="text/html;charset=UTF-8"?>
<zk>
<window apply="snippets.MvcStudentsController"
        width="100%" height="100%"
        xmlns:n="native">

    <n:h1>MVC Students</n:h1>

    <hlayout valign="middle" width="50%">
        <button id="addButton" label="Add Student" sclass="btn btn-primary" />
        <textbox id="txtCode" placeholder="Code" width="70px" sclass="form-control" />
        <textbox id="txtName" placeholder="Name" width="200px" sclass="form-control" />
        <intbox id="txtGrade" placeholder="Grade" width="70px" sclass="form-control" />
        <label hflex="1" />     
        <n:h3><n:span class="label label-default glyphicon glyphicon-user">
            <label id="lblCount" />
        </n:span></n:h3>
        <separator width="20px"></separator>
    </hlayout>

    <listbox id="studentsList" model="${$composer.students}" width="50%">
        <listhead>
            <listheader label="Code" width="70px" />
            <listheader label="Name" hflex="1" />
            <listheader label="Grade" width="80px" />
        </listhead>
        <template name="model">
            <listitem>
                <listcell><label value="${each.code}" /> </listcell>
                <listcell><label value="${each.name}" /> </listcell>
                <listcell><intbox inplace="true" value="${each.grade}" 
                    width="70px" sclass="txt-grade" /></listcell>
            </listitem>
        </template>
    </listbox>

    <n:h3><label id="lblSelection" /></n:h3>
</window>
</zk>

And the composer:

public class MvcStudentsController extends SelectorComposer<Component> {

    private static final long serialVersionUID = 1L;

    private ListModelList<Student> students = createData();

    @Wire private Listbox studentsList;
    @Wire private Label lblCount;
    @Wire private Label lblSelection;
    @Wire private Textbox txtCode;
    @Wire private Textbox txtName;
    @Wire private Intbox txtGrade;


    public void doAfterCompose(Component comp) throws Exception {
        super.doAfterCompose(comp);
        updateCount();
    }

    @Listen("onClick = #addButton")
    public void onClickAddButton() {
        if (txtCode.getValue().isEmpty() || txtName.getValue().isEmpty()) {
            Clients.showNotification("Please type a valid 'code' and 'name' ");
            return;
        }
        /*
         * Add a new student to the model
         */
        Student student = new Student(txtCode.getValue(), txtName.getValue(), txtGrade.getValue()); 
        students.add( student );
        /*
         * Update the selection
         */
        updateSelection(student);
        /*
         * Update the count label
         */
        updateCount();
    }

    /*
     * Set row selection when entering a grade field
     */
    @Listen("onFocus = .txt-grade")
    public void onFocusGrade(Event event) {
        Listitem listitem = (Listitem) event.getTarget().getParent().getParent();
        Student selectedStudent = (Student) listitem.getValue();
        updateSelection(selectedStudent);
    }

    /*
     * Update the selection status label every time a selection is made
     */
    @Listen("onSelect = #studentsList")
    public void onStudentSelected(Event event) {
        Listitem selectedItem = studentsList.getSelectedItem();
        Student selectedStudent = (Student) selectedItem.getValue();
        updateSelectionStatus(selectedStudent);
    }

    /*
     * Update the selections in the data model. 
     * Selections in the data model are reflected automaticaly 
     * to the listbox widget.
     */
    private void updateSelection(Student student) {
        List<Student> selections = new ArrayList<Student>();
        selections.add(student);
        students.setSelection(selections);
        updateSelectionStatus(student);
    }

    private void updateSelectionStatus(Student student) {
        lblSelection.setValue("Current selection: " + student.getName());
    }

    private void updateCount() {
        lblCount.setValue("" + students.getSize());
    }   

    public ListModelList<Student> createData() {

        List<Student> data = new ArrayList<Student>();
        data.add(new Student("1", "Costas", 10));
        data.add(new Student("2", "Nick", 20));
        data.add(new Student("3", "Zoe", 30));
        data.add(new Student("4", "Helen", 40));
        data.add(new Student("5", "Paul", 50));
        return new ListModelList<Student>(data);
    }

    public ListModel<Student> getStudents() {
        return students;
    }

}

Hope that helps

Costas

answered 2014-06-11 23:27:12 +0800

mhj
806 ● 1 ● 7

Hello javiut, have you tried with listbox.selectItem((Listitem) listbox.getLastChild()); ?