In my MVC View I create an igCombo as follows:
@(Html.Infragistics().Combo()
.ID("cboAccount")
.Width("260")
.ValueKey("id")
.TextKey("AccountName")
.EnableClearButton(false)
.AllowCustomValue(false)
.Mode(ComboMode.DropDown)
.NullText("Select Account")
.SelectedIndexes(new int[] { 0 })
.DataSource(Model.Accounts)
.DataBind()
.Render()
)
@Html.Hidden("hidSelectedAccountID")
I now need to retrieve the selected value when the selected index is changed. To achieve this I've added the following javascript to the view:
$.ig.loader(function () {
// Assign event handler to the selectionChanged event
$("#cboAccount").igCombo({
selectionChanged: function (evt, ui) {
// Add selected item data only if an item has been selected
if (ui.items && ui.items[0]) {
// Get the selected item
var item = $("#cboAccount").igCombo("itemByIndex", ui.items[0].index);
document.getElementById('hidSelectedAccountID').value = item["value"];
}
});
When using this javascript the selected item is successfully retrieved, BUT the combo box is no longer set to the correct selected index on load (from the SelectedIndexes setting).
Could you please let me know how to resolve this. My aim is to post the selected value to the controller. Can this be done without writing custom javascript?
That works great, thanks for your help.
Hi, dogle,
You have to use this approach:
$(document).delegate("#company", "igcomboselectionchanging", function (evt, ui) {
var item = $("#company").igCombo("itemByIndex", ui.items[0].index);
console.log(item["value"]);
Regards,
Stanimir Todorov