将行添加到数据列表

Question

I have been searching around the web for a solution to this issue but have come across nothing so far.

Basically I have a table as shown below, which I made up of ItemTemplate fields and is populated by a DataSet from my database. It shows brands to the user of which they can then click and go onto another page.

I need to add another option to the table called "All Brands". Thus then I can use this to go to a page showing all the brands. However I can not seem to easily add this into the DataList.

<asp:DataList id="TypesList" runat="server" Visible="true" RepeatColumns="3" Width="100%" ItemStyle-Width="25%" ItemStyle-HorizontalAlign="Center">
  <ItemTemplate>
    <div style="position:relative;vertical-align:top;">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="center" style="height:170px;vertical-align:top;text-align:center;" valign="top">
            <asp:Label ID="lblID" runat="server" Visible="false" Text='<%#DataBinder.Eval(Container.DataItem,"batteryTypeID")%>'></asp:Label>

            <a href='/<%#DataBinder.Eval(Container.DataItem,"catid")%>/<%#DataBinder.Eval(Container.DataItem,"catname")%>/<%#DataBinder.Eval(Container.DataItem,"brandid")%>/<%#DataBinder.Eval(Container.DataItem,"brand_name")%>/<%#DataBinder.Eval(Container.DataItem,"batteryTypeID")%>/<%#DataBinder.Eval(Container.DataItem,"typeName")%>' target='_self'>
              <asp:Image ID="imgProd" runat="server" ImageUrl='images/none.jpg' />
            </a>
          </td>
        </tr>
        <tr>
          <td class="productdesc" style="text-align:center;vertical-align:top;">
            <span style="color:#000;font-weight:bold;font-size:120%;">
              <%#DataBinder.Eval(Container.DataItem, "typeName").ToString%>
            </span>
          </td>
        </tr>
      </table>
    </div>
  </ItemTemplate>
</asp:DataList>

Answer 1

You should be able to solve this with the following layout:

<asp:DataList id="TypesList" runat="server" Visible="true" RepeatColumns="3" Width="100%" ItemStyle-Width="25%" ItemStyle-HorizontalAlign="Center">

  <HeaderTemplate>
    <div style="width:170px; float:left;">
      <div>All Brands Pic and Link</div>
      <div>
        <span style="color:#000;font-weight:bold;font-size:120%;">All Brands</span>
      </div>
    </div>
  </HeaderTemplate>

  <ItemTemplate>
    <div style="width:170px; float:left;">
      <div>
        <asp:Label ID="lblID" runat="server" Visible="false" Text='<%#DataBinder.Eval(Container.DataItem,"batteryTypeID")%>'></asp:Label>
        <a href='/<%#DataBinder.Eval(Container.DataItem,"catid")%>/<%#DataBinder.Eval(Container.DataItem,"catname")%>/<%#DataBinder.Eval(Container.DataItem,"brandid")%>/<%#DataBinder.Eval(Container.DataItem,"brand_name")%>/<%#DataBinder.Eval(Container.DataItem,"batteryTypeID")%>/<%#DataBinder.Eval(Container.DataItem,"typeName")%>' target='_self'>
          <asp:Image ID="imgProd" runat="server" ImageUrl='images/none.jpg' />
        </a>
      </div>
      <div>
        <span style="color:#000;font-weight:bold;font-size:120%;">
          <%#DataBinder.Eval(Container.DataItem, "typeName").ToString%>
        </span>
      </div>
    </div>
  </ItemTemplate>

</asp:DataList>

My css is a little rusty but I trust people will be happy to point out how it could be styled better.