SelectBox set selection

classic Classic list List threaded Threaded
25 messages Options
12
Reply | Threaded
Open this post in threaded view
|

SelectBox set selection

hkalyoncu
hello
here is an another dumb question for SelectBoxes.

lets say i have a selectBox and  a controller for it which is created with a data store.
and i have a supplied string value which is also same with one of the items label in SelectBox.
i want to display selectBox showing this item as selected.

regards
huseyin

 
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
Hello huseyin,

you can just modify the selection array of the controller of the select box to get that done. Replace the first item in the selection array and the selection will change automatically. Just take a look at the playground example to see how it works. Type a,b,c or d in the textfield to see the selection changing.


var box = new qx.ui.form.SelectBox();
this.getRoot().add(box);

var model = new qx.data.Array(["a", "b", "c", "d"]);
var controller = new qx.data.controller.List(model, box);

var input = new qx.ui.form.TextField();
input.setLiveUpdate(true);
this.getRoot().add(input, {left: 130})

input.bind("value", controller, "selection[0]");


Somehow, it still impresses me how less code is needed for such a use case. :)

Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
thanks for the answer martin

i wonder how can it be done if this supplied text is not an input value but just an ordinary variable?

thanks
huseyin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
Hi,
thats easy too:

var v = "a"
controller.getSelection().setItem(0, v);

for example.

Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
thanks again

i think these examples (and some others in this list which are also about selectBoxes and binding) should be added to demo browser.  Because as i can see lots of questions asked here are about selectbox data handling.

regards
huseyin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
Hi,
that's a good idea. I add the code as a demo.
Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
In reply to this post by hkalyoncu
Hi,
I have added a demo with r21823.
Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
hello

thanks for the work martin.
Also i found some time to try your example for a data store case. But unfortunately it didnt work for me. Could you please check this http://bit.ly/cuKY4s playground example.

regards
huseyin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
hello

for this http://bit.ly/9TgzWK playground example
how can i set selected item not the first one but some other item (for example 5th one) default?
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
hello

there is something i could not understand;
setSelection() only accept widget i.e a ListItem.
but for a select box in which data loaded with a json store, as i can see accessing each item (listItem) impossible(without selection).
then in this case how are we supposed to set selection ?

regards
huseyin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
In reply to this post by hkalyoncu
Hello huseyin,
first of all, sorry for the late answer. I missed your posts because you answered a former already done question. Take a look here to see what I mean:
http://n2.nabble.com/SelectBox-set-selection-td4798272.html#a4798272
It's always better to start a new thread if you have a new question.

But now to your question:
In the playground example are two minor mistakes. First, the store needs some time to load the data. Until the data is not available, you can not change the selection. The load event of the store could help you out in this case. The second thing is a bit more complicated. In an easy scenario, your model contains only strings. Those strings will be shown in the selectBox as labels. In your example, the models which are shown in the select box are objects, created by the store. You can always take a look at the model to see what the store created. In the case you have objects in your model, you have to push exactly those models into the selection and not the string you see in the select box.
Just take a look at the example here:
http://bit.ly/9hhB1p

Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

hkalyoncu
thanks for the tip martin

its really appreciated


Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

ReHa
In reply to this post by MartinWittemann
Hello,

i saw the example above with only the displayed values "a", "b", "c", ...

But how to do this model and controller with id's and values, like
id=1, value="a"
id=2, value="b"
...

In the select-box the values should be shown,
in the model the id's should be used.

Can anyone give an example for this usecase?
Thanks - ReHa.
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
Hello ReHa,
first of all, please do not reply to a existing question asking a new one. The threaded view will sort in your questions as an answer of the older. That way, your new question can easily get lost.

Now to your question:
The use case you need can not exactly work with qooxdoo. The model is always set by the controller which uses usually the whole model object which holds for example the label as well. Only numbers can not work with the controller. But that should not be a problem because you can store the number as a property of the used model. Take a look at the code (Playground ready) to see how you can get it done:

// UI
var selectBox = new qx.ui.form.SelectBox();
this.getRoot().add(selectBox);

// Data
var data = [{label: "a", id: 1}, {label: "b", id: 2}, {label: "c", id: 3}];
var model = qx.data.marshal.Json.createModel(data);

// controller
var controller = new qx.data.controller.List(model, selectBox, "label");

// model proof
var label = new qx.ui.basic.Label();
this.getRoot().add(label, {left: 130, top: 5});
controller.bind("selection[0].id", label, "value");

Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

ReHa
Sorry for posting at the wrong place - and thanks for your example!

Your example works, but i have to insert this small example into a complexer form-controller.
I tried to adapt your example to my formController by adding:

formController.addTarget(controller, "selection[0].id", "GlobalID", true); // GlobalID is the ID-name in the model of the form.

but this doesn't work in none of both directions.

Regards, ReHa.

Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

MartinWittemann
Administrator
Hi,

Well, you can not just take the single value binding code and give it to the form controller. I didn't expect that to work. :)

I added for the upcoming release a demo to show how form and list controller can work together. I changed it a bit to show how you can add your difference between name and id to the selectbox:

http://tinyurl.com/2w6df5n

As you can see in the log, the name and the id is in the model so reading one of both should not be a problem.

Regards,
Martin
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

