My first task is to connect a Table from the database so that each row is editable. After some research, I settled on using the DataList due to its <EditItemTemplate> property, which the repeater lacks.
To create a Zebra table, I crafted a CSS class like so:
.row:nth-of-type(odd)
{
background-color:Green;
}
When I applied this class to the repeater, it worked smoothly since the repeater allows for coding rows and columns individually. Here is an example:
<asp:Repeater>
<HeaderTemplate>
<Table ...>
</HeaderTemplate>
<ItemTemplate>
<tr Class="row">
<td> ... </td>
<td> ... </td>
</tr>
</ItemTepmlate>
<FooterTemplate></Table></FooterTemplate>
However, when I followed the same structure for my DataList, it appeared messy and confusing. Here is how my DataList is set up:
<asp:DataList ID="dlStages" runat="server" DataKeyField="Priority" OnCancelCommand="dlStages_CancelCommand"
OnEditCommand="dlStages_EditCommand"
OnUpdateCommand="dlStages_UpdateCommand" BorderWidth="2"
GridLines="Both" CellPadding="20" CellSpacing="20" Width="99%"
onitemdatabound="dlStages_ItemDataBound">
<HeaderTemplate>
<th>
Priority
</th>
<th>
Stage
</th>
<th>
Description
</th>
<th>
Command
</th>
<th>
Expected End Date
</th>
</HeaderTemplate>
<ItemTemplate>
<td>
<%# Eval("Priority") %>
</td>
<td>
<%# Eval("StatusName") %>
</td>
<td>
<%# Eval("Comments") %>
</td>
<td>
<asp:LinkButton ID="lbtnEdit" runat="server" Text="Edit" CommandName="edit"></asp:LinkButton>
</td>
<td>
<%# Eval("ExpectedEndDate", "{0:dd-MM-yyyy}")%>
</td>
</ItemTemplate>
<EditItemTemplate>
<td>
<%# Eval("Priority") %>
</td>
<td>
<%# Eval("StatusName") %>
</td>
<td>
<asp:TextBox ID="txtComments" runat="server" Text='<%# Eval("Comments") %>' Width="800px"
Height="48px" TextMode="MultiLine"></asp:TextBox>
</td>
<td>
<asp:LinkButton ID="lbtnUpdate" runat="server" Text="Update" CommandName="update"></asp:LinkButton>
/
<asp:LinkButton ID="lbtnCancel" runat="server" Text="Cancel" CommandName="cancel"></asp:LinkButton>
</td>
<td>
<asp:TextBox runat="server" ID="txtDate"></asp:TextBox>
<asp:CalendarExtender ID="CalendarExtender1" runat="server" PopupButtonID="txtDate"
TargetControlID="txtDate" Format="dd-MM-yyyy">
</asp:CalendarExtender>
</td>
</EditItemTemplate>
</asp:DataList>
Trying to apply the CSS class to each row in the DataList, I wrote the following code in the code behind:
protected void dlStages_ItemDataBound(object sender, DataListItemEventArgs e)
{
e.Item.CssClass = "row";
}
However, this did not result in a Zebra table as expected. Instead, an unknown Grey color appeared in the first column. Can someone point out the issue with my code and suggest a solution to implement a Zebra table within the DataList control in my scenario?
Appreciate any assistance provided.
P.S. I acknowledge that my question may lack clarity, so feel free to ask for further clarification.