- PR -

DataGridへのラジオボタンの設置について

投稿者投稿内容
suke
会議室デビュー日: 2002/07/19
投稿数: 5
投稿日時: 2002-07-19 18:21
初めて書き込みをさせていただきます。
よろしくお願いします。

ASP.NETのDataGrid内で、テンプレート列にラジオボタンを設置したところ、
複数のラジオボタンにチェックをつけることができてしまいます。
設置したラジオボタンのIDに違う名前がつけられていたため、
これが原因では・・と考えたのですが、
果たしてこれが原因なのでしょうか?
そしてこの事象の解決法としてなにか
よい方法はあるのでしょうか?

ご教授の程よろしくお願い致します。
biac
大ベテラン
会議室デビュー日: 2001/10/22
投稿数: 106
投稿日時: 2002-07-19 20:33
引用:

複数のラジオボタンにチェックをつけることができてしまいます。
設置したラジオボタンのIDに違う名前がつけられていたため、
これが原因では・・と考えたのですが、


いいえ。
W3C HTML 4.x ならば、id 属性ではなく name 属性を同じにします。

http://www.w3.org/TR/html401/interact/forms.html#h-17.2.1
> radio buttons
> Radio buttons are like checkboxes except that when several share the same control name, they are mutually exclusive:

http://www.w3.org/TR/html401/interact/forms.html#control-name
> A control's "control name" is given by its name attribute.
かなめ
会議室デビュー日: 2002/07/15
投稿数: 16
お住まい・勤務地: 東京
投稿日時: 2002-07-19 20:39
初めて書かせていただきます。
よろしくお願い致します。

私も便乗させてください。
同じような状況で困っております。
調べたところ、『GroupName』属性を定義することによって、
1つのグループとなることがわかりました。

しかし、実際にGroupName属性を指定しても、複数選択が出来てしまいます。
どなたかご教授していただけると嬉しいです。
よろしくお願い致します。
biac
大ベテラン
会議室デビュー日: 2001/10/22
投稿数: 106
投稿日時: 2002-07-19 21:24
引用:

調べたところ、『GroupName』属性を定義することによって、
1つのグループとなることがわかりました。

しかし、実際にGroupName属性を指定しても、複数選択が出来てしまいます。


ASP.NET の GroupName 属性は、HTML の name 属性として送出されるようですが…

ひょっとして、同じ form 要素の子にしていない、なんてことはありません?
W3C HTML 4.x では、control name のスコープは、その form 要素の中だけです。 スコープが違えば、同じ名前でも別物です。

http://www.w3.org/TR/html401/interact/forms.html#h-17.2.1
> The scope of the name attribute for a control within a FORM element is the FORM element.
かなめ
会議室デビュー日: 2002/07/15
投稿数: 16
お住まい・勤務地: 東京
投稿日時: 2002-07-19 21:57
いつもお世話になっております。
確認しましたが、FORMタグの中に入っています。
(datagridの中ですが・・・)
HTMLを記述しておきます。
どこか間違っているのでしょうか。
(うまく、貼り付けられなくてすみません。。。)

**********HTML**********
<form id="Form1" method="post" runat="server">
<asp:DataGrid id=DataGrid1 style="Z-INDEX: 101; LEFT: 274px; POSITION: absolute; TOP: 87px" runat="server" DataSource="<%# DataSet11 %>" DataKeyField="seq" DataMember="CODEF" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<asp:RadioButton id="RadioButton1" runat="server" GroupName="radiogroup1"></asp:RadioButton>
</ItemTemplate>
</asp:TemplateColumn>
<asp:BoundColumn DataField="seq" SortExpression="seq" HeaderText="seq"></asp:BoundColumn>
<asp:BoundColumn DataField="koumoku_no" SortExpression="koumoku_no" HeaderText="koumoku_no"></asp:BoundColumn>
<asp:BoundColumn DataField="koumoku_name" SortExpression="koumoku_name" HeaderText="koumoku_name"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</form>
biac
大ベテラン
会議室デビュー日: 2001/10/22
投稿数: 106
投稿日時: 2002-07-20 16:20
引用:

