Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Have a look at this sample: <a href="http://www.infragistics.com/products/jquery/sample/combo-box/bind-combo-with-knockoutjs" rel="nofollow">Bind Combo With KnockoutJS</a> (Durandal uses Knockout, so you should be able to take most of this sample's code and reuse).</p> <p>Basically, in your viewmodel you will need an extra observable that will hold the current selection, in this sample it's the 'actorName' defined as:</p> <pre><code>function ViewModel(actorsList) { var self = this; this.actorsList = actorsList; this.actors = ko.observableArray(self.actorsList); // The name of the currently selected customer. this.actorName = ko.observable(self.actors()[0].name); } </code></pre> <p>(I've edited out some as the sample has a second select element used to modify the combo slection)</p> <p>Then in your combo in the view you want to bind this extra observable to the 'text' property like in the sample:</p> <pre><code>&lt;span id="comboActors" data-bind="igCombo: { text: actorName, dataSource: actors, textKey: 'name', valueKey: 'id', allowCustomValue : true, enableSelectionChangedUpdate: true, width: '200', mode: 'dropdown', enableClearButton: false }"&gt;&lt;/span&gt; </code></pre> <p>Notice how name is the value you pass to the viewmodel observable and the same 'name' property is defined as text key, which is why the combo will actually select the proper item when you set the text. Now all you need to do is modify the value, for example:</p> <pre><code>viewModel.actorName("Jeremy Irons"); </code></pre> <p>And the combo will change selection (you can even try this with the sample using the code in the console). That's the basics, there's a help topic on <a href="http://help.infragistics.com/NetAdvantage/jQuery/2013.1/CLR4.0?page=igCombo_KnockoutJS_Support.html" rel="nofollow">Configuring Knockout Support (igCombo)</a> <a href="http://knockoutjs.com/documentation/introduction.html" rel="nofollow">Knockout</a> / <a href="http://durandaljs.com/pages/docs/" rel="nofollow">Durandal</a> documentation for you to check out in case you can't fit this implementation in your project.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload