CODEWITHSUNDEEP
c#javascriptasp.netdatagrid
RockOnGom
RockOnGom

Reputation: 3961

Change the background color of row in datagrid

I have a datagrid and it has a checkbox in rows. I want to change background color of row when checkbox is clicked. Example code:

 <asp:DataGrid ID="Grid" runat="server"  DataKeyField="KeyID" CssClass="grid"
                        AutoGenerateColumns="False" CellPadding="10" ForeColor="#333333" 
                            GridLines="None" OnPageIndexChanged="Grid_PageIndexChanged" 
                        OnEditCommand="Grid_EditCommand" OnDeleteCommand="GetResult" 
                            onitemdatabound="Grid_ItemDataBound" >
                        <Columns>

                            <HeaderTemplate>
                                    <input id="chkAllItems" type="checkbox" onclick="javascript:HeaderClick(this);"/>
                            </HeaderTemplate>
                            <ItemTemplate>
                                    <asp:CheckBox runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "KeyID")%>' ID="checkBoxID" AutoPostBack="false" OnClick="chechkedChanged(this);" ></asp:CheckBox>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:TemplateColumn>
                             <HeaderTemplate>
                                     <label for="male">Category</label>
                            </HeaderTemplate>
                            <ItemTemplate>
                                    <asp:TextBox Text="" ID="Category" runat="server" AutoPostBack="false" MaxLength="10" CssClass="tb5" > </asp:TextBox>
                            </ItemTemplate>
                        </asp:TemplateColumn>
                        <asp:EditCommandColumn  EditText="Edit" CancelText="Cancel" UpdateText="Update" HeaderText="Edit">
                        </asp:EditCommandColumn>
                        <asp:ButtonColumn CommandName="Delete" HeaderText="TDK" Text="tdk"></asp:ButtonColumn>

                        </Columns>
                        <FooterStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                        <SelectedItemStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
                        <PagerStyle BackColor="#FFCC66" ForeColor="#333333" HorizontalAlign="Center" Mode="NumericPages" />
                        <AlternatingItemStyle BackColor="#FAAC58" />
                        <ItemStyle BackColor="#81DAF5" ForeColor="#333333" />
                        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="White" />
                </asp:DataGrid>

How can I change background color of row in javascript ?

Upvotes: 0

Views: 2148

Answers (1)

Ashok kumar
Ashok kumar

Reputation: 1621

My simple GridView control contains Checkbox, Dept No, Dept Name, Location columns.

When clicked on CheckBox, the corresponding row background color changes to Red background. Javascript code inside .aspx page plays major role to achieve your functionality.

.aspx code is below:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function ChangeBackgroundColor(checkBox1) {
            var parent = document.getElementById("<%= GridView1.ClientID %>");
            var items = parent.getElementsByTagName("input");
            for (i = 0; i < items.length; i++) {
                if ((items[i].type == "checkbox") && (items[i].checked)) {
                    alert(items[i].id + ' is checked');
                    items[i].parentElement.parentElement.style.backgroundColor = "Red";
                }
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            onrowdatabound="GridView1_RowDataBound">
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:CheckBox ID="CheckBox1" onclick="javascript:ChangeBackgroundColor(this);" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Dept No">
                    <ItemTemplate>
                        <asp:Label ID="Label2" runat="server" Text='<%# Bind("DeptNo") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Dept name">
                    <ItemTemplate>
                        <asp:Label ID="Label3" runat="server" Text='<%# Bind("DName") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Location">
                    <ItemTemplate>
                        <asp:Label ID="Label4" runat="server" Text='<%# Bind("LOC") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Code behind code is given below.

SqlConnection objConn = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings["STERIAConnectionString"].ConnectionString);
protected void Page_Load(object sender, EventArgs e)
{
    var objCmd = new SqlCommand("SELECT * FROM DEPT", objConn);
    objConn.Open();
    GridView1.DataSource = objCmd.ExecuteReader();
    GridView1.DataBind();
    objConn.Close();
}

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        var checkbox1 = e.Row.FindControl("CheckBox1") as CheckBox;
        checkbox1.Attributes.Add("OnClick","return ChangeBackgroundColor('checkbox1');");
    }
}

Hope this code helps you. Let me know if you need some more help.

Upvotes: 1

Related Questions