Hi,
I have a repeater control which is selectable, meaning that the selected row changes style on selection.
<asp:Repeater ID="repeaterList" runat="server" OnItemCommand="repeaterList_ItemCommand" OnItemDataBound="repeaterList_ItemDataBound">
<HeaderTemplate>
<table title="tableList" id="tableList" width="600px" style="font-size:small; font-family:Arial; border-style:solid; border-width:1px">
<tr style="background-color:#5D7B9D;color:White">
<th>Bill ID</th>
<th>Customer Name</th>
<th>Bill Number</th>
<th>Bill Date</th>
<th>Bill Total</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr title="trListRow" id="trListRow" class="tmpClass"
style="background-color:#F7F6F3; color:#333333"
onmouseover="javascript
:setMouseOverColor(this);"
onmouseout="javascript
:setMouseOutColor(this);"
onclick="javascript
:setMouseClicked(this, <%# Container.ItemIndex %>);">
<td id="tdBillID"><%#DataBinder.Eval(Container.DataIte m, "BillID")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "CustomerName")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillNumber")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillDate")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillTotal") %></td>
<%--<td><asp:Button ID="click" Runat="server" CommandName="click" CommandArgument=<%# Container.ItemIndex %>></asp:Button></td>--%>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr id="trListRow" style="background-color:#FFFFFF; color:#284775"
onmouseover="javascript
:setMouseOverColor(this);"
onmouseout="javascript
:setMouseOutColor(this);"
onclick="javascript
:setMouseClicked(this, <%# Container.ItemIndex %>);">
<td id="tdBillID"><%#DataBinder.Eval(Container.DataIte m, "BillID")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "CustomerName")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillNumber")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillDate")%></td>
<td><%#DataBinder.Eval(Container.DataItem, "BillTotal") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
and the Javascript functions changing style:
function setMouseOverColor(element)
{
oldgridSelectedColor = element.style.backgroundColor;
element.style.backgroundColor='#DEECEF';
element.style.cursor='hand';
}
function setMouseOutColor(element)
{
element.style.backgroundColor = oldgridSelectedColor;
element.style.textDecoration = 'none';
}
function setMouseClicked(element, index)
{
ResetTheTable(index);
oldgridSelectedColor = "#DEECEF";
}
function ResetTheTable(index)
{
var vTable = document.getElementById("tableList");
var vRows = vTable.getElementsByTagName("tr");
// we start from 1 because 0 is the header
for(i = 1; i < vRows.length; i++){
if(i%2)
{
vRows[i].style.backgroundColor = '#F7F6F3';
vRows[i].style.color = '#333333';
vRows[i].style.fontWeight = 'normal';
}
else
{
vRows[i].style.backgroundColor = '#FFFFFF';
vRows[i].style.color = '#284775';
vRows[i].style.fontWeight = 'normal';
}
}
vRows[index+1].style.backgroundColor = '#DEECEF';
vRows[index+1].style.color = '#333333';
vRows[index+1].style.fontWeight = 'bold';
}
This works very nicely, changing the style of the row when a row is selected.
What I would like help with is I don't know how to store th index of the selected row so I can later access it from my C# code. I am pretty new to ASP development, I tried storing the selection in <inputand <asp:Labelvariables but the values don't seem to be visible from the C# side.
Any help would be appreciated.
Thanks,
Blanka
