Please see attached. I've taken the combo knockout example from Infragistics web site and added another combo box to the bottom of it. This combo box code originated from server side MVC and I copied into this example. The data source for the available options in the combo is also set on server side, so the list is NOT being filled by knockout. I want to bind the combo "selected" value using knockout. I sort of have this working which you can see in the attached example. What's not working is that initially when I open this page, even though Adam Sandler is selected in the list, it is not defaulted in my newly added combo box. I know it is bound correctly though because it's working after that. Here are steps you can go through.

1. Open the page - you'll see Adam Sandler is "selected" in various controls, but not my combo at the bottom. Why is this?

2. Select another actor and then click back on Adam Sandler. Now you can see Adam Sandler is also selected in my newly added combo box, so I know the binding is working correctly in some instances.

3. Add a new actor named LB. Once you do this, you will again see my newly added combo get filled with "Pounds" (the description for LB).

How can I get the correct selected value in the combo box when the page is opened initially using Knockout?

Thanks!

Hello Ryan,

Thank you for the provided information and your patience!

Ryan Rupp said:

1. Open the page - you'll see Adam Sandler is "selected" in various controls, but not my combo at the bottom. Why is this?

The reason this is happening is because you are initializing the last combo twice - via the data-bind="igComb....." attribute and via the javascript code. You can set the following options in the html like that:

<span data-bind="igCombo: { 
 value: actorName,
 dataSource: secondCombo,
 textKey: 'DisplayText',
 valueKey: 'Identifier',
 }">
</span>

 and set the remaining options from the javascript code like that: 

var comboOptions = {
	compactData: false,
	width: '100%',
	height: '25px',
	allowCustomValue: false,
	caseSensitive: false,
	disabled: false,
	enableClearButton: true,
	// filteringType: 'local',
	// filterExprUrlKey: 'filter',
	nullText: '',
	renderMatchItems: 'multi',
	inputName: 'WorkInstrDetailSectionTotalWeightUMValue',
};

for (var option in comboOptions) {
	$('#WorkInstrDetailSectionTotalWeightUMValue').igCombo('option', option, comboOptions[option]);
}

The filteringType and filteExprUrlKey are commented because there is a limitation when using this approach in that scenario and if you enable them on the initial load your desired option would not be selected. Note that when you pass an object to the igCombo constructor, for instance igCombo({ .... list of options and configurations... }), the grid is being reinitialized and that could cause some unexpected behaviors. So I suggest if you have already initialized igCombo or any kind of IgniteUI control use the option method as in the snippet above. I suggest you not to mix the MVVM pattern like this with igCombo jQuery initialization, but keep it simple as much as possible, i.e. one of the both approaches, but not both. 

Ryan Rupp said:

3. Add a new actor named LB. Once you do this, you will again see my newly added combo get filled with "Pounds" (the description for LB).

The reason this happens is because when you add LB you have set as value key ("Identifier": "LB" in the data source) LB in your combo, but the text is Pounds ("DisplayText": "Pounds" in the data source), and the selected value key that is bound for the combo corresponds to "DispayText" which is "Pounds".

If you have any additional questions feel free to ask. 

good job !

Hello Ryan,

Thank you for your cooperation!

I am glad that I have managed to help you.

That's disappointing that you can't easily use the MVC wrapper and still use knockout binding. I have this working now so I don't need any further assistance. Thanks for the help.

Hello Ryan,

It is supported but I wouldn't recommend it. If you can provide me another sample in Asp MVC this time, with the view, the controller, with some mocked data and model and view model, I could make this work for you.

So if I'm understanding you correctly, I take this to mean that knockout binding with igCombo is not really supported if the igCombo is initialized via MVC Helpers? Is that accurate? Or at the very least you wouldn't recommend it?