GridVew，Child GridView，额外的列不会消失？ [英] GridVew, Child GridView, extra column won't disappear?

问题描述

我正在构建一个封装子gridview的GridView控件。子gridview保存一个div标签，当用户在父gridview中选择一行时显示div标签。但是，即使内容是隐藏的，即div标签，添加了一个额外的列 - 我如何摆脱额外的列。在教程中，它指出通过添加一个< / td>< / td> 并开始一个新行< tr> 这应该发生，但它确实（我也注意到作者关闭网格线，所以我的假设是他实际上也有这个问题）。这里是gridview，哦，我将 itemtemplate 的可见状态设置为'true'，但是然后javascript可以（非）找到它。

 < asp：GridView ID =GridView1runat =serverAllowPaging =True AllowSorting =True
 AutoGenerateColumns =FalseDataKeyNames =PublicationID
 DataSourceID =ObjectDataSource1Width =467pxOnRowDataBound =GridView1_RowDataBound
 Font-Names =Verdana字体-size = 小 > 
<列> 
< asp：TemplateField> 
< ItemTemplate> 
< asp：CheckBox ID =PublicationSelectorrunat =server/> 
< / ItemTemplate> 
< / asp：TemplateField> 
< asp：BoundField DataField =NameAbbrevHeaderText =Publication NameSortExpression =NameAbbrev/> 
< asp：BoundField DataField =CityHeaderText =CitySortExpression =City/> 
< asp：BoundField DataField =StateHeaderText =StateSortExpression =State/> 
< asp：TemplateField HeaderText =拥有者> 
< ItemTemplate> 
< asp：Label ID =Ownersrunat =server>< / asp：Label> 
< / ItemTemplate> 
< ItemStyle Horizo​​ntalAlign =Center/> 
< / asp：TemplateField> 
< asp：BoundField DataField =TypeHeaderText =TypeSortExpression =Type/> 
< asp：TemplateField> 
< ItemTemplate> 
< / td>< / tr> 
< tr> 
< td colspan =7> 
< div id =<％＃Eval（PublicationID）％> style =display：none; position：relative> 
< asp：GridView ID =GridView2_ABPubsrunat =serverAutoGenerateColumns =falseWidth =100％
 Font-Names =VerdanaFont-Size =small> 
<列> 
< asp：BoundField DataField =NameAbbrevHeaderText =Publication NameSortExpression =NameAbbrev/> 
< /列> 
< / asp：GridView> 
< / div> 
< / td> 
< / tr> 
< / ItemTemplate> 
< / asp：TemplateField> 
< /列> 
< / asp：GridView> 
  

除了主gridview中的额外列以外，它工作正常。

为了完整起见，这里是原创文章 a>（出于某种原因，它不喜欢我的< a href> 标签，因此它的复制和粘贴）。

感谢。

解决方案

要摆脱额外的列，只需将其css样式设置为 display：none 。您可以通过将CssClass应用于包含嵌套网格的 TemplateField 来实现：

 < asp：TemplateField HeaderStyle-CssClass =hidden-columnItemStyle-CssClass =hidden-columnFooterStyle-CssClass =hidden-column> 
  

以下是我使用的CssClass的定义：

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

注意：标记仍然在html中，但至少不会被显示。 br>
在IE 8.0，Google Chrome 2.0和Opera 10.0上进行测试更新：为了消除双边界，只需将id和样式放在 $ b code>< tr> ，而不是< div> ：

 < tr id =<％＃Eval（PublicationID）％> style =display：none; position：relative> 
< td colspan =7> 
< div> 
 ... 
  

...并将javascript中的显示从 block to table-row ：

  div.style.display =table-row; //不再是div了！ 
  

I'm building a GridView control which encapsulates a child gridview. The child gridview holds a div tag which is displayed when the user selects a row in the parent gridview. However, even though the contents is hidden i.e. the div tag, an extra column is added - how do I get rid of the extra column. In the tutorial it states that by adding a </td></td> and starting a new row <tr> this should happen but it does (I also noticed that the author turned off gridlines so my assumption is that he in fact has this problem also). Here is the gridview, oh and I set the visible state of the itemtemplate to 'true' but then the javascript could (not) find it.

<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>

Apart from the extra column in the master gridview it works fine.

Just for completeness, here is a to the original article (for some reason it didn't like my <a href> tag so its copy and paste).

Thanks.

解决方案

To get rid of the extra column, just set its css style to display: none. You can do this by applying a CssClass to the TemplateField containing the nested grid:

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

Here is the definition of the CssClass I used:

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

Note: the markup will still be in the html but at least it won't be visible.
Tested under IE 8.0, Google Chrome 2.0 and Opera 10.0

Update: To eliminate the double border, just put the id and the style on the <tr> instead of the <div>:

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

... and change the display in the javascript from block to table-row:

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

这篇关于GridVew，Child GridView，额外的列不会消失？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！