作成日: 2015/07/08 最終更新日: 2015/07/08
文書種別
使用方法
詳細
フィルタのデザインにおいて、下記の3箇所のデザインを変更するにはCSSでスタイルを設定できます。
・フィルタのドロップダウンボタン
・フィルタの日付選択ボタン
・フィルタリスト
それぞれ下記のようなコードにてスタイルを設定できます。
◎サンプルコード(CSS)
フィルタリストに表示されるフィルタ条件を制限するにはOnClientFilterOperatorsListShowingプロパティを使用します。
また、フィルタリストのフィルタ条件のテキストを変更する場合も、OnClientFilterOperatorsListShowingプロパティを使用します。
◎サンプルコード(aspx)
OnClientFilterOperatorsListShowingプロパティで指定したJavaScript関数は下記の様なコードとなります。
◎サンプルコード(JavaScript)
・フィルタのドロップダウンボタン
・フィルタの日付選択ボタン
・フィルタリスト
それぞれ下記のようなコードにてスタイルを設定できます。
◎サンプルコード(CSS)
/* フィルタのドロップダウンボタン */
td.wijmo-wijgrid-filter-trigger {
background: #BCD8FF !important;
}
/* フィルタの日付選択ボタン */
table.wijmo-wijgrid-filter div.wijmo-wijinput-trigger {
background: #BCD8FF !important;
}
/* フィルタリスト */
div.wijmo-wijgrid-filterlist {
background: #BCD8FF !important;
color: #231499 !important;
}
td.wijmo-wijgrid-filter-trigger {
background: #BCD8FF !important;
}
/* フィルタの日付選択ボタン */
table.wijmo-wijgrid-filter div.wijmo-wijinput-trigger {
background: #BCD8FF !important;
}
/* フィルタリスト */
div.wijmo-wijgrid-filterlist {
background: #BCD8FF !important;
color: #231499 !important;
}
フィルタリストに表示されるフィルタ条件を制限するにはOnClientFilterOperatorsListShowingプロパティを使用します。
また、フィルタリストのフィルタ条件のテキストを変更する場合も、OnClientFilterOperatorsListShowingプロパティを使用します。
◎サンプルコード(aspx)
<wijmo:C1GridView … ShowFilter="True" OnClientFilterOperatorsListShowing="filterOperatorsListShowing">
:
</wijmo:C1GridView>
:
</wijmo:C1GridView>
OnClientFilterOperatorsListShowingプロパティで指定したJavaScript関数は下記の様なコードとなります。
◎サンプルコード(JavaScript)
function filterOperatorsListShowing(e, args) {
// フィルタリストに表示するフィルタ条件を制限するコード
args.operators = $.grep(args.operators, function (op) {
return op.name === "Equals" || op.name === "NoFilter";
});
// フィルタリストのフィルタ条件のテキストを変更するコード
$.each(args.operators, function (index, elem) {
if (elem.name == "Equals") {
elem.displayName = "This is Equals operator";
}
});
}
// フィルタリストに表示するフィルタ条件を制限するコード
args.operators = $.grep(args.operators, function (op) {
return op.name === "Equals" || op.name === "NoFilter";
});
// フィルタリストのフィルタ条件のテキストを変更するコード
$.each(args.operators, function (index, elem) {
if (elem.name == "Equals") {
elem.displayName = "This is Equals operator";
}
});
}
旧文書番号
81397