how do I change the background colour of a row when I click on some text within it? I am simply wanting to highlight that row. I’ve added an onclick event but no idea how to light up the row. Here’s what I have..
<asp:GridView ID="gdvOrders" width="100%" runat="server" style="font-size:1.8em" ShowHeaderWhenEmpty="True" EmptyDataText="No orders" AllowPaging="True" AutoGenerateColumns="False" CssClass="mGrid" DataKeyNames="orderID" DataSourceID="DSOrders" PageSize="20" AllowSorting="True">
<AlternatingRowStyle CssClass="alt" />
<Columns>
<asp:TemplateField HeaderText="Order">
<ItemTemplate>
<asp:LinkButton ID="LnkBtn1" onclick="LnkBtn1_Click" runat="server" Text='<%# Eval("ordertext") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="price" HeaderText="Price" />
.........
VB
Protected Sub LnkBtn1_Click(sender As Object, e As System.EventArgs)
Dim LnkBtn1 As LinkButton = CType(sender, LinkButton)
End Sub
2
Answers
I do that kind of stuff during the Pre-Render event. Here’s a small snippet.
Ok, let’s write some code to highlight the row using vb. As pointed out, this is a kind of using a "mountain" to drop on a small ant of a problem. (much better to do this client side).
However, let’s do this with server-side code, since there are MANY things to be learned from this example. (such as picking up the current row in a GridView based on button click).
So, while 100% client-side JavaScript is a great idea, it can often not be all that simple, since the previous row that is highlighted now has to be un-highlighted!
So, say this simple GridView with a button in the row.
And code behind to load up this grid:
And also note in above, we have a standard button in the GridView
And that button can have this code:
So, note how when we highlight a row, we ALSO have to un-highlight the previous row.
The effect now looks like this:
However, perhaps it of greater ease to just let the cursor "hover" over the row. Note how the above grid already has a "hover" built int.
That code free row hover effect was done with this setting of the GridView:
So, in fact, table, and table-hover are bootstrap classes, and assuming that you have bootstrap installed (you VERY likely do, since that is the default for templates), then perhaps just a cursor hover will suffice.
As noted, note how the row button click picks up the CURRENT row clicked on by using naming container. This works for repeaters, GridView, ListView and more. This approach also means you don’t have to use or care about specific GridView events such as command name. In fact, for such row clicks, I suggest you use the above naming container for such events.
Edit: Allow a re-load and re-bind of Grid, keeping rows.
So, to allow/keep the highlighted rows EVEN with a re-load?
Then we need 2 new parts:
First part, keep a list of the primary key values from the database.
Second part, add to the re-bind routine code to highlight any existing row in our list of rows.
So, code now becomes this:
So, the last button is to test our code, and it does a 100% re-load.
The results are this: