プロプログラマ -Flex,Air,C#,Oracle,HTML5+JS-

プログラマーを職業としてます。 Flex,Air,C#,Oracle,HTML+JSの言語ノウハウを中心に情報発信していきます

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

バインドする値がコードだと、フィルターの選択肢も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の場合、書き方が結構違うので注意が必要です。

 

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

プログラム ブログランキングへ
にほんブログ村 IT技術ブログへ
にほんブログ村

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください