We Keep Coding

How to change GridView Header Style colour for selective columns

I am fairly new to asp.net webforms and I have the following code to generate a grid with two columns,
I separated the columns using colours which I am able to do using e.Row.Cells[0].BackColor = Color.FromArgb(152, 251, 152);and for the second column e.Row.Cells[1].BackColor = Color.FromArgb(60, 179, 113) at the back end
what i am trying to achieve now is to colour the part of the GridView Header that is over the FirstColumn to the same colour as the first column and the second portion of the GridView Header that is over SecondCoumn to the same colour as the second column
Below is m y code
<asp:GridView ID="GridData" CssClass="Gridview" runat="server"
Width="100%" AutoGenerateColumns="False" OnRowDataBound="GridData_RowDataBound" ShowFooter="True">
<Columns>
<asp:TemplateField ItemStyle-Width="120px" HeaderText="ColumnFirst" >
<ItemTemplate>
<asp:Label ID="lblLoanGiven" runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblTotalLoanGiven" runat="server"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-Width="120px" HeaderText="ColumnSecond">
<ItemTemplate>
<asp:Label ID="lblLoanGivenBalance" runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<asp:Label ID="lblTotalLoanGivenBalance" runat="server"></asp:Label>
</FooterTemplate>
</asp:TemplateField>
<PagerStyle BackColor="#3C8DBC" ForeColor="White" />
<HeaderStyle BackColor="#3C8DBC" ForeColor="White" />
<FooterStyle BackColor="#007C98" ForeColor="White" CssClass="footer-design" />
</asp:GridView>

GridData.HeaderRow.Cells[1].Style["background-color"] = "#3CB371";
Found the answer the above code colours my 2porions of the GridView headers

grid posts back when checkbox is checked

I have this grid set up.... it all works totally fine... except one issue...
<asp:GridView runat="server"
ID="grdFacetsAssigned"
AllowPaging="false"
AllowSorting="True"
DataKeyNames="lngSystemFacet"
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
CssClass="table_scroll"
AutoGenerateColumns="False" GridLines="None"
ShowHeader="false" Width="500px"
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"
ShowFooter="false" PagerSettings-Visible="false"
DataSourceID="SM_spStateUpdateReport_FacetAssignList"
OnRowCreated="grdFacetsAssigned_RowCreated">
<RowStyle CssClass="table_row" />
<Columns>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lbllngSystemFacetID" runat="server"
Text='<%# Eval("lngSystemFacetID") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="strSystemSystemFacet" SortExpression="strSystemSystemFacet"
ItemStyle-Width="50%" />
<asp:TemplateField ItemStyle-Width="30%" ItemStyle-HorizontalAlign="Center"
SortExpression="bolAssigned">
<ItemTemplate>
<asp:CheckBox ID="chkFacetAssigned" runat="server"
OnClientClick="alert(this.checked);"
OnCheckedChanged="chkFacetAssigned_CheckedChanged"
AutoPostBack="True" Checked='<%# Eval("bolAssigned") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField SortExpression="intOrder"
HeaderText="Display Order" ItemStyle-Width="20%">
<ItemTemplate>
<asp:Label ID="lblAssignedFacetOrder" runat="server"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'></asp:Label>
<asp:TextBox ID="txtAssignedFacetOrder" runat="server"
CssClass="gridview_input"
Text='<%#DataBinder.Eval(Container.DataItem, "intOrder")%>'
Visible="False"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<SelectedRowStyle CssClass="table_selected_row" />
<AlternatingRowStyle CssClass="table_alternating_row" />
<EmptyDataRowStyle CssClass="table_empty" />
<EmptyDataTemplate>
No Data
</EmptyDataTemplate>
</asp:GridView>
When you click the chkFacetAssigned checkbox the appropriate event fires. The code works well from there. What happens though is when the checkbox is checked... if the row is not selected there are two postbacks that happen. The first postback is from the grid and the second postback is from the checkbox. Both postbacks cause the chkFacetAssigned_CheckedChanged event to be called- resulting in code running twice that should only run once. I should note that if the row is already selected (the row the checkbox is on) you do not see this extra postback. Someone please help.
There are no other event handlers registered or anything like this.

First line of your code. Remove the following.
OnSelectedIndexChanging="grdFacetsAssigned_SelectedIndexChanging"
Second Line
OnSelectedIndexChanged="grdFacetsAssigned_SelectedIndexChanged"

What I did for this was a workaround in the checkbox event handler...
if (Page.Request.Params["__EVENTTARGET"].IndexOf("chkFacetAssigned") < 1)
{
return;
}
This ensures that the event is ignored unless it is responding to a postback that was initiated by the checkbox and not the grid.

When i Check the Checkbox how do I change that specific row style? C# ASP.NET

So i got this gridview on ASP.NET, it is about a gmail client, i made a template field with a check box that is for select several message at the same time, but first when you select a message i want to change the row background color, I already have my CSS but i dont know how to trigger the action or how to know what row was selected in the code. Here is the template of my grid:
<asp:GridView ID="inboxGrid" runat="server"
AutoGenerateColumns="false" CssClass="inbox" ShowHeader="false" BorderStyle="None" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" />
</ItemTemplate>
<ItemStyle Width="24" CssClass="check"/>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="from" />
<ItemTemplate>
<asp:Label ID="lblFrom" runat="server"
Text = '<%# Eval("From") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="subject" />
<ItemTemplate>
<asp:Label ID="lblSubject" runat="server" Text='<%# Eval("Subject") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemStyle CssClass="date" />
<ItemTemplate>
<asp:Label ID="lblFecha" runat="server" Text='<%# Eval("Fecha") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<RowStyle CssClass="inbox"/>
</asp:GridView>

Here is a solution using JQuery
Provided you add a CssClass named chk to asp:checkbox
<asp:CheckBox ID="chkSelect" runat="server" CssClass="chk" />
Here is the script
$(document).ready(function () {
$(".chk :checkbox").live("click", function () {
$(this).closest("tr").css("background-color", this.checked ? "#0000FF" : "");
});
});

Try this:
<asp:CheckBox ID="chkSelect" runat="server" OnClick="changeCss(this.id);" />
You can use toggleClass('CssClassName') to toggle the class on checkbox clicks:
function changeCss(ctrlId){
$(ctrlId).parent().parent().toggleClass('check');
}
The hierarchy is tr > td > checkbox, we go reverse to change the css of tr/row.

Edit and update gridview rows on mouse click event

I want to edit and update gridview rows on mouse click event. If the user clicks on a row it should become editable and when he again clicks on the same row it should become uneditable and the changes should be saved.
my gridview looks like:-
<asp:GridView ID="grdexcelsheet" runat="server" AllowPaging="True"
AutoGenerateColumns="False" RowStyle-HorizontalAlign="Left" HorizontalAlign="Center"
onpageindexchanging="grdexcelsheet_PageIndexChanging"
Width = "100%" Height = "100%" Font-Size="Small">
<PagerSettings Position="Bottom" Mode="NextPreviousFirstLast" FirstPageText="First"
LastPageText="Last" NextPageText="Next" PreviousPageText="Prev" PageButtonCount="5" />
<Columns>
<asp:BoundField DataField="SrNo" HeaderText="SrNo" ReadOnly="true" />
<asp:TemplateField HeaderText="CustomerFieldName">
<ItemTemplate>
<asp:Label ID="Label4" Runat="server" Text='<%# Bind("CustomerFieldName") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Eval("CustomerFieldName") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="CompanyFieldName" HeaderText="CompanyFieldName" ReadOnly="true" />
<asp:BoundField DataField="Usage" HeaderText="Usage" ReadOnly="true" />
</Columns>
</asp:GridView>

There are many ways to do this. You can use AJAX Control Toolkit Modal Popup Extender for updating your grid. Also, you can make use Update Panel from the same toolkit.

If you are willing to use third party controls...please use this which will be very to use
http://obout.com/grid/grid_commands.aspx...

Getting rowID value for a "checked" checkbox in GridView in ASP.Net

I am using checkboxs in a GridView. I need to determine the value in the cell in the 2nd column, if a checkbox has been checked.
I am using C# 2008 and ASP.net
<asp:GridView ID="gvOrders" runat="server" AutoGenerateColumns="False" CellPadding="4" GridLines="None" Width="100%" AllowPaging="True" PageSize="20"
onpageindexchanging="gvOrders_PageIndexChanging" ForeColor="#333333">
<Columns>
<asp:TemplateField HeaderText="VerifiedComplete" >
<ItemTemplate>
<asp:CheckBox ID="cbPOID" runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="PurchaseOrderID" HeaderText="PurchaseOrderID" HtmlEncode="False" ></asp:BoundField>
<asp:BoundField DataField="VENDOR_ID" HeaderText="Vendor ID"></asp:BoundField>
<asp:BoundField DataField="VENDOR_NAME" HeaderText="Vendor Name"></asp:BoundField>
<asp:BoundField DataField="ITEM_DESC" HeaderText="Item Desc"></asp:BoundField>
<asp:BoundField DataField="SYS_DATE" HeaderText="System Date"></asp:BoundField>
</Columns>
<FooterStyle CssClass="GridFooter" BackColor="#990000" Font-Bold="True" ForeColor="White" />
<PagerStyle CssClass="GridPager" ForeColor="#333333" BackColor="#FFCC66" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="Navy" />
<HeaderStyle CssClass="GridHeader" BackColor="#990000" Font-Bold="True" ForeColor="White" />
<RowStyle CssClass="GridItem" BackColor="#FFFBD6" ForeColor="#333333" />
<AlternatingRowStyle CssClass="GridAltItem" BackColor="White" />
</asp:GridView>
protected void btnDisable_Click(object sender, EventArgs e)
{
foreach (GridViewRow gvr in gvOrders.Rows)
{
if (((CheckBox)gvr.FindControl("cbPOID")).Checked == true)
{
string strPrimaryid = gvr.Cells[2].ToString();
}
}
}

Another way to do this, to avoid accessing the cells of the GridView by index, is to convert the desired BoundField to a TemplateField in the designer. Then use the FindControl method to get the text value in that cell. By default, the designer will give the Label control of the new TemplateField a name like "Label1."
I would add some pictures to show the designer part, if that process were easier. At any rate, the aspx would change like so, which you could do manually too:
<asp:BoundField DataField="PurchaseOrderID" ...</asp:BoundField>
becomes
<asp:TemplateField HeaderText="PurchaseOrderID">
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("PurchaseOrderID") %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("PurchaseOrderID") %>'></asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
Then you would make this simple code change:
string strPrimaryid = gvr.FindControl("Label1").Text;
However, I think a better way to do this is by utilizing the DataKeys features of the GridView control. The first step would be to set the DataKeyNames property of your GridView:
<asp:GridView ID="gvOrders" runat="server" DataKeyNames="PurchaseOrderID" ...>
Then, assuming your PurchaseOrderID column is of type int, you would change that same line to be:
int primaryid = (int)gvOrders.DataKeys[gvr.RowIndex].Value;