GridView, дочерний GridView, лишний столбец не исчезнет?

Question

Я создаю элемент управления GridView, который инкапсулирует дочернюю сетку. Дочерний gridview содержит тег div, который отображается, когда пользователь выбирает строку в родительском gridview. Однако, несмотря на то, что содержимое скрыто, т. Е. Тег div, добавляется дополнительный столбец - как мне избавиться от дополнительного столбца. В уроке говорится, что путем добавления </td></td> и запуска новой строки <tr> это должно произойти, но это происходит (я также заметил, что автор отключил линии сетки, поэтому я предполагаю, что у него на самом деле также есть эта проблема). Вот сетка, о, и я установил видимое состояние itemtemplate на 'true', но тогда javascript мог (не) его найти.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AllowSorting="True"
  AutoGenerateColumns="False" DataKeyNames="PublicationID" 
  DataSourceID="ObjectDataSource1" Width="467px" OnRowDataBound="GridView1_RowDataBound"
  Font-Names="Verdana" Font-Size="Small">
  <Columns>
    <asp:TemplateField>
      <ItemTemplate>
        <asp:CheckBox ID="PublicationSelector" runat="server" />
      </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
    <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
    <asp:BoundField DataField="State" HeaderText="State" SortExpression="State" />
    <asp:TemplateField HeaderText="Owners">
      <ItemTemplate>
       <asp:Label ID="Owners" runat="server"></asp:Label>
      </ItemTemplate>
      <ItemStyle HorizontalAlign="Center" />
    </asp:TemplateField>
    <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
    <asp:TemplateField>
      <ItemTemplate >
      </td></tr>
        <tr>
          <td colspan="7">
            <div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
              <asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
                Font-Names="Verdana" Font-Size="small">
                <Columns>
                  <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
                </Columns>
              </asp:GridView>
            </div>
          </td>
        </tr>
      </ItemTemplate>
    </asp:TemplateField>
  </Columns>
</asp:GridView>

Помимо дополнительного столбца в основном виде сетки, он работает нормально.

Просто для полноты приведу оригинальную статью (по какой-то причине ей не понравился мой тег <a href>, поэтому он скопирован и вставлен).

Answer 1

Чтобы избавиться от лишнего столбца, просто установите его стиль CSS на display: none. Вы можете сделать это, применив CssClass к TemplateField, содержащему вложенную сетку:

<asp:TemplateField HeaderStyle-CssClass="hidden-column" ItemStyle-CssClass="hidden-column" FooterStyle-CssClass="hidden-column">

Вот определение используемого CssClass:

<style type="text/css">
  .hidden-column {
    display: none;
  }
</style>

Примечание: разметка все еще будет в HTML, но, по крайней мере, она не будет видна.
Протестировано под IE 8.0, Google Chrome 2.0 и Opera 10.0

Обновление: чтобы устранить двойную границу, просто поместите идентификатор и стиль на <tr> вместо <div>:

<tr id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
  <td colspan="7">
    <div>
...

... и измените отображение в javascript с block на table-row:

div.style.display = "table-row";  // not a div anymore!!

Answer 2

Я не вижу открывающего тега для этих tr, td тегов:

...
<ItemTemplate >
      </td></tr>
...

Только что проверил, и автор статьи, похоже, имеет ту же проблему в созданном источнике страницы.

Answer 3

Похоже, у вас есть несбалансированные теги в вашем <ItemTemplate>:

<ItemTemplate >
  </td></tr> <<---- These look unbalanced
    <tr>
      <td colspan="7">
        <div id="<%# Eval("PublicationID") %>" style="display: none; position: relative">
          <asp:GridView ID="GridView2_ABPubs" runat="server" AutoGenerateColumns="false" Width="100%"
            Font-Names="Verdana" Font-Size="small">
            <Columns>
              <asp:BoundField DataField="NameAbbrev" HeaderText="Publication Name" SortExpression="NameAbbrev" />
            </Columns>
          </asp:GridView>
        </div>
      </td>
    </tr>
  </ItemTemplate>