ReHa
Sorry, for asking again, but i hang for over half a day on this "simple" problem, without finding a solution.


Here is my part of code. How can i solve the problem to have a selection-box, for which the corresponding-ids should be stored in database.
I need a solution, which works bidrectional.


var form = new qx.ui.form.Form();
// Title:
var title = new qx.ui.form.TextField();
form.add(title, "Title", null, "Title");
..
// Selection:
var selectBox = new qx.ui.form.SelectBox();
form.add(selectBox, "Selection", null, "SelectionID");
var selData = [{label: "a", id: 1}, {label: "b", id: 2}, {label: "c", id: 3}]; // Comes out of database too, but this is not the problem here
var selModel = qx.data.marshal.Json.createModel(selData);
var selController = new qx.data.controller.List(selModel, selectBox, "label");
...
var model = qx.data.marshal.Json.createModel(data); // data is out of database as an object with data.Title, data.SelectionID, ...
var controller = new qx.data.controller.Object(model);
controller.addTarget(title, "value", "Title", true);
controller.addTarget(selectBox, selection[0].id", "SelectionID", true); // Doesn't work! How can i get the selected id to my model.SelectionID (bidirectional) ???

// Serializiation ...


Thanks for any help!!!!
ReHa
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

Eduardo Robles Elvira
In reply to this post by MartinWittemann
On Wed, Apr 28, 2010 at 11:40 AM, MartinWittemann
<[hidden email]> wrote:

>
> Hi,
>
> Well, you can not just take the single value binding code and give it to the
> form controller. I didn't expect that to work. :)
>
> I added for the upcoming release a demo to show how form and list controller
> can work together. I changed it a bit to show how you can add your
> difference between name and id to the selectbox:
>
> http://tinyurl.com/2w6df5n
>
> As you can see in the log, the name and the id is in the model so reading
> one of both should not be a problem.
>
> Regards,
> Martin

Hello Martin,

Just some random thoughts in the night: it could be awesome and
powerful if a list controller could have a modelPath. So you could do
something like:

....
var = data [
          {name: "male", id: 1},
          {name: "female", id: 2},
          {name: "dont know!", id: 3},
          {name: "Alien", id: 4}
];

var model = qx.data.marshal.Json.createModel(data);

var gender = new qx.ui.form.SelectBox();
var controller = new qx.data.controller.List(model.getGender(), gender, "name");
controller.setModelPath("id");
form.add(gender, "Gender");
....

Also sometimes one only needs a quick and dirt select box, without
wanting to think about controllers, etc. To this extents I have a
simple SelectBox that works like this (which internally of courses
uses a marshaler and a list controler):

form.add(new qx.ui.form.SimpleSelectBox(["male", "female"]), "Gender");


Regards,
    Eduardo Robles Elvira.

------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

rsantiagopaz
In reply to this post by ReHa
ReHa (sorry my poor english), try something like this modification of your example:


var form = new qx.ui.form.Form();
// Title:
var title = new qx.ui.form.TextField();
form.add(title, "Title", null, "Title");
..
// Selection:
var selectBox = new qx.ui.form.SelectBox();
form.add(selectBox, "Selection", null, "SelectionID");
var selData = [{label: "a", id: 1}, {label: "b", id: 2}, {label: "c", id: 3}]; // Comes out of database too, but this is not the problem here
var selModel = qx.data.marshal.Json.createModel(selData);
var selController = new qx.data.controller.List(selModel, selectBox, "label");

var index = [];
for (var i = 0; i < selModel.length; i++) {
        index[selModel.getItem(i).get("id")] = model.getItem(i);
}
...
var model = qx.data.marshal.Json.createModel(data); // data is out of database as an object with data.Title, data.SelectionID, ...
var controller = new qx.data.controller.Object(model);
controller.addTarget(title, "value", "Title", true);

selectBox.setModelSelection([index[data.SelectionID]]);
Reply | Threaded
Open this post in threaded view
|

Re: SelectBox set selection

ReHa
I found a workaround that works with an invisible helper field, which is triggered by the selectionBox and bound to the model:

---
// selector - only for selection - no data binding
var selector = new qx.ui.form.SelectBox();
var selData = [{label: "a", id: 1}, {label: "b", id: 2}, {label: "c", id: 3}];
for (var i=0; i<selData.length; i++) {
        selector.add(new qx.ui.form.ListItem(selData[i].label, null, selData[i].id));
}
form.add(selector, "Selection");
selector.addListener("changeSelection", function(e) {
        // Trigger SelectionID in model:
        var curItem = e.getData()[0];
        var curID = curItem.getModel();
        this.model.setSelectionID(curID);
}, this);


// SelectionIDField - bound to model:
SelectionIDField = new qx.ui.form.TextField(); // Workaround: Invisible in form - but bound to model - triggered by selector

controller.addTarget(SelectionIDField, "value", "SelectionID", true);

// initialize selector:
selector.setModelSelection([this.model.getSelectionID()]);
---

But im really asking: Is it worth so much time (nearly 1 day) for a thing which is done in simple html in just one line of code????
<select name='SelectionID'><option value='1'>a</option><option value='2'>b</option><option value='3'>c</option></select>
Ok: I am new to qooxdoo, but i'm really asking if gooing on with qooxdoo ...

By ReHa




12