none
Web サイトに追加した GridView のチェック ボックスが使用不可 RRS feed

  • 質問

  • Web サイトに GridView を追加し、バインドする SQL Server のストアド プロシージャに bit 型の列を追加したところ、チェック ボックスとして表示されました。
    しかし、実行してみるとチェック ボックスがグレー アウトされてチェックできません。GridView の Enabled は True で、チェック ボックス列の ReadOnly は False となっています。どうすればチェック ボックスが使用可能となるでしょうか。よろしくお願いします。

    開発環境:
    Windows 8.1 Pro 64bit
    Microsoft Visual Studio Professional 2013
    Version 12.0.21005.1 REL
    Microsoft .NET Framework
    Version 4.5.51641
    • 移動 星 睦美 2014年10月9日 5:29 Visual Studio 共通 から
    2014年10月7日 5:51

回答

  • 下記のメッセージは、trapemiya さんへのレスの中に入っていたので気がつきませんでしたが・・・

    > ただ、[編集] というリンクをクリックしてからでないとチェックできず、でも [編集] を
    > 非表示にするとチェックできなくなり、なおかつ他の行の [編集] をクリックすると直前
    > にチェックしたものが解除されてしまいます。

    CheckBox は GridView の複数行を選択するためのもののようですね。

    そうであれば、質問者さんのやり方(データベースに bit 列を設けてデータバインドし GridView に CheckBoxField を自動生成させるという方法)は完全に見当ハズレです。

    なので、回答も見当ハズレになってしまいました。

    初心者の方は特に、局所的な質問をするのではなく、全体のシナリオを含めてやりたいことを書くようにすることをお勧めします。

    そうしていただけると、「それはできないけど、やりたいことはこうすればできる」というような代案がもらえるかも知れませんし、お互い無駄なやりとりが省けます。

    で、GridView の複数行を選択するための CheckBox の作り方ですが、データベースには一切手を加える必要はなく、GridView に TemplateField を一列追加し、その中に CheckBox を配置するようにします。

    先に質問者さんがアップされたコードで言うと、GridView の <Columns> ~ </Columns> 内に以下のコードを追加することになります。

    <asp:TemplateField HeaderText="選択">
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>

    それだけでチェック可能な CheckBox が表示されるはずです。

    しかし、多分それだけではやりたいことの半分もできてなくて、その先チェックされた行をサーバー側で取得し、何らかの処置をするのだと思いますが、そのやり方がわからなければ、別に新たにスレッドを立てて聞いてください。

    その際は、「Visual Studio 共通 フォーラム」ではなくて「ASP.NET」のフォーラムにお願いします。


    • 編集済み SurferOnWww 2014年10月9日 2:20 誤記訂正
    • 回答としてマーク Le lit defait 2014年10月9日 13:30
    2014年10月9日 2:15

