igSpreadsheet セルにドロップダウンリストを追加する方法

igSpreadsheetのセルにドロップダウンリストを追加してその中から値を選択するようなUIを作りたい場合は、Excelライブラリーを使用します。

igSpreadsheetに紐づいているworkbookからworksheetオブジェクトを取り出します。ListDataValidationRuleオブジェクトを生成し、setValues()でドロップダウンリストに表示したい項目を設定します。そして、ListDataValidationRuleをdataValidationRule()メソッドを使って該当セルに設定します。

// ①igSpreadsheetに紐づいているworkbookからworksheetオブジェクトを取り出します。
var workbook = $("#spreadsheet").igSpreadsheet("option", "workbook");
var worksheet = workbook.worksheets(0);

// ②ListDataValidationRuleオブジェクトを生成し、setValues()でドロップダウンリストに表示したい項目を設定します。
const valueRule = new $.ig.excel.ListDataValidationRule();
valueRule.setValues(["りんご", "みかん", "いちご", "その他"]);

// ③ListDataValidationRuleをdataValidationRule()メソッドを使って該当セルに設定します。
var cell = worksheet.getCell("B2");
cell.dataValidationRule(valueRule);

実行結果

サンプル

APIリファレンス

• ListDataValidationRuleコンストラクター
  • https://jp.igniteui.com/help/api/2021.1/ig.excel.ListDataValidationRule.html#methods:ig.excel.ListDataValidationRule
• ListDataValidationRuleのsetValuesメソッド
  • https://jp.igniteui.com/help/api/2021.1/ig.excel.ListDataValidationRule.html#methods:setValues
• WorksheetCellのdataValidationRuleメソッド
  • https://jp.igniteui.com/help/api/2021.1/ig.excel.WorksheetCell#methods:dataValidationRule