年配の方やタッチスクリーンを使っている場合、見やすく操作し易いようにするためにこの部分を大きくできないかという依頼があったとき、正直こんなに苦労するとは思わなかった。
いろいろ試行錯誤した挙句、完成したのがこのサンプルのような使い方である。
サンプルソース：bigctrsamp.lzh (2008.07.03修正)
※このサンプルが有効なのはIE7までです。IE8だと互換表示を使ってもボタンを大きくすることはできません。(2009.09.02)
※こちらで新しいサンプルを紹介しています。WebコントロールでもIE8でも使えるサンプルです。「チェックボックス、ラジオボタンを大きく表示して使う：その２」(2009.09.03)
サンプル実行図
サーバーコントロールはWebコントロールではなくHTMLコントロールを使う。Webコントロールではどうしても大きくできない。また、サーバーサイドで利用するため「サーバーコントロールとして実行」を有効にするが、クライアントサイドのJavascriptでGridView内のラジオボタンを操作する方法も組み込んである。
デザイン全体図
サーバーコントロールとして実行
サイズを指定
ラジオボタンのクライアントスクリプトでは一度ブラウザで表示された状態のソースコードで名前を調べる。
GridViewのソースコード
このソースコードから、ラジオボタンのName属性がGridView2$ctlXX$であることが判る。XXはどういうわけか02から始まる。そこでこれを操作するJavascriptも先頭が０２となるように細工をする。
Javascritpコード
なお、GridViewの行数をHiddenFieldの値から取得しているが、これは以前のTipsでも紹介した方法「データソースで取得したレコードの件数を知るには」を使っている。
| 
いまさらのコメントですが、気になったので・・・
一応Webコントロールでも、実際のコントロールを探してVB側で
.Attributes("style")="width:20px;"
.Attributes("class")="(cssName)"
ここら辺で追加可能です。
※GridViewなどの場合は、_ItemDataBoundイベント内で記述します。
特にonclickでは有用です。
.Attributes("onclick")="javascript:xxx"
onclientclickが実装されるまでや存在しないコントロールにはバリバリ使っていました。
.ClientIDや.UniqueIDでHTML側に記述されるIDは取得できますよ。
でも大きくはならなかったですね。どうして貴方が大きくできたのか不思議です。
で、今回あらためてテストしたところ、面白いことが判りました。
私がテストした当時はIE6とIE7でしたが、IE8になった現在だとサンプルのHTMLコントロールでも大きくはならないんです。互換表示を使ってもです。
つまり、ブラウザの仕様でチェックボックスやラジオボタンは拡大縮小できるか決まるようなのです。他のブラウザはもともとシステム上対象外なので試してみていませんが、案外そんなことが原因かもしれません。
失礼しました。
こちらで導入したアプリでは元気よく拡大されていたので、調べたところIEの罠でした。
不思議ですが、サンプルに以下のコードを追記すると多分IE全般でうまくいきます。
（IE以外は未確認）
HTML側ヘッダ部分
<style type="text/css">
input { border-width : 1px; } ←なぜかここが肝心です。
input.big { width: 25px; height: 25px;}
</style>
VB側 GridView2_RowDataBound 部分
If e.Row.RowType = DataControlRowType.DataRow Then
Dim rdB As HtmlInputRadioButton = CType(e.Row.FindControl("Radio1"), HtmlInputRadioButton)
rdB.Attributes("onclick") = "setRadio(" & e.Row.RowIndex.ToString & ");"
rdB.Attributes("css") = "big" ←追加
End If
スタイルシートなら一括で適用できるので楽でいいですよ。
cssなんてプロパティないですよね。。。orz
rdB.Attributes("class") = "big" ←追加
になります。
また、単なるHTMLのラジオボタンなのでHTML側で記述してもOKでした。
<input id="Radio1" type="radio" class="big" style="width: 30px; height: 30px" runat="server" />
inputを別にせずに
input.big { border-width : 1px;width: 25px; height: 25px;}
これでも「border:none;」でもいけますので、単純にチェックボックス、ラジオボタンのborderが邪魔しているようです。
サンプルのソースならHTML側でstyleを使っているので、そこに「border:none;」を追加するだけで良さそうですね。
asp:RadioButtonでもサーバー側であればclassやstyleの追加が可能です。
asp:RadioButtonの場合はSpanタグでラッピングされてしまうので、通常のAttributeやCssStyleの指定では被さっているSpanにかかってしまいますが、
下記のようにInputAttributesを使えばできます。
asp:RadioButtonをID="Radio2"で追加して、
Dim rdB2 As RadioButton = CType(e.Row.FindControl("Radio2"), RadioButton)
rdB2.CssClass = "big" ←span側なのでダメ
rdB2.InputAttributes("class") = "big" ←htmlRadio側なのでOK
rdB2.LabelAttributes("class") = "big" ←span側なのでダメ
LabelAttributesとInputAttributesで分れているので気をつければ使えますね。
ちなみにGridViewでのラジオボタンのグループ化はNameプロパティ（GroupName含む）をこっちが書き換えても強制的にGridViewが書換えてしまう（バグ？）ので、やっぱりJavaScriptが正解のようです。（カスタムコントロールを作るなら別ですが。）
おかげさまで上手く行きました。
改めてサンプルを作り直し、新着記事として紹介させていただきました。