DataList Header Location : The Official Microsoft ASP.NET Forums

Reply

clevesteve

Participant

1405 Points

DataList Header Location

Dec 14, 2012 09:03 PM|LINK

Is it possible to place the Header of a DataList to the Left of the Items? I am using a repeatdirection=Horizontal and would like the Header to appear to the left of the first item. Thanks.

Not an IT Professional

Reply

Decker Dong ...

All-Star

118619 Points

18779 Posts

Re: DataList Header Location

Dec 15, 2012 09:42 AM|LINK

Hello,

DataList has a HeaderTemplate, in fact I think you can set some header columns there. here's an example:

<asp:DataList ……>
   ………………
   <HeaderTemplate>
        <table>
            <tr>
                 <th>Id</th>
            </tr>
   </HeaderTemplate>

   <ItemTemplate>
          <tr>
                 <td>Your Value</td>
          </tr>
   </ItemTemplate>
</asp:DataList>

Marked as answer by decker dong - msft on Dec 20, 2012 12:07 AM

Reply

gregaDro

Member

318 Points

65 Posts

Re: DataList Header Location

Dec 15, 2012 10:06 AM|LINK

You can do it this way ...

Code

protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dtPersons = new DataTable();
            dtPersons.Columns.Add("ID");
            dtPersons.Columns.Add("Name");
            dtPersons.Columns.Add("Surrname");

            dtPersons.Rows.Add(new object[] { "1", "John", "Doe" });
            dtPersons.Rows.Add(new object[] { "2", "Mike", "Tyson" });
            dtPersons.Rows.Add(new object[] { "3", "Pete", "Sampras" });

            DataRow headerRow = dtPersons.NewRow();
            foreach (DataColumn col in dtPersons.Columns)
            {
                headerRow[col.ColumnName] = col.ColumnName;
            }

            dtPersons.Rows.InsertAt(headerRow, 0);
            dtPersons.AcceptChanges();

            dList.DataSource = dtPersons;
            dList.DataBind();
        }

        protected void dList_ItemDataBound(object sender, DataListItemEventArgs e)
        {
            if (e.Item.ItemType == ListItemType.Item && e.Item.ItemIndex == 0)
            {
                e.Item.BackColor = System.Drawing.Color.Black;
                e.Item.ForeColor = System.Drawing.Color.White;
            }
        }

HTML

        <asp:DataList ID="dList" runat="server" RepeatDirection="Horizontal" CellPadding="4" ForeColor="#333333" OnItemDataBound="dList_ItemDataBound">
            <AlternatingItemStyle BackColor="White" />
            <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
            <ItemStyle BackColor="#E3EAEB" />
            <SelectedItemStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
            <ItemTemplate>
                <asp:Label ID="lblID" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "ID").ToString() %>'></asp:Label><br />
                <asp:Label ID="lblName" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Name").ToString() %>'></asp:Label><br />
                <asp:Label ID="lblSurrname" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "Surrname").ToString() %>'></asp:Label>
            </ItemTemplate>
        </asp:DataList>