チェックボックス、ラジオボタンを大きく表示して使う

テキストボックスやコマンドボタンはフォントのサイズや縦(Height)横(Width)を直接指定することで大きく表示することができる。しかし、チェックボックスやラジオボタンは文字の方は大きくできてもコントロールはサイズが変わらない。

年配の方やタッチスクリーンを使っている場合、見やすく操作し易いようにするためにこの部分を大きくできないかという依頼があったとき、正直こんなに苦労するとは思わなかった。

いろいろ試行錯誤した挙句、完成したのがこのサンプルのような使い方である。
サンプルソース：bigctrsamp.lzh (2008.07.03修正)

サンプル実行図


サーバーコントロールはWebコントロールではなくHTMLコントロールを使う。Webコントロールではどうしても大きくできない。また、サーバーサイドで利用するため「サーバーコントロールとして実行」を有効にするが、クライアントサイドのJavascriptでGridView内のラジオボタンを操作する方法も組み込んである。

デザイン全体図


サーバーコントロールとして実行


サイズを指定


ラジオボタンのクライアントスクリプトでは一度ブラウザで表示された状態のソースコードで名前を調べる。

GridViewのソースコード


このソースコードから、ラジオボタンのName属性がGridView2$ctlXX$であることが判る。XXはどういうわけか02から始まる。そこでこれを操作するJavascriptも先頭が０２となるように細工をする。

Javascritpコード


なお、GridViewの行数をHiddenFieldの値から取得しているが、これは以前のTipsでも紹介した方法「データソースで取得したレコードの件数を知るには」を使っている。