c# asp.net Change GridView row color without postback

there are several ways to do this.

First up, as you dive into js code, TRY VERY hard, if not BEYOND super hard to avoid "onready" code, or js code that auto magic wires up a event for your button. (why? – becase then as a developer looking at the control and markup, I will have ZERO idea that some code some place else on the page is attaching a click event. This makes debugging and following code and markup BEYOND difficult to follow).

next up:
Try to keep the existing type of control you had and WERE using. If you swap out and change the control type, then VERY HIGH chance that your existing code will break. Without a doubt, you check some rows on that GV, and THEN process the selected rows. So ZERO need to change, swap out, and introduce a new control into your GV – keep your existing asp.net check box control, so your code that process each row will continue to work.

Ok, so, you can consider the lazy bones way to do this, and just wrap the GV in a update panel. This will allow use of code behind, but you not suffer a full page post back.

Next up:
Your first check box example process ALL grid rows – not required, and you can save some code. So, when you drop in a plane jane asp.net button, or say the check box with a post-back, then use this code to deal with the ONE row from the result of that button or control action. (you don’t need to process all gv rows – just the one in question).

So

So this markup:

        <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" CssClass="table" width="40%">
            <Columns>
                <asp:BoundField DataField="FirstName"   HeaderText="FirstName" />
                <asp:BoundField DataField="LastName"    HeaderText="LastName"  />
                <asp:BoundField DataField="City"        HeaderText="City" />
                <asp:BoundField DataField="HotelName"   HeaderText="HotelName"  />
                <asp:BoundField DataField="Description" HeaderText="Description"  />
                <asp:TemplateField HeaderText="Select " ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                        <asp:CheckBox ID="chkSel" runat="server" CssClass="bigcheck"
                         OnCheckedChanged="chkSel_CheckedChanged"
                         AutoPostBack="true" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Code to load, and our check box code:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            LoadGrid();
    }


    void LoadGrid()
    {
        using (SqlConnection conn = new SqlConnection(Properties.Settings.Default.TEST4))
        {
            string strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName";
            using (SqlCommand cmdSQL = new SqlCommand(strSQL, conn))
            { 
                conn.Open();
                DataTable rstData = new DataTable();
                rstData.Load(cmdSQL.ExecuteReader());
                GVHotels.DataSource = rstData;
                GVHotels.DataBind();
            }
        }
    }

    protected void chkSel_CheckedChanged(object sender, EventArgs e)
    {
        CheckBox ckBox = (CheckBox)sender;
        GridViewRow gRow = (GridViewRow)ckBox.NamingContainer;
        if (ckBox.Checked)
            gRow.Style.Add("background-color", "aliceblue");
        else
            gRow.Style.Add("background-color", "transparent");
    }

And we now get/have this with a few rows we checked

Note HOW the check box click event (with auto post-back) does not have to re-process the whole grid – so, much less code

Ok, so now lets do this without a post back. However, if that check box code (server side code) has other processing such as summing up price of products selected, then you MAY VERY well consider just keeping your code as is, and using a update-panel.

this will automatic ajax up the whole grid, and you not suffer a full page post-back.

So, drag + drop in the scriptmanager (right after form tag).

Then in your page drop in a update paneal.

You wind up with this:

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
           "your grid view goes here"
        </ContentTemplate>
    </asp:UpdatePanel>

So, above means you don’t have to change or re-wire up your existing code. You now not suffer a full page post-back. However, don’t abuse the use of up-date panel. While they are absolute amazing, they still mean you do have a partial post back. But, really nice is no additional JavaScript or writing additional code (client side or even server side).

but, lets do this client side with javaScript.

So, our check box markup in the grid that was this:

<ItemTemplate>
    <asp:CheckBox ID="chkSel" runat="server" CssClass="bigcheck"
        OnCheckedChanged="chkSel_CheckedChanged"
        AutoPostBack="true" />
</ItemTemplate>

Now becomes this without post-back

        <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False" 
            DataKeyNames="ID" CssClass="table" width="40%">
            <Columns>
                <asp:BoundField DataField="FirstName"   HeaderText="FirstName" />
                <asp:BoundField DataField="LastName"    HeaderText="LastName"  />
                <asp:BoundField DataField="City"        HeaderText="City" />
                <asp:BoundField DataField="HotelName"   HeaderText="HotelName"  />
                <asp:BoundField DataField="Description" HeaderText="Description"  />
                <asp:TemplateField HeaderText="Select " ItemStyle-HorizontalAlign="Center">
                <ItemTemplate>
                    <asp:CheckBox ID="chkSel" runat="server" CssClass="bigcheck"
                        onclick="mycheckrow(this)" />
                </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

<script>
    function mycheckrow(ckbox) {
        ck = $(ckbox)
        mytr = ck.closest("tr")
        if (ck.is(":checked")) {
            mytr.css("background-color", "aliceblue");
        }
        else {
            mytr.css("background-color", "transparent");
        }
    }
</script>

And now we get this:

I wanted a larger check box, so I added this before the grid

<style>
        .bigcheck input {width:20px;height:20px;vertical-align:middle;cursor:pointer}
 </style>

So in summary:

KEEP your existing check box – it has a "id" and is a standard asp.net check box – that way your eixsting code using and checking the check box server side will not break and does not have to be changed.

Never needed to process all rows in code behind. Note the use of "naming container". This works for a button also – so for gridview, repeater, listview etc., you can use this trick and NOT have to use rowcommand and the "messy" event model for a grid view.

So, our final markup looks like this:

    <asp:GridView ID="GVHotels" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ID" CssClass="table" width="40%">
        <Columns>
            <asp:BoundField DataField="FirstName"   HeaderText="FirstName" />
            <asp:BoundField DataField="LastName"    HeaderText="LastName"  />
            <asp:BoundField DataField="City"        HeaderText="City" />
            <asp:BoundField DataField="HotelName"   HeaderText="HotelName"  />
            <asp:BoundField DataField="Description" HeaderText="Description"  />
            <asp:TemplateField HeaderText="Select " ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                <asp:CheckBox ID="chkSel" runat="server" CssClass="bigcheck"
                    onclick="mycheckrow(this)" />
            </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

    <script>
        function mycheckrow(ckbox) {
            ck = $(ckbox)
            mytr = ck.closest("tr")
            if (ck.is(":checked")) {
                mytr.css("background-color", "aliceblue");
            }
            else {
                mytr.css("background-color", "transparent");
            }
        }
    </script>

And we get this: