[Wijmo][angular] FlexGridFilterの選択肢をカスタマイズする

2019年12月18日 propg Angular, IT, Wijmo, 0

バインドする値がコードだと、フィルターの選択肢も1, 2になります。

また、booleanだったら選択肢は、true/falseになります。

それで良いならいいですが、表示している値を1/2 true/falseにしていない場合は、フィルターの指定がわかりにくくなります。

その場合は、バインドする値を別に有/無などを設けてもいいのですが、コード側で表示する値をカスタマイズすることもできます。

component.html

 <wj-flex-grid  [itemsSource]="resultList">
      <wj-flex-grid-filter #gridFilter></wj-flex-grid-filter>
	…
 </wj-flex-grid>

component.ts

  @ViewChild('gridFilter', { static: true })
  gridFilter: WjFlexGridFilter;

  setFilter(): void {
    // 性別のフィルターカスタマイズ
    const map = new wjcGrid.DataMap([
      { value: '1', caption: '男' },
      { value: '2', caption: '女' },
    ], 'value', 'caption');
    setTimeout(() => {
      this.gridFilter.getColumnFilter('seibetsuCd').dataMap = map;
    });
  }

データをセットしたタイミングで、

this.resultList = new CollectionView(result);
this.setFIlter();

参考にしたのは、

https://dev.grapecity.co.jp/support/kb/detail.asp?id=82627

です。ただしAngularの場合、書き方が結構違うので注意が必要です。

 

== ランキングに参加しています。ぜひクリックお願いします ==

[Angular] innerHTMLにスタイルを適用する Excelのファイル形式について