きよくらの備忘録

「三日坊主と呼ばせない!日記」改め。主にソフトウェア開発関連の話題。

Ignite UIでエラー'cannot call methods on igGridSelection prior to initialization'が出たら確認すること

Infragistics社のJavaScriptライブラリ Ignite UI*1 を使っていて、うっかりミスで結構悩んでしまったのでメモ。

エラー:

gridに対してigGridSelectionのメソッドでアクセスしようとしたら以下のエラーが発生。

cannot call methods on igGridSelection prior to initialization; attempted to call method 'selectedRow'

コード例:JS

$(funtion(){
  $("#my-grid").igGrid({ /* オプション */ });
  $("#button-select").click({
    var row = $("#my-grid").igGridSelection("selectedRow");
    // 選択された行に対する処理が以下に続く…
    
  });
});

$("#my-grid").igGridSelection("selectedRow");の部分で上記の例外が発生。

HTML(NG):

<div>
  <div id="my-grid"></div>
  <input type="button" id="" value="選択列をほげほげする" />
</div>

原因&解決方法

原因はdivに対してigGridを適用していたため。 div要素では無く、table要素に対してigGridを適用する

HTML(OK):

<div>
  <table id="my-grid"></table>
  <input type="button" id="" value="選択列をほげほげする" />
</div>

備考:

igGridは本来table要素に対して適用するもの。 が、うっかりdivに対して適用してしまっていた。 気が付くのに時間がかかったのは、私が使っている範囲であればたいていのことがdiv要素に適用した場合でも動作してしまっていた点*2。逆にigGrid凄い感。

ともあれ、たまにやってしまいそうなので、この手の例外が出てた時は適用しようとしている要素が想定されたものかどうかを確認すると良いかもしれません。

*1:有償コンポーネントですが、このコンポーネントが備えている機能と、自分で実装する場合の工数を(と今後の保守工数)を比較すると比較するのも嫌になること請け合いのコンポーネント

*2:見た目、ソート、フィルタ等々…