CODEWITHSUNDEEP
javascriptknockout.jsinfragisticsdurandalignite-ui
user2838588
user2838588

Reputation: 11

igCombo in durandal bind the selectedItems

I have an infragistics Ignite UI combo in an html page, in Durandal project. I wants its selectedItem property to be bound to any variable in the JavaScript behind. How can I do it? thank you.

Upvotes: 0

Views: 982

Answers (1)

Damyan Petev
Damyan Petev

Reputation: 1635

Have a look at this sample: Bind Combo With KnockoutJS (Durandal uses Knockout, so you should be able to take most of this sample's code and reuse).

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:

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);
}

(I've edited out some as the sample has a second select element used to modify the combo slection)

Then in your combo in the view you want to bind this extra observable to the 'text' property like in the sample:

<span id="comboActors" data-bind="igCombo: { 
    text: actorName,
    dataSource: actors,
    textKey: 'name',
    valueKey: 'id',
    allowCustomValue : true,
    enableSelectionChangedUpdate: true,
    width: '200',
    mode: 'dropdown',
    enableClearButton: false
}"></span>

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:

viewModel.actorName("Jeremy Irons");

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 Configuring Knockout Support (igCombo) Knockout / Durandal documentation for you to check out in case you can't fit this implementation in your project.

Upvotes: 3

Related Questions