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. 

When you say not to mix the different methods, I'm not sure what you are saying. The code that is generated is coming from the IgniteUI MVC wrapper for the combo box. This is the server side code I have:

comboBoxHtml = HtmlHelperExtensions.Infragistics(this.Helper)                

.Combo()                

.ID("myControl")                

.Width("100%")                

.Height("25px")                

.AllowCustomValue(false)                

.CaseSensitive(false)                

.CompactData(false)                

.Disabled(false)                

.EnableClearButton(true)                

.FilteringType(ComboFilteringType.Local)                

.HtmlAttributes(customHtmlAttributes)                

.RenderMatchItemsCondition(ComboRenderMatchItemsCondition.Multi)                

.TextKey("DisplayText")                

.ValueKey("Identifier")                

.DataSource(metadataList.OrderBy(x => isDescUsedAsDisplay ? x.Description : x.Identifier))                

.DataBind()                

.Render(); 

The data-bind inside the span is coming because I am trying to pass it as part of the "HtmlAttributes" that is being passed. How do you recommend creating the combo box from server side MVC and filling the data source from the server, but then still binding the selected value that defaults on the screen using knockout?

Hello Ryan,

Thank you for the provided information!

Now I understand completely your issue, let me explain what is happening.

You are initializing your combo twice - once using the knockout extension and once using Html MVC helpers and some parts of it are being overridden. In your scenario the both patterns - MVVM and MVC are mixing. So I suggest you to use only one of them, not both. Using the both patterns will make your application code harder to maintain and extend, and even if I can suggest you workaround for your scenario, that approach could lead to possible future issues.

If you want to use the knockout extensions for IgniteUI, you can return your data source from a restful service (most commonly Asp Web Api) and then from the client side you can make ajax request for your data source and bind it to the combo using the knockout extensions. However if your application is not completely MVVM oriented I suggest you to use only MVC Helpers and javascript apis for igCombo and set your selected value for the second combo on selection changed for the first one.

If you have any additional questions, please let me know. 

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?

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.