|
I am displaying three columns
“ProductID”,”ProductName”,”UnitPrice”.
Our target is when the user clicks a row, the repeater row
should be highlighted so that it indicates the user the row has been selected
as in the above diagram. I am going to do this with the help of Jscript. Before
doing this we need to add some code in the above HTML for calling this Jscript
function when the user clicks the Repeater Row. To make this happen I am adding
an onClick event to the row in ItemTemplate of Repeater. So in the above HTML,
I have made some small modification to call the Jscript function.
<ItemTemplate>
<tr id='<%#DataBinder.Eval(Container.DataItem,
"ProductID")%>'
onclick='javascript:Repeater_selectRow(this,
"<%#DataBinder.Eval(Container.DataItem,
"ProductID")%>",true);'
onmouseover='javascript:Repeater_mouseHover(this);' >
<td bgcolor=""
valign="top"><%#DataBinder.Eval(Container.DataItem,
"ProductID")%></td>
<td bgcolor=""
valign="top"><%#DataBinder.Eval(Container.DataItem,
"ProductName")%></td>
<td bgcolor=""
valign="top"><%#DataBinder.Eval(Container.DataItem,
"UnitPrice")%></td>
</tr>
</ItemTemplate>
In the above markup I have called one more Jscript function,
onmouseover function that makes the mouse pointer to “hand” which indicates the
user that the grid is selectable.Now, when the user clicks a row I need to
capture the ID (ProductId in our case) of the row some where so that I can use
this ID to do the required action on server side. I have done this using a
Hidden Variable with “Runat=Server” attribute Add the following HTML for the
hidden variable.
<INPUT id="hdnProductID"
type="hidden" value="0" runat="server"
NAME="hdnProductID">
Now the implementation Repeater_selectRow() function will be
like,
function Repeater_selectRow(row, ProductId)
{
var hdn=document.Form1.hdnProductID;
hdn.value = ProductId;
if (lastRowSelected != row)
{
if (lastRowSelected != null)
{
lastRowSelected.style.backgroundColor = originalColor;
lastRowSelected.style.color = 'Black'
lastRowSelected.style.fontWeight = 'normal';
}
originalColor = row.style.backgroundColor
row.style.backgroundColor = 'BLACK'
row.style.color = 'White'
row.style.fontWeight = 'normal'
lastRowSelected = row;
}
}
This function takes 2 arguments, Current Row (row) and
ProdudtID. This function initializes the hidden variable to access the row id
in server side. I am changing the background color and font color so as to make
the row appear as selected. The variable “lastRowSelected” is used to make the
last selected row back to normal when the user simply clicks a row and without
doing any action then he clicks a another row.
The Repeater_mouseHover(this); function will look like this,
function Repeater_mouseHover(row)
{
row.style.cursor = 'hand';
}
After clicking a row, we can access the RowID (productID in
our case) in server side using the hidden variable like,
hdnProductID.Value
|