Change the color of gridview row when the row is selected..

[VinayRok]

Hi friends...
Am using a Gridview and whenever mousehover on the row of gridview am changing the color of row. now i want to change the color of row when i select the gridview row.. how to do it... plz help me ...

protected void GridViewStudentList_RowCreated(object sender, GridViewRowEventArgs e)
    {

        // only apply changes if its DataRow

        if (e.Row.RowType == DataControlRowType.DataRow)
        {

          

            e.Row.Attributes.Add("onmouseover",

          "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#FF9955'");
      
       

            e.Row.Attributes.Add("onmouseout",

            "this.style.backgroundColor=this.originalstyle;");

        }

    }


//This is an HTML code...

 <asp:GridView ID="GridViewStudentList" SelectedRowStyle-ForeColor="#FBA16C" OnRowCreated="GridViewStudentList_RowCreated"
                                                    runat="server" Width="100%" CellPadding="4" ForeColor="#333333" GridLines="None"
                                                    AutoGenerateColumns="false">
                                                    <RowStyle BackColor="#EFF3Ff" />
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton1" Text='<%# DataBinder.Eval(Container.DataItem,"FirstName")%>'
                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"
                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Class Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton2" ForeColor="BurlyWood" Text='<%# DataBinder.Eval(Container.DataItem,"ClassTitle")%>'
                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"
                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <%--<Columns>
                                                   <asp:BoundField DataField="ClassId" HeaderText="Class Id" 
                                                            ControlStyle-CssClass="nameFont" >
                                                            <ControlStyle CssClass="nameFont" />
                                                        </asp:BoundField>
                                                </Columns>--%>
                                                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                                    <HeaderStyle BackColor="#5F9EA0" Font-Bold="True" ForeColor="White" />
                                                    <EditRowStyle BackColor="#2461BF" />
                                                    <AlternatingRowStyle BackColor="White" />
                                                </asp:GridView>

[dnanetwork]

// add this to code behind....

protected void MyGridView_RowCreated(object sender, GridViewRowEventArgs e)
{

string rowID = String.Empty;

if (e.Row.RowType == DataControlRowType.DataRow)

{

rowID = "row"+e.Row.RowIndex;

e.Row.Attributes.Add("id","row"+e.Row.RowIndex);

e.Row.Attributes.Add("onclick","ChangeRowColor(" +"'" + rowID + "'" + ")");

}

}

// Add this to designer page....

<script language ="javascript" type="text/javascript">
document.body.style.cursor = 'pointer';

var oldColor = '';

 

function ChangeRowColor(rowID)

{

var color = document.getElementById(rowID).style.backgroundColor;

if(color != 'yellow')

oldColor = color;

if(color == 'yellow')

document.getElementById(rowID).style.backgroundColor = oldColor;

else document.getElementById(rowID).style.backgroundColor = 'yellow';

}

</script>

Hope it helps

[Mrunmaishinde]

hi....

this thread is helpfull.
thanks....:):)

[zslgreen]

protected void GridView1_RowDataBound1(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onmouseover", "this.style.cursor='hand';this.style.backgroundColor='orangered'");
            e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='white'");
            e.Row.Attributes.Add("onclick", "window.open('test.aspx?id=" + DataBinder.Eval(e.Row.DataItem, "uid") + "','myprofilewindow','width=400,height=200,toolbar=0,resizable=0');");

        }
    }

[crishlay]

Hi friends...
Am using a Gridview and whenever mousehover on the row of gridview am changing the color of row. now i want to change the color of row when i select the gridview row.. how to do it... plz help me ...

protected void GridViewStudentList_RowCreated(object sender, GridViewRowEventArgs e)
    {

        // only apply changes if its DataRow

        if (e.Row.RowType == DataControlRowType.DataRow)
        {

          

            e.Row.Attributes.Add("onmouseover",

          "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#FF9955'");
      
       

            e.Row.Attributes.Add("onmouseout",

            "this.style.backgroundColor=this.originalstyle;");

        }

    }


//This is an HTML code...

 <asp:GridView ID="GridViewStudentList" SelectedRowStyle-ForeColor="#FBA16C" OnRowCreated="GridViewStudentList_RowCreated"
                                                    runat="server" Width="100%" CellPadding="4" ForeColor="#333333" GridLines="None"
                                                    AutoGenerateColumns="false">
                                                    <RowStyle BackColor="#EFF3Ff" />
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton1" Text='<%# DataBinder.Eval(Container.DataItem,"FirstName")%>'
                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"
                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <Columns>
                                                        <asp:TemplateField>
                                                            <HeaderTemplate>
                                                                <asp:Label ID="Label1" runat="server" Text="Class Name"></asp:Label>
                                                            </HeaderTemplate>
                                                            <ItemTemplate>
                                                                <asp:LinkButton ID="LinkButton2" ForeColor="BurlyWood" Text='<%# DataBinder.Eval(Container.DataItem,"ClassTitle")%>'
                                                                    CommandArgument='<%# DataBinder.Eval(Container.DataItem, "StudentId")%>' OnClick="lnkStudent_Click"
                                                                    runat="server"></asp:LinkButton>
                                                            </ItemTemplate>
                                                        </asp:TemplateField>
                                                    </Columns>
                                                    <%--<Columns>
                                                   <asp:BoundField DataField="ClassId" HeaderText="Class Id" 
                                                            ControlStyle-CssClass="nameFont" >
                                                            <ControlStyle CssClass="nameFont" />
                                                        </asp:BoundField>
                                                </Columns>--%>
                                                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                                                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                                                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                                                    <HeaderStyle BackColor="#5F9EA0" Font-Bold="True" ForeColor="White" />
                                                    <EditRowStyle BackColor="#2461BF" />
                                                    <AlternatingRowStyle BackColor="White" />
                                                </asp:GridView>

1 protected void Gridview1_RowCreated(object sender, GridViewRowEventArgs e)
2 {
3 // only apply changes if its DataRow
4
5 if (e.Row.RowType == DataControlRowType.DataRow)
6 {
7 // when mouse is over the row, save original color to new attribute, and change it to highlight yellow color
8
9 e.Row.Attributes.Add("onmouseover",
10
11 "this.originalstyle=this.style.backgroundColor;this.style.backgroundColor='#0404B4'");
12
13 // when mouse leaves the row, change the bg color to its original value
14
15 e.Row.Attributes.Add("onmouseout",
16
17 "this.style.backgroundColor=this.originalstyle;");
18 }

[pinkygirl]

Hi, Try this..

protected void MyGrid_RowDataBound(object sender, GridViewRowEventArgs e)
    {

        foreach (TableCell tc in e.Row.Cells)
        {

            tc.Attributes["style"] = "border-color: #c3cecc";

        }

    }

[symeramon]

Hi dnanetwork, First of all great job, may God give health to your hands as those hands rescued me also by writing this thread! :) Here is your code's updated version which erases backcolor of the row selected before...

var eskirowid;
            function EskiRowIdTut(id) {
                eskirowid = id;
            }
            var sayac = 1;
            function ChangeRowColor(rowID) {
                sayac--;
                if (sayac < 0) {
                    document.getElementById(eskirowid).style.backgroundColor = 'white';//makes pre-selected row's backcolor = white                
}
                var oldColor = '';
                var color = document.getElementById(rowID).style.backgroundColor;
                if (color != 'blue') oldColor = color;
                if (color == 'blue') document.getElementById(rowID).style.backgroundColor = oldColor;
                else document.getElementById(rowID).style.backgroundColor = 'blue';
                EskiRowIdTut(rowID);//get's pre-selected row's id
             }