すべての返信

  • 普通に Visual Studio のウィザードを使って作れば、[編集]ボタンをクリックしてその行を編集モードにすれば、CheckBox をチェックできるようになるはずです。

    上記のアドバイスで解決できないようでしたら、問題を再現できる必要最低限(あくまで必要最低限でお願いします)のコードをアップしてください。アップする際はコードスニペットを使用してくださいね。

    2014年10月7日 6:05
  • 古い資料で当てはまらないかもしれませんが、とりあえず。

    ASP.net 2005 GridViewチェックボックスがグレーアウトになってしまう
    http://social.msdn.microsoft.com/Forums/ja-JP/7d2420fd-a58e-4802-b495-4198cbe73782/aspnet-2005-gridview?forum=aspnetja


    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

    2014年10月7日 6:43
    モデレータ
  • SurferOnWww 様、ご回答ありがとうございます。

    すみません、ツール ボックスから GridView を選び、データ ソース構成ウィザード画面で追加したのですが、[編集] ボタンというのは見当たりませんでした。下記のとおり指定して作成しました。

    アプリケーションがデータを取得する場所: データベース
    アプリケーションがデータベースへの接続に使用するデータ接続: 既存の接続を選びました。
    データベースからデータをどうやって取得しますか ? : カスタム SQL ステートメントまたはストアド プロシージャを指定する
    この操作の SQL ステートメントを作成するには、タブをクリックします: ストアド プロシージャをチェックし、適切なストアドを選択。

    なお、この GridView に関するコードは何も書いていません。なお、ReadOnly 属性は Column プロパティの (コレクション) で編集したのですが、この画面にも [編集] ボタンというのは見当たりませんでした。なにぶん初めて GridView を触るもので、もしかしたら根本的に何らかのプロセスを飛ばしてしまっているのでしょうか ?


    2014年10月7日 14:33
  • trapemiya 様、ご回答ありがとうございます。

    この記事は事前に見ておりましたが、VS2013 でいうところの [選択を有効にする] にチェックを付けると、先頭列に割り込むかたちで [選択] という青い文字が全行に表示されますが、実行時にクリックしても一瞬色が変わるだけで何も起こりません。また、チェック ボックス自体はグレーのままなのですが、私が何か勘違いしているのでしょうか ?

    2014年10月7日 14:42
  • 先のレスで、

    > 上記のアドバイスで解決できないようでしたら、問題を再現できる必要最低限(あくまで
    > 必要最低限でお願いします)のコードをアップしてください。

    とお願いしましたが、それはできないのでしょうか?

    2014年10月7日 16:06
  • この記事は事前に見ておりましたが、VS2013 でいうところの [選択を有効にする] にチェックを付けると、先頭列に割り込むかたちで [選択] という青い文字が全行に表示されますが、実行時にクリックしても一瞬色が変わるだけで何も起こりません。

    コードは書かれていないとおっしゃっていますので、ウィザードやテーブル自体の問題のようですね。「選択を有効にする」ではなくて、「編集を有効にする」ですが、「編集を有効にする」が表示されていないのですね?
    「編集を有効にする」が表示されるには条件が必要になりますが、それをお話しする前に基本的なデータベースのお話しをします。
    さて、データベースのあるレコードを更新するためには、その更新するレコードを特定するための列が必要になります。一般的にこの列は1つで、その列は主キーとしてマークされています。ASP.NETは、この主キーを頼りにレコードを更新します。したがって、主キーがなければ、「編集を有効にする」は表示されませんので、主キーが設定されている列を「データソースの構成」で選択して下さい。同じく「データソースの構成」の画面に、「詳細設定」というボタンがありますので、そのボタンを押して開いた画面で「insert, update, およびdeleteステートメントの生成」にチェックを付けて下さい。これで「編集を有効にする」が表示されるはずです。

    #もし、テーブルに主キーがないのであれば、追加して下さい。


    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

    • 編集済み trapemiyaModerator 2014年10月8日 0:53 書きかけでアップしてしまったため。
    2014年10月8日 0:46
    モデレータ
  • すみません。ストアドプロシージャを使用されているのでしたね。であれば、「データソースの構成」で、抽出するためのストアドプロシージャを指定されたと思いますが、その画面で同様にUpdate等のストアドプロシージャの指定、もしくはSQLを書いて下さい。

    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

    2014年10月8日 1:05
    モデレータ
  • 以下のところが気になったので念のため・・・

    > この GridView に関するコードは何も書いていません。

    Visual Studio のデザイン画面だけを見ていませんか? ご自分では一行もコードは書かなくても、Visual Studio が自動生成したコードがソース画面にあるはずです。それをコピペしてアップしてくださいとお願いしたのですが。

    念のため、ストアドの中身も教えてください。

    2014年10月8日 6:35
  • SurferOnWww 様、trapemiya 様、ご回答ありがとうございます。また、返信が大変遅くなりまして申し訳ありませんでした。

    まず SurferOnWww 様、おっしゃっておられることが理解できておりませんで、申し訳ありませんでした。ソースには下記のように表示されておりました。

    <asp:GridView ID="gvXXX" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource2">

     <Columns>

      <asp:CheckBoxField DataField="選択" HeaderText="選択" SortExpression="選択" />

      <asp:BoundField DataField="Seq" HeaderText="Seq" SortExpression="Seq" Visible="False" />

      <asp:BoundField DataField="Code" HeaderText="Code" SortExpression="Code" Visible="False" />

      <asp:BoundField DataField="Rank" HeaderText="Rank" SortExpression="Rank" />

      <asp:BoundField DataField="Rec" HeaderText="Rec" SortExpression="Rec" />

      <asp:BoundField DataField="Fre" HeaderText="Fre" SortExpression="Fre" />

      <asp:BoundField DataField="Mon" HeaderText="Mon" SortExpression="Mon" />

     </Columns>

    </asp:GridView>

    このうち、[選択というのが bit 型の列になっています。

    そして trapemiya 様、ありがとうございます。SELECT だけでなく、UPDATE の方もストアド プロシージャを指定しないとだめなんですね。これを追加したところ [編集を有効にするが表示され、チェック ボックスをクリックすることができました !!

    ただ、[編集というリンクをクリックしてからでないとチェックできず、でも [編集を非表示にするとチェックできなくなり、なおかつ他の行の [編集をクリックすると直前にチェックしたものが解除されてしまいます。

    理想は Gmail の明細表示のようなものを目指しておりますが、まだまだ道は遠そうです。とり急ぎお礼申し上げます。本当にどうもありがとうございました。

    2014年10月8日 11:38
  • > ソースには下記のように表示されておりました。

    GridView のコードだけでなく全体(特に SqlDataSource のコード)をアップしていただきたかったのですが・・・

    以下のページで「4. GridViewコントロールの動作を定義する」のセクションにある画像を見てください。

    [ASP.NET]GridViewコントロールでデータソースの内容を表示するには?
    http://www.atmarkit.co.jp/fdotnet/dotnettips/780aspgridviewshow1/aspgridviewshow1.html

    その画像にある[編集を有効にする]にチェックを入れると[編集]ボタンが GridView 内に表示されるのですが、SqlDataSource に UPDATE 関係のコードが含まれてないと、[編集を有効にする]のオプションは表示されないはずです。

    とりあえずストアドを使うのは忘れて、以下のようにやってみてください。

    先のレスにあった、

    > データベースからデータをどうやって取得しますか ? :

    のところで、

    (1) [カスタム SQL ステートメント・・・(S)]ではなくて[テーブルまたはビューから列を指定します(T)]を選択。

    (2) テーブルを選んで SELECT する項目にチェックを入れる。

    (3) [詳細設定]ボタンをクリック。

    (4) 表示される「SQL 生成の詳細オプション」ダイアログで[INSERT, UPDATE, および DELETE ステートメントの生成(G)]にチェックを入れて[OK]ボタンをクリック。

    のように進んで SqlDataSource のデータソースの構成を完了させてください。これで SqlDataSource には UPDATE 関係のコードが含まれるはずです。

    その後で GridView をページに配置し、デザイン画面で[データソースの選択]を上で設定した SqlDataSource にすれば[編集を有効にする]オプションが表示されチェックを入れられるはずです。

    上記のようにして完成したコードは以下のようになるはずです。

     
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:Northwind %>" 
                DeleteCommand="DELETE FROM [Products] WHERE [ProductID] = @ProductID" 
                InsertCommand="INSERT INTO [Products] ([ProductName], [UnitPrice], [Discontinued]) 
                    VALUES (@ProductName, @UnitPrice, @Discontinued)" 
                SelectCommand="SELECT [ProductID], [ProductName], [UnitPrice], [Discontinued] FROM [Products]" 
                UpdateCommand="UPDATE [Products] SET [ProductName] = @ProductName, [UnitPrice] = @UnitPrice, [Discontinued] = @Discontinued 
                    WHERE [ProductID] = @ProductID">
                <DeleteParameters>
                    <asp:Parameter Name="ProductID" Type="Int32" />
                </DeleteParameters>
                <InsertParameters>
                    <asp:Parameter Name="ProductName" Type="String" />
                    <asp:Parameter Name="UnitPrice" Type="Decimal" />
                    <asp:Parameter Name="Discontinued" Type="Boolean" />
                </InsertParameters>
                <UpdateParameters>
                    <asp:Parameter Name="ProductName" Type="String" />
                    <asp:Parameter Name="UnitPrice" Type="Decimal" />
                    <asp:Parameter Name="Discontinued" Type="Boolean" />
                    <asp:Parameter Name="ProductID" Type="Int32" />
                </UpdateParameters>
            </asp:SqlDataSource>
    
            <asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ProductID" 
                DataSourceID="SqlDataSource1">
                <Columns>
                    <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" 
                        ShowSelectButton="True" />
                    <asp:BoundField DataField="ProductID" HeaderText="ProductID" 
                        InsertVisible="False" ReadOnly="True" SortExpression="ProductID" />
                    <asp:BoundField DataField="ProductName" HeaderText="ProductName" 
                        SortExpression="ProductName" />
                    <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" 
                        SortExpression="UnitPrice" />
                    <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" 
                        SortExpression="Discontinued" />
                </Columns>
            </asp:GridView>
        </div>
        </form>
    </body>
    </html>



    • 編集済み SurferOnWww 2014年10月8日 12:47 誤字訂正
    2014年10月8日 12:44
  • ただ、[編集というリンクをクリックしてからでないとチェックできず、でも [編集を非表示にするとチェックできなくなり、なおかつ他の行の [編集をクリックすると直前にチェックしたものが解除されてしまいます。

    Webアプリケーションの場合、一般的にはそのような動作になります。なぜなら、プログラム自体はWebサーバーにありますので、クライアント(ブラウザ)で登録、変更、削除を行い、それをまとめてWebサーバーのプログラムに渡すことが難しいからです。したがって、基本は1つのレコードの操作毎にWebサーバーのアプリケーションで処理する必要があります。よって、編集する場合には「編集」というボタンを押して編集モードに入り、そこでデータを編集してWebサーバーに送り、Webサーバーでそのレコードを処理することになります。ここがWindowsフォームやWPFなどのアプリケーションと異なるところです。
    しかし、登録、変更、削除を一度に行うことはできませんが、登録、変更、削除のそれぞれについては一度に複数レコードの処理を行うことができます。なぜなら、それら複数のレコードの処理順を考慮しなくても良いからです。登録、変更、削除の作業が混じっていると、その作業順によってデータベースを処理する必要があるため、難しくなるのです。
    全ての表示行を編集モードで表示したGridViewの例が以下にありますので、参考にしてみて下さい。

    Show all GridView Rows in EditMode
    http://aspadvice.com/blogs/azamsharp/archive/2006/11/08/Show-all-GridView-Rows-in-EditMode.aspx


    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/

    2014年10月9日 1:41
    モデレータ
  • 下記のメッセージは、trapemiya さんへのレスの中に入っていたので気がつきませんでしたが・・・

    > ただ、[編集] というリンクをクリックしてからでないとチェックできず、でも [編集] を
    > 非表示にするとチェックできなくなり、なおかつ他の行の [編集] をクリックすると直前
    > にチェックしたものが解除されてしまいます。

    CheckBox は GridView の複数行を選択するためのもののようですね。

    そうであれば、質問者さんのやり方(データベースに bit 列を設けてデータバインドし GridView に CheckBoxField を自動生成させるという方法)は完全に見当ハズレです。

    なので、回答も見当ハズレになってしまいました。

    初心者の方は特に、局所的な質問をするのではなく、全体のシナリオを含めてやりたいことを書くようにすることをお勧めします。

    そうしていただけると、「それはできないけど、やりたいことはこうすればできる」というような代案がもらえるかも知れませんし、お互い無駄なやりとりが省けます。

    で、GridView の複数行を選択するための CheckBox の作り方ですが、データベースには一切手を加える必要はなく、GridView に TemplateField を一列追加し、その中に CheckBox を配置するようにします。

    先に質問者さんがアップされたコードで言うと、GridView の <Columns> ~ </Columns> 内に以下のコードを追加することになります。

    <asp:TemplateField HeaderText="選択">
        <ItemTemplate>
            <asp:CheckBox ID="CheckBox1" runat="server" />
        </ItemTemplate>
    </asp:TemplateField>

    それだけでチェック可能な CheckBox が表示されるはずです。

    しかし、多分それだけではやりたいことの半分もできてなくて、その先チェックされた行をサーバー側で取得し、何らかの処置をするのだと思いますが、そのやり方がわからなければ、別に新たにスレッドを立てて聞いてください。

    その際は、「Visual Studio 共通 フォーラム」ではなくて「ASP.NET」のフォーラムにお願いします。


    • 編集済み SurferOnWww 2014年10月9日 2:20 誤記訂正
    • 回答としてマーク Le lit defait 2014年10月9日 13:30
    2014年10月9日 2:15
  • 自己レスです。

    登録、変更、削除の作業が混じっていると、その作業順によってデータベースを処理する必要があるため、難しくなるのです。

    と書きましたが、DataTableを利用してうまくやれば不可能ではありません。以下を参考にしてみて下さい。

    Gridviewの行追加/削除
    http://social.msdn.microsoft.com/Forums/ja-JP/691bdf28-9b84-4d3b-818f-3cf6f0d13798/gridview?forum=aspnetja

    先に紹介した、「Show all GridView Rows in EditMode」より、こちらの方がデータの処理も載っているので参考になるかもしれません。

    (追記)
    今すぐに上のコードを理解されるのは難しいかもしれません。しかし、これぐらいのコードを書かないと実現できないことはわかっていただけると思います。


    ★良い回答には回答済みマークを付けよう! わんくま同盟 MVP - Visual C# http://d.hatena.ne.jp/trapemiya/


    2014年10月9日 3:02
    モデレータ
  • Le lit defait さん、こんにちは。
    フォーラム オペレーターの星 睦美です。

    コミュニティのユーザーから返信を参考にしていただけたのではないかと思います。
    今後もユーザー同士の情報交換が活発になるように役立つ回答には、投稿者から[回答としてマーク] いただければ幸いです。

    フォーラムでの情報の共有のため、こちらの質問はASP.NET に関する話題のフォーラム カテゴリに移動させていただきます。
    ・MSDN フォーラム > .Net Framework > ASP.NET:


    フォーラム オペレーター 星 睦美 - MSDN Community Support

    2014年10月9日 5:22
  • trapemiya 様、ご回答どうもありがとうございました。

    Web アプリケーションではそのような制約があるのですね。私がやりたいと思っている Gmail のようなインターフェイスはごく一般的なものだと思っていたので、少し驚きました。

    本来なら、このようなこともすべて勉強した上で開発に着手できれば良かったのですが、諸事情により右も左もわからぬまま開発が始まってしまいました。

    trapemiya 様にはお忙しいお時間を割いて頂きまして、本当にありがとうございました。

    2014年10月9日 13:29
  • SurferOnWww 様、ご回答どうもありがとうございました。

    最後のサンプルコードでいともたやすくチェックボックスが表示できたことに大変驚きました !! 質問するスレッドも間違うような私にたくさんのご指導を頂き、本当にどうもありがとうございました。
    2014年10月9日 13:30