How to load some data from a url into a select box?

Webix JS
1

Hi,

I’m trying to load some data into a list of options for a select box.

The data url I’m using loads in 4 elements for my table (name, temp, sent, available). In the grid I just attach those to the right columns and everything loads fine. I’d like to load just a list of the names into a select box.

Right now I have:

{ id: “name”, view:“select”, width: 400, align: “right”, label:“name”,
labelWidth: 150, labelAlign:“right”, name:“name”, options: data_url }

Which loads in the proper number of names, but each selection is “undefined.” I’m assuming that’s because it’s loading in an object that contains name/temp/sent/available instead of just the one property I want (“name”).

Thanks.

2

Hi,

ui.select is an html-based control and not so customizable. By default, it expects the id-value pair. As for your dataset, I can suggest using ui.richselect and

a) create a custom datatype (you can set the id as well): http://webix.com/snippet/4874e784

b) define a data template: http://webix.com/snippet/fb2e7bc3

3

Ah, that makes sense. Richselect works, but I think I’m favoring syncing a combo box with a datacollection, though (as roughly shown through this sample: http://docs.webix.com/samples/80_docs/getpopup.html).

Thanks for the help.

4

Although, somewhat related, is there a way to set the default value of a combo box with data loaded in to a string gotten from a selected object?

Right now I have:

{ id: “name”, view:“combo”, width: 400, align: “right”, value: curName,
options: {
view:“suggest”,
body:{
data:curOptions,
template:"#name#",
yCount:10
}
} }

curOptions is the full data collection of names (like {“Joe”,“James”,“Frank”}) etc., and it loads that data as options for the combo box fine.

curName is the current name from the selected cell on my grid. When I try to do this the default set value of the combo box still stays blank, despite the string I’ve gotten being a valid option in the list. Do I need to somehow get the ID of the option value or something?

5

Yep, it is expected that you are providing ID as value for the combo, not the text label.

If you are loading data from a grid ( datatable ), you can store ID’s of records in datatable and convert them to the labels for rendering only.

6

Hmm, okay. Is there a way to “search” through the list for a certain input, get the id of that value, and then set the control’s value to that id? I have two different data sources (one with names currently on the datatable and one with all possible selectable names) and am trying to link it so when the user selects a row on the grid, it selects that takes the “name” from the selected row and picks that as the default value for the combo box. I don’t think I can attach the ids from the data because they’re different.

I’m trying to do it with find, but it’s not coming up with anything (hard coded value in for testing purposes):

$$("name").getPopup().getList().find(function(obj){
                                                    return obj.name.toLowerCase().indexOf("joe") != -1; })

Am I missing something with find?

Edit: My not so elegant solution otherwise is to do a for loop through all of the items in the list and compare the selected name from the grid to the name in my name options list and stop when it finds the right value, grab the id of that corresponding value, then set the combo box’s value to that id.

7

The find in above code must work correctly.
The only case, when problem can occur, if you are using the above code just after ui creation, and data can be not loaded from server yet

8

I still think that the best use-case will be to use

  • datacollection - objects that have real id and name property.
  • datatable - column which has id as value, and uses collection to map IDs to labels automatically
  • combo - list of options from datacollection.

In such case, all controls will show a label, and in the same time will use the id as value.

9

Ah, ok. I had a bit of trouble syncing the ids of the objects up in my datacollection and datatable (I could get the corresponding id from the selected datatable row, but had trouble defining the id correctly in my datacollection), which is why I opted to go the linear search route.

Edit 1: I get what you’re saying now and think I’m able to set the corresponding id, I’m trying it now, I’ll edit this again in a little bit when I’ve made a first pass at it. I didn’t realize the id of a combo box would automatically set to a corresponding id from a datacollection.

Edit 2: Ok, I was successfully able to link up the nameids from my datacollection to the combo box’s ids, then just use combobox.setValue to change the combo box to the nameid from the dataset I was using for the datatable. Much more efficient than a linear search :slight_smile:

Thanks for all the help!