Re<05020a77-1515-4ae5-9d54-0c43a384dd2d@i18g2000prn.googlegroups.com>

[blanka]

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.DataItem, "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.DataItem, "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.style.backgroundColor = '#F7F6F3';
vRows.style.color = '#333333';
vRows.style.fontWeight = 'normal';
}
else
{
vRows.style.backgroundColor = '#FFFFFF';
vRows.style.color = '#284775';
vRows.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 <input> and <asp:Label> variables but the values don't seem to be visible from the C# side.


Any help would be appreciated.

Thanks,
Blanka

 

[blanka]

Sorry, the declaration of the asp:Repeater got a bit trimmed on the last post. Basically in each TR I assign javascript functions for the onmouseover, onmouseout, onclick events (the stuff that didn't get trimmed). The reason there are 2 blocks of event assignments is that I use and ItemTemplate and an AlternatingItemTemplate in the repeater.

Sorry if I'm not very clear.

Thanks,
Blanka