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,
Hi, Chad.
I understand you could prefer to share more details privately, so I have created a private case CAS-153831-H5C2L5. We could continue our discussion via the case. You could find details for your current support activity at: https://ko.infragistics.com/my-account/support-activity
Thanks, I read your blog link.
I have a few comments.
First, I'd like to know how I can subscribe to changes like this because they are drastically affecting my productivity, wasting my time reading documentation that is no longer valid.
Second, the fiddle you updated with the selectedItems property usage simply does not work. Give it a shot (click your fiddle link above), when it loads, the combo should match what is in the text.
Third, I understand the intended changes and they make perfect sense (using selectedItems instead of value to be able to support the multi-selection). However, looking at the code in this blog, I became curious to see it in action and I cannot get it to work. Once I moved the code into a fiddle and got it to run, I did notice that the combo did preselect the index 1 as set in code (something that your fiddle mentioned previously did not do). I am not sure what the difference is between the two, but perhaps you can get the first one to work and we'll get an idea of what is going on. Further, in the "igcomboselectionchanging" handler, ui.items[0].data() is not an observable, and the code fails. Calling ui.items[0].data.name() would work, but selectingItems is undefined (I think that was the exception; assuming because you've used the "use strict" directive).
It would really be nice in both cases if you could provide a working example.
Here's the fiddle that I created from the code in the blog: http://jsfiddle.net/1r2kg1ga/11/
Hi, TRE.
First thank you for using our product and I hope that I will be able to help you, with the information that follows.
There were some changed introduced, with one of our service releases. And because our help is updated once per release, the help is not up to date. That's why we've created a blog about this. You can read the information that is needed here. Basically the 'value' option is removed and and 'selectedItems' is added. You can read in the blog about this change. Basically using the 'value' wasn't the best approach of observing the selected value, knowing that observing the selected items is the much more intuitive.
I've also updated you sample jsfiddle.net/.../, to use the latest changes. I'm not exactly sure what you want to achieve, but if you want further assistance on you sample, you can discuss it.
Sorry for the inconvenience, but this change was needed in order to improve the quality and the usage of this knockout extension. And just one information in advance: with our new 15.1 release, our igCombo control is rewritten, and because of the same reason - ease of use and better design. We also needed to adapt the knockout extension to meet new igCombo requirements. So the design is closer to the design of the knockout extension explained in the blog above. So if you plan to use our new version, this month it will be available and the documentation will be updated too.
To your last question: are the enableTextChangedUpdate and enableSelectionChangedUpdate exist only in the extension - the answer is yes. You can use, as a reference, the following topic, where this is described.
I will wait for you feedback.
Can you tell us which build number this is supposed to work in?
I just downloaded this product 2/19/2015. It is version 14.2.20142.2140
Also, I modified the fiddle example that you provided for igCombo/Knockout:
jsfiddle.net/.../ And it does not appear to be working. Notice the text link is working fine, the combo is not linking the value property.
Either I don't have the version that contains this fix (and neither does your hosted files for the sample), or I'm doing it wrong.
Also, enableTextChangedUpdate and enableSelectionChangedUpdate does not exist in your api. Is it specific to the knockout extension?
Please provide answers.
The documentation for this does not appear to be updated.
Does this work for multiple selection combo? I only get one value through.