AVCajipe's Blog

Input checkboxes can be used for all sorts of selection and deselection activities. They can also become extremely useful when used within a grid for multiple item selection. In this example, checked items (or rather rows) are coloured differently when selected. The colouring happens on the client to do away with needless postbacks.

A client-side JavaScript was attached to each checkbox as the GridView was rendered. The rendering happens in the gv_RowDataBound event of the gridview. The client-side function was written this way:

function colorCheckBoxOnCheck(CB, originalColor, proposedColor, rowIndex, GV)

{

    var checkBox = document.getElementById(CB.id);

    if (document.getElementById(GV).rows[rowIndex] != null) {

        var cells = document.getElementById(GV).rows[rowIndex].cells;

        var targetColor = "";

        if (checkBox.checked == true)

            targetColor = proposedColor;

        else

            targetColor = originalColor;

        for (var i = 0; i < cells.length; i++) {

            cells[ i].style.background = targetColor;

        }

    }    

}

The parameters are the checkbox object, the original and proposed colour(the new colour of the row when checked). The 0-based row index was also used to target the specific row the checkbox belonged to and the GridView object itself. Targeting the specific row (composed of columns/cells) on the client would be making this call:

var cells = document.getElementById(GV).rows[rowIndex].cells;

Wherein we made use of the GridView object and row index. The GridView declaration is straightforward:

<asp:GridView

     SkinID="RX_AdminTableNoHeader"

     ID="gv" 

     Width="97%"

     runat="server"

     onrowdatabound="gv_RowDataBound">

     <Columns>

         <asp:TemplateField>

            <ItemTemplate>

               <asp:CheckBox

                   id="cb"

                   runat="server" />

              </ItemTemplate>

            </asp:TemplateField>

        <asp:TemplateField>

             <ItemTemplate>

                 <div style="vertical-align:middle;">

                    <asp:Label ID="lbl_someData"

                               runat="server"

                               Text='<%#bind("SOME_DATA") %>'/>

                  </div>   

             </ItemTemplate>

         </asp:TemplateField>

      </Columns>

</asp:GridView>

Finally tying the client-side code on the GridView server event onRowDataBound:

protected void gv_RowDataBound(object sender, GridViewRowEventArgs e)

    {

        if (e.Row.DataItem != null)

        {

            DataRowView drv = e.Row.DataItem as DataRowView;

            switch (e.Row.RowState)

            {

                case DataControlRowState.Normal:

                case DataControlRowState.Normal | DataControlRowState.Alternate:

                    CheckBox cbTaskGroup = e.Row.FindControl("cb")
                                                 as CheckBox;   

                    string gvClientID = ((GridView)sender).ClientID;

                    string originalColor = "";

                    if (e.Row.RowIndex % 2 == 0)

                        originalColor = "#EFF3FB";

                    else

                        originalColor = "#FFFFFF";

                    string proposedColor = "#D9E9C5";                     

                    string RowIndex = Convert.ToString(e.Row.RowIndex);

                    string cb_jsCall = "return colorCheckBoxOnCheck(this," +

                        " '" + originalColor + "', '" + proposedColor + "', "

                        + RowIndex + ", '" + gvClientID + "');";

                    cb.Attributes["onClick"] = cb_jsCall;

                    break;

            }

        }

    }

The required parameters are conveniently provided as server-side properties. The row index is represented by the reference of “e” as the instance of the event handler. Since the GridView has alternating colours per row, we capture their initial colours alternatively. After composing our JavaScript call we hook it up to the onClick client-Side event of the checkbox.