web-dev-qa-db-ja.com

Twitter BootstrapおよびASP.NET GridView

ASP.NETアプリケーションから Twitter Bootstrap を使用して問題が発生しています。 table table-striped cssクラスをasp:GridViewコントロールに使用すると、テーブルのHeaderを行。

私のGridView

ASP.NET MarkUp

<asp:GridView ID="dgvUsers" runat="server" 
    CssClass="table table-hover table-striped" GridLines="None" 
    AutoGenerateColumns="False">
    <Columns>
        <asp:BoundField DataField="UserID" HeaderText="ID" Visible="false" />
        <asp:BoundField DataField="Username" HeaderText="Username" />
        <asp:BoundField DataField="FirstName" HeaderText="First Name" />
        <asp:BoundField DataField="LastName" HeaderText="Last Name" />
    </Columns>
    <RowStyle CssClass="cursor-pointer" />
</asp:GridView>

結果

Header treated as a row

<table id="cphMainContent_dgvUsers" class="table table-hover table-striped" 
       cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <th scope="col">Username</th>
            <th scope="col">First Name</th>
            <th scope="col">Last Name</th>
        </tr>
        <tr class="cursor-pointer">
            <td>user1</td>
            <td>Test</td>
            <td>User 1</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user2</td>
            <td>Test</td>
            <td>User 2</td>
        </tr>
        <tr class="cursor-pointer">
            <td>user3</td>
            <td>Test</td>
            <td>User 3</td>
        </tr>
    </tbody>
</table>

こんな感じ

It should be like this

<table class="table table-striped">
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@Twitter</td>
        </tr>
    </tbody>
</table>


Twitterブートストラップでasp:GridViewのヘッダーをヘッダーとして処理するにはどうすればよいですか？私のコードはC＃、フレームワーク4、VS2010 Proでビルドされています。

c#asp.netgridview.net-4.0twitter-bootstrap
39
John Isaiah Carmona

Gridviewのuseaccessibleheader属性をtrueに設定し、DataBind()メソッドを呼び出した後、ヘッダーとしてTableSectionも指定する必要があります。 GridViewオブジェクト。グリッドビューがmygvの場合

mygv.UseAccessibleHeader = True
mygv.HeaderRow.TableSection = TableRowSection.TableHeader

これにより、theadおよびtbodyタグを使用して適切にフォーマットされたグリッドが作成されます。

49
Hazem Salama

これを解決するには2つの手順があります。

  1. _UseAccessibleHeader="true"_をGridviewタグに追加します。

    _<asp:GridView ID="MyGridView" runat="server" UseAccessibleHeader="true">
_

  2. PreRenderイベントに次のコードを追加します。

_
Protected Sub MyGridView_PreRender(sender As Object, e As EventArgs) Handles MyGridView.PreRender
    Try
        MyGridView.HeaderRow.TableSection = TableRowSection.TableHeader
    Catch ex As Exception
    End Try
End Sub
_

DataBound()のHeader Rowの設定は、オブジェクトがデータバインドされている場合にのみ機能します。gridviewをデータバインドしない他のポストバックでは、gridviewヘッダー行スタイルが再び標準行に戻ります。 PreRenderは常に機能します。gridviewが空の場合にエラーをキャッチするようにしてください。

6
Shaun Keon

記録のためだけに、テーブルに境界線があり、それを取り除くには、GridViewで次のプロパティを設定する必要がありました。

GridLines="None"
CellSpacing="-1"
4
rageit

Gridviewにショーヘッダーのプロパティを追加

 <asp:GridView ID="dgvUsers" runat="server" **showHeader="True"** CssClass="table table-hover table-striped" GridLines="None" 
AutoGenerateColumns="False">

列にヘッダーテンプレートを追加します

<HeaderTemplate>
                   //header column names
</HeaderTemplate>
0
user3775539