Select item from igCombo by Value

I’m loading JSON data into an igCombo via the dataSource property. I’ve set the valueKey of the igCombo to a property of the JSON data. I would like to select an item from the igCombo by the value of the property set by the valueKey.

———————

var jsonData = [
{textValue: "this is dummy data", importantId: 1 },
{textValue: "this is also dummy data", importantId: 2 }
]

$("#checkboxSelectCombo1").igCombo({
width: "270px",
dataSource: jsonData,
textKey: "textValue",
valueKey: "importantId"
});

//Now I need to add code that would select the second item

//("{textValue: "this is also dummy data", importantId: 2}")

//from the igCombo.

//The API suggests that the "select" method

//(http://www.igniteui.com/help/api/2015.2/ui.igcombo#methods:select)

//should be used.

//Neither of these lines work as expected.

$("#checkboxSelectCombo1").igCombo("select", jsonData[1]);

$("#checkboxSelectCombo1").igCombo("select", {importantId: 2});

$("#checkboxSelectCombo1").igCombo("select", 2);

———————

I found the answer after some trial and error. The "value" method (http://www.igniteui.com/help/api/2015.2/ui.igcombo#methods:value) is the one that should be used.

$("#checkboxSelectCombo1").igCombo("value", 2);

Hello,

Thank you for your question.

I am glad that you’ve managed to find the solution. I wanted to add also that there are 2 more ways to select item from the combo list items. Have a look at the code snippet below. I have also uploaded a working sample, I hope you will benefit from it.

Code snippet:

$("#singleSelectCombo").igCombo({
                width: "270px",
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                dropDownOnFocus: true
            });

            $("#multiSelectCombo").igCombo({
                width: "270px",
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                multiSelection: {
                    enabled: true
                },
                initialSelectedItems: [{
                    index: 2
                }, {
                    index: 4
                }]
            });

            $("#checkboxSelectCombo").igCombo({
                width: "270px",
                dataSource: colors,
                textKey: "Name",
                valueKey: "Name",
                multiSelection: {
                    enabled: true,
                    showCheckboxes: true
                }
            });

            // With 'index' method
            $("#singleSelectCombo").igCombo("index", 0);

            // With 'value' method
            $("#multiSelectCombo").igCombo("value", ["White", "Yellow"]);

            //With 'select' method
            $("#checkboxSelectCombo").igCombo("select",
                $.makeArray(
                    $("#multiSelectCombo").igCombo("itemsFromIndex", 0).element,
                    $("#multiSelectCombo").igCombo("itemsFromIndex", 1).element
                ), {}
            );

            // This is also a valid definition
            //$("#checkboxSelectCombo").igCombo("select", $("#multiSelectCombo").igCombo("itemsFromIndex", 0).element.add($("#multiSelectCombo").igCombo("itemsFromIndex", 1).element), { });

 

Attachments:

1. SelectItem.zip