How do I change color of selected Row in the Grid in C# web application?

Question

enter image description here I want to change the color of particular row selected in the grid. How is it possible for my web application? Please suggest me.

How you are selecting your row.Is it a Select Event of a Gridview? — RL89, Sep 13 '12 at 08:02
you need to use RowCreated-Event of the GridView. I think you need something like [this][1] [1]: http://stackoverflow.com/questions/6250545/how-to-implement-full-row-selecting-in-gridview-without-select-button — Mohamed Farrag, Sep 13 '12 at 08:21
http://www.aspsnippets.com/Articles/Using-JavaScript-with-ASP.Net-GridView-Control.aspx — 4b0, Sep 13 '12 at 08:28

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

You have to add some javascript to every row in code-behind. Handle onmouseover event and change background color: Change GridView row color based on condition

edited May 23 '17 at 12:03

Community

1
1

answered Sep 13 '12 at 08:25

opewix

4,993
1
20
42

score 0 · Answer 2 · answered Sep 13 '12 at 08:27

0

Attach an onclick javascript function to each checkbox, and upon if the checkbox is checked, then assign some css class to that row, which will highlight the entire row.

answered Sep 13 '12 at 08:27

Developer

759
2
9
24

score 0 · Answer 3 · answered Sep 13 '12 at 08:31

In your GridView, add the SelectedRowStyle-property and use the BackColor-property to set the color of the selected row.

So your GridView will look like this:

<asp:GridView ID="GridTest" runat="server" DataSourceID=... >
   <Columns>
   ...
   </Columns>
   <SelectedRowStyle BackColor="#E2DED6"/>
</asp:GridView>

score 0 · Answer 4 · answered Sep 13 '12 at 08:32

0

If this is a GridView control that we are talking about here, then you can just make use of the <SelectedRowStyle>

<asp:GridView id="GridView1" runat="Server">

    <Columns></Columns>

    <SelectedRowStyle CssClass="selectedRowStyle" BackColor="LightCyan"
        ForeColor="DarkBlue"
        Font-Bold="true" />

</asp:GridView>

Style this up accordingly.

answered Sep 13 '12 at 08:32

Tim B James

20,084
4
73
103

Kemboj - you need to also set the Selected Row index in your RowCommand. – Tim B James Sep 13 '12 at 09:30

Sonal Satpute · Accepted Answer · 2012-09-13T08:59:28.557

try this

    <style type="text/css">
    .row-highlight
    {
        background-color: Yellow;
    }
    .row-select
    {
        background-color: red;
    }
</style>

<asp:GridView ID="GridView1" runat="server">

</asp:GridView>
<script type="text/javascript">
    $(function () {
        var tr = $('#<%= GridView1.ClientID %>').find('tr');

        tr.hover(
             function () {  // mouseover
                 $(this).addClass('row-highlight');
             },
             function () {  // mouseout
                 $(this).removeClass('row-highlight');
             }
        );
        tr.click(function() {
            $(this).addClass('row-select');
        });
    });

</script>

are you getting any error. its working for me. you need to add the reference for jQuery — Sonal Satpute, Sep 13 '12 at 09:25

How do I change color of selected Row in the Grid in C# web application?

5 Answers5