確認しましたが、FORMタグの中に入っています。
(datagridの中ですが・・・)
HTMLを記述しておきます。


見せてくれるなら、これじゃなくて、まずは、クライアントに送られた HTML を見せてください。

実際にラジオボタンを描画して、排他処理を行うのは、IIS じゃなくて、クライアント側のブラウザですよ?
suke
会議室デビュー日: 2002/07/19
投稿数: 5
投稿日時: 2002-07-22 09:56
おはようございます。
biacさん、レスありがとうございます。
biacさんの最初のレスを読ませていただいた後、
GroupName属性を変えてみましたが、
やはり複数選択できてしまいました。
(かなめさんと同様な状況になっています)

実際に作成したHTMLとクライアントに送られたHTMLを記述しておきます。
どのあたりが問題なのかご教授いただけたらありがたく思います。
よろしくお願いいたします。

----------- HTML -------------

<form id="Form1" method="post" runat="server">
<asp:datagrid id=DataGrid1 runat="server" CssClass="pt10s" HorizontalAlign="Center" CellSpacing="2" CellPadding="3" AllowPaging="True" PageSize="20" DataMember="GYOSH" DataSource="<%# DataSet31401 %>" AutoGenerateColumns="False" DataKeyField="GYOSCD" ShowFooter="True">
<asp:TemplateColumn>
<ItemTemplate>
<asp:RadioButton id="RadioButton1" runat="server" GroupName="group1"></asp:RadioButton>
</ItemTemplate>
</asp:TemplateColumn>
・・・・
・・・・
・・・・
</Columns>
</asp:datagrid>
</form>


-------- HTML(クライアント側) ----------

<form name="Form1" method="post" action="c3140.aspx" id="Form1">
<table class="pt10s" cellspacing="2" cellpadding="3" align="Center" rules="all" border="1" id="DataGrid1">
<tr class="header" align="Center" valign="Middle" style="font-weight:bold;">
<td><input id="DataGrid1__ctl3_RadioButton1" type="radio" name="DataGrid1:_ctl3:group1" value="RadioButton1" />
・・・・
・・・・
</td></tr>
<tr>
<td><input id="DataGrid1__ctl4_RadioButton1" type="radio" name="DataGrid1:_ctl4:group1" value="RadioButton1" />
・・・・
・・・・
</td></tr>
・・・・
・・・・
</tr>
</table>
</form>
biac
大ベテラン
会議室デビュー日: 2001/10/22
投稿数: 106
投稿日時: 2002-07-22 10:29
引用:

-------- HTML(クライアント側) ----------

<form name="Form1" method="post" action="c3140.aspx" id="Form1">
<table class="pt10s" cellspacing="2" cellpadding="3" align="Center" rules="all" border="1" id="DataGrid1">
<tr class="header" align="Center" valign="Middle" style="font-weight:bold;">
<td><input id="DataGrid1__ctl3_RadioButton1" type="radio" name="DataGrid1:_ctl3:group1" value="RadioButton1" />
・・・・
・・・・
</td></tr>
<tr>
<td><input id="DataGrid1__ctl4_RadioButton1" type="radio" name="DataGrid1:_ctl4:group1" value="RadioButton1" />
・・・・


なるほど。 DataGrid の中だと、name 属性に "DataGrid1:_ctlN:" (N は連番) というプリフィックスが付いてしまうのですね。

前にも書いたように、同じ name 属性のラジオボタン間では、ブラウザが排他処理してくれるわけですから…
・GroupName 属性を使う場合、DataGrid の中では、一つの行内にあるラジオボタン間だけで排他処理が行われる。
・GroupName 属性を使わず、name 属性を追加してパススルーさせれば、(たぶん) 上手くいくでしょう。

スキルアップ/キャリアアップ(JOB@IT)