igGrid セルの編集にコンボボックスを利用する

igGrid では編集時にデフォルトの動作として、データタイプに応じたエディタが自動生成されますが、エディタにコンボボックスを利用することもできます。下記、実装例です。

$("#gridProducts").igGrid({
    ...
    columns: [
        { headerText: "", key: "ID", dataType: "number", hidden: true },
        { headerText: "メーカー", key: "Manufacturer", dataType: "string", width: "20%" },
        { headerText: "名前", key: "Name", dataType: "string", width: "20%" },
        { headerText: "説明", key: "Description", dataType: "string", width: "30%" },
        { headerText: "カテゴリ", key: "CategoryID", dataType: "number", width: "30%", formatter: formatCategoryCombo }
    ],
    features: [
        {
            name: 'Updating',
            columnSettings: [{
                //The combo is defined as an editor provider. Combo options are defined under 'editorOptions'.
                columnKey: "CategoryID",
                editorType: 'combo',
                required: true,
                editorOptions: {
                    mode: "dropdown",
                    dataSource: northWindCategoriesJSON,
                    textKey: "Name",
                    valueKey: "ID"
                }
            }],
            ...
        },
        ...
    ]
});

参照：igCombo エディター プロバイダーの操作
https://jp.igniteui.com/help/working-with-combo-editor-provider