0

selectbox or combobox - getting nested item set

asked 2012-05-18 23:42:04 +0800

rickcr gravatar image rickcr
704 7

I'm having trouble figuring out two things...
1) How to get my selectbox/combobox item properly set
and
2) Since I seem to have to bind this selectedItem, that creates issues having the change immediately reflected

So for example..

class Employee {
     Department department;

Now I have a list of Employees, user can select one to edit and you have an image similar to the following:

https://img.skitch.com/20120519-cs5y5c57hyu6mqud82k5wb16a.jpg

The editable box is a gridbox and I have a relevant portion below:

<row>Last: <textbox value="@load(vm.selected.lastName) @save(vm.selected.lastName, before='saveEmployee')"/></row>
<row>
<selectbox id="department" width="150px" model="@load(vm.departments)" selectedItem="@bind(vm.selected.department)">
	<template name="model" var="dept" >${dept.name}</template>
</selectbox>
</row>

selected represents the "Employee" object. What I'm trying to do is get the proper department object selected in the dropdown shown in the screen shot, AND I also prefer to not have it really bound, since I don't want any changes to the department selection to immediately show up in the grid until after I hit save. Notice how the texbox has @load and @save but I'm not sure how to set a similar thing on a selectbox (plus I still have the issue of getting the selectedItem set correctly.)

Is there something special I need to do on my viewModel ?

Is this kind of functionality documented somewhere since it seems pretty important? I didn't see anything in the latest Reference Guide.

delete flag offensive retag edit

7 Replies

Sort by ยป oldest newest

answered 2012-05-19 00:22:12 +0800

rickcr gravatar image rickcr
704 7

updated 2012-05-19 00:25:13 +0800

I sure hope I can use selectedItem somehow, since I created a lot of mess when I switched to using selectedIndex and it's not elegant...

I have to set the correct selectedDepartmentIndex on my ViewmModel when the user makes a selection of an employee... so you have ugly code like...

@NotifyChange({"selected","selectedDepartmentIndex"})
public void setSelected(Employee selected) {
	logger.debug("setSelected");
	this.selected = selected; 
	if (selected != null && selected.getId() != null) {
		for(int i=0;i<  departments.size();i++) {
			if (departments.get(i).getId() == selected.getDepartment().getId()) {
				this.selectedDepartmentIndex = i;
				break;
			}
		}
	}
}

Then I also need to remember on saving my employee to translate that selected index into the correct value object. (It always worries me using array baed stuff like this, I'd prefer to be handled the real departmentId or even better have it set the real Department item), but anyway I then have...

@NotifyChange({"selected","employees"})
@Command
public void saveEmployee(){
	logger.debug("saveEmployee selected {}", selected);
	selected.setDepartment(departments.get(selectedDepartmentIndex));
	employeeService.saveEmployee(selected);
	this.employees = employeeService.getEmployees();
}

The above seems to be working. Is this a common approach? I'm sure there is a way to get it to work using "selectedItem" so I'd prefer that if possible.

link publish delete flag offensive edit

answered 2012-11-22 13:05:28 +0800

selement gravatar image selement
12

Hi rickcr,

Trying to get a combo box which is wired up to a grid (when user clicks on row of grid to edit) to populate the combo box. Actually, I am still trying to figure out how to populate the items of cb from a groovy query which has its bound data source from a different domain. hope I make sense. Can you post your full code? Many thanks

link publish delete flag offensive edit

answered 2012-11-22 16:54:58 +0800

rickcr gravatar image rickcr
704 7

updated 2012-11-22 16:57:37 +0800

Hi selement, that code above that I have is from some old stuff pre MVVM approach. If you're using the new approach where you ViewModel backs your zul, it's super easy to get a handle the selected row...

//view model
private Animal selectedAnimal;
private FooBar selectedFooBar; //setter/getter
private List<FooBar> fooBarList;

@NotifyChange("someComboBoxData")
public void setSelectedAnimal(Animal animal) {
    this.selectedAnimal = animal;
    this.fooBarList = service.getFooBars(animal.getId); 
}
    
//zul
<listbox  model="@load(vm.animals)" selectedItem="@bind(vm.selectedAnimall)" ....></listbox>

//bind your combo box to someComboBoxData

<listbox  model="@load(vm.fooBarList)" selectedItem="@bind(vm.selectedFooBar)"
										  rows="1" mold="select">....

Your selectedAnimal method will fire when they select a row. Which will call to get the data you need for the combo box and the combo box is bond to the data to returned so it'll show up.

link publish delete flag offensive edit

answered 2012-11-24 09:55:42 +0800

selement gravatar image selement
12

Thanks rick, any chance to post your full code or email it? I really appreciate it as I am running out of patience with this platform and tend to learn much quicker from full code. Thanks!

link publish delete flag offensive edit

answered 2012-11-24 15:01:46 +0800

rickcr gravatar image rickcr
704 7

@Selement first can you draw a screen shot or describe a real life example using something like a list of "animals" to describe what you what you want to do?

You want to select a row (click on a row) and then have 'what' exactly happen?

link publish delete flag offensive edit

answered 2012-11-25 05:36:29 +0800

selement gravatar image selement
12

Hi Rickcr,

My issue is exactly the same as your original post to this thread. That is, your example posted on Feb 09, 2012 ; although I am using different data. So my screenshot will look just like the one you posted. I believe from your screen shot that the main data is coming from the employee table, with the dept code stored there, while the data for the dept code combo box is coming from another table, (departments ? at least this is what I require), and the user can see the dept list selection. When user edits the record, the combo box will select the dept code number and the combo box will include the dept code and department name. in fact it is preferable to show the dept name and have the dept number bound to the employee table.

I have not got to the point of wiring up the combo box items to load from the department table. How are you doing that? Do you create the dept combo box on the fly and load items on the fly, server side, or is the box wired up to the dept table datasource? I can't find any code showing how to do this which is my problem.

Concerning moving to zk MVVM, that requires grails 2.0 I believe. My problem is too many bugs with getting that working with oracle; I am using STS free version which has been a source of problems for me. Not sure if you have code for MVC i.e. that your original post refers too...even though you appear to move to the latter. If you have both versions that would be great!

I really appreciate your help!

link publish delete flag offensive edit

answered 2012-11-25 20:18:05 +0800

rickcr gravatar image rickcr
704 7

Selement..

"I have not got to the point of wiring up the combo box items to load from the department table."

That part is easy. note, the model="@load(vm.departments)" that means I have a getter in my Model class getDepartments(); So in my controller, I do something like

@NotifyChange("departments")
public void getDepartments() {
    if (departments == null) {
        departments = departmentService.getDepartments();
    }
   return departments;
}

In my case my departmentService uses MyBatis to get the departments but that can be anything.. Hibernate, SpringJDBC, hardcoded list, whatever. Not really important.

"Concerning moving to zk MVVM, that requires grails 2.0 I believe. My problem is too many bugs with getting that working with oracle; I am using STS free version which has been a source of problems for me. Not sure if you have code for MVC i.e. that your original post refers too...even though you appear to move to the latter. "

I'm a fan of Groovy but i'm not using Grails. I dont' see how you even benefit using Grails with ZK but maybe there is some, but I don't see it.

I plan on getting to a MyBatis/ZK tutorial online which I think you'll like. It's so simple in my opinion and easy to understand. (Note: I've always preferred MyBatis (formerly iBATIS over Hibernate.. just my personal preference. )

Note, the key to getting the selected item to show up in your combobox regardless of MVVM or straight Composers is to be sure that you set the selectedItem to be the actual object that binds your list for your combobox box. In my second post at the top of this thread I show one way I've done it.

First get your combo list items displaying before you even worry about setting the selected one. It sounds like you haven't even done that yet.

link publish delete flag offensive edit
Your reply
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

RSS

Stats

Asked: 2012-05-18 23:42:04 +0800

Seen: 480 times

Last updated: Nov 25 '12

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