How do we get the selected value from a combo box using an observable binding?
We noticed that there isn't a method of obtaining the value or selected value. But there is a property for selected items. I see in the example on Ignite UI that they use a view model method to find the actor internally. Is this the only way of getting the selected value?
What if our arrays contain thousands of records? Do we have to loop through all records to find our match?
Hi, Daniel.
Thank you for using our product and I hope that I will help you with the following answer.
You can get the igCombo text that is shown in the input using the "text" method:
$("#combo").igCombo("text")
You can get the igCombo value using the "value" method:
$("#combo").igCombo("value")
You don't need to iterate over all the records. Here you can find reference to all the igCombo methods.
The loop that you are looking is, I guess, in the following sample. There all the items are added to observable array, because we can add and remove items to the drop down collection. The igCombo supports also this scenario, when you add or deleted items from the data source in the Model, then the igCombo items list are also updated. This happens without the need to rebind the igCombo with the new data. But this is different binding from the one in the igCombo text input. If you want only the text there to be updated, and your list items are static, you need only observable for the igCombo input, which in the previous example is done using the following code:
this.actorName = ko.observable(self.actors()[0].name);
The Knockout extension for the igCombo is done in way that the observable item is the "text" one. If you want to make the "value" of the igCombo to be observable, instead of the "text", you need to do this manually. You can use the "selectedIndex" method and then use "itemByIndex" method to get the selected list item. Then having the value, which is observable, you can notify manually that it is changed. I don't know if this is the case your trying to achieve, sorry if you mean something else. If you want to observe the "text", this is done automatically by the igCombo, cause this is the expected observed value in most of the cases.
For any further questions, don't hesitate to ask.
Best regards,
Nikolay Alipiev
Check out the data source for actors. It provides a name and an ID. For display purposes, which are interested in showing the name. But behind the scenes the ID is our primary key. Therefore, we would prefer to bind the ID instead of the name. At the moment, the API does not support that. When the data source is a Key/Value pair, we are constricted in using just the KEY.
I understand we can call the igCombo API to obtain the value directly, but this violates the KO pattern of decoupling the control and our models.
Another example: In HTML when we want to display a SELECT list we can do the following:<select> <option value="nm0001191">Adam Sandler</option> <option value="nm0000222">Brooke Shields</option> . . .</select>The actor name shows up the drop down list, but obviously the developer wants the underlying value for any behind the scenes work. When utilizing Knock Out, the value of the options are the important piece of data and currently the API doesn't NOT support a way for Knock Out to notify our models of that selected value. Currently I am stuck with just the name, then I'd have to iterate over the data source to find the value. And if I have hundreds of records, it is not optimal.
The ideal solution is to be able to obtain the value via binding without knowing the control it is bound too. We should not have to use the igCombo API to get it either. "Text" works great. But we need a similar implementation to obtain the "Value."
Hopefully I explained it thoroughly.Thanks,