gridview multiple check box column

Work on asp.net vs05. I have three type of value Like:IsDesign,IsPrinting,IsInstall they are bit type. To represent this bits values on my gridview I use three checkbox columns, GridView control with three header checkbox and checkbox for each individual record. When you click the header check all checkboxes when the header checkbox is checked it highlights all the rows and checks the checkboxes in all rows, and when unchecked it restores back the 开发者_StackOverflow社区original color of the row and unchecks the checkboxes.

To complete this task, want to use the client side script.

<asp:GridView ID="gvSearch" runat="server" AutoGenerateColumns="False" DataKeyNames="JobID" Width="880px" CellPadding="5" ForeColor="#333333" GridLines="None" AllowPaging="True" HorizontalAlign="Center" CellSpacing="1" PageSize="5" ShowFooter="True"  Height="278px" OnPageIndexChanging="gvSearch_PageIndexChanging" OnRowDataBound="gvSearch_RowDataBound">
   <Columns>
      <asp:CheckBoxField HeaderText="IsDesign" />
      <asp:CheckBoxField HeaderText="IsPrinting" />
      <asp:TemplateField HeaderText="IsInstall">
        <EditItemTemplate>
           <asp:CheckBox ID="ckbIsDelivered" runat="server" Checked='<%# Bind("IsDelivered") %>' Text="IsDelivered" />
        </EditItemTemplate>
        <FooterTemplate>
           <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="Save" />
        </FooterTemplate>
        <ItemTemplate>
           <asp:CheckBox ID="ckbIsDelivered" runat="server" onclick = "Check_Click(this)" Checked='<%# Bind("IsDelivered") %>' />
        </ItemTemplate>
        <HeaderTemplate>
            &nbsp;<br />
            <table border="0" cellpadding="0" cellspacing="0">
               <tr>
                  <td style="width: 21px">
                     <input id="chkAll" name="chkAll" onclick = "checkAll(this);" type="checkbox" />
                  </td>
                  <td style="width: 70px">
                     <asp:Label ID="Label14" runat="server" Text="IsDelivered" />
                  </td>
               </tr>
            </table>
        </HeaderTemplate>
      </asp:TemplateField>
      <asp:TemplateField HeaderText="JobID " SortExpression="JobID">
         <EditItemTemplate>
             <asp:Label ID="Label1" runat="server" Text='<%# Eval("JobID") %>' />
         </EditItemTemplate>
         <ItemTemplate>
             <asp:Label ID="lblJobID" runat="server" Text='<%# Bind("JobID") %>' />
         </ItemTemplate>
      </asp:TemplateField>
      <asp:BoundField DataField="JobNo" HeaderText="JobNo " SortExpression="JobNo" />
      <asp:BoundField DataField="ClientName" HeaderText="ClientName " SortExpression="ClientName" />
      <asp:BoundField DataField="MediaName" HeaderText="MediaName " SortExpression="MediaName" />
      <asp:BoundField DataField="BrandName" HeaderText="BrandName " SortExpression="BrandName" />
      <asp:BoundField DataField="JobTypeDesc" HeaderText="JobTypeDesc " SortExpression="JobTypeDesc" />
      <asp:BoundField DataField="JobDesc" HeaderText="JobDesc " SortExpression="JobDesc" />
      <asp:BoundField DataField="OutletNameEnglish" HeaderText="OutletNameEnglish " SortExpression="OutletNameEnglish" />
      <asp:BoundField DataField="OutletAddressEnglish" HeaderText="OutletAddressEnglish " SortExpression="OutletAddressEnglish" />
      <asp:BoundField DataField="Length" HeaderText="Length " SortExpression="Length" />
      <asp:BoundField DataField="Height" HeaderText="Height " SortExpression="Height" />
      <asp:BoundField DataField="Sft" HeaderText="Sft " SortExpression="Sft" />
      <asp:BoundField DataField="DeliveryTargetDate" HeaderText="DeliveryTargetDate " SortExpression="DeliveryTargetDate" DataFormatString="{0:dd MMM yyyy}" />
      <asp:BoundField DataField="JobPriorityID" HeaderText="JobPriorityID " SortExpression="JobPriorityID" />
      <asp:BoundField DataField="Remarks" HeaderText="Remarks " SortExpression="Remarks" />
      <asp:CheckBoxField DataField="Status" HeaderText="Status " SortExpression="Status" />
      <asp:CheckBoxField DataField="IsActive" HeaderText="IsActive " SortExpression="IsActive" />
   </Columns>
   <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
   <RowStyle BackColor="#F7F6F3" ForeColor="#333333" Height="50px" />
   <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" Height="20px" />
   <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
   <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
   <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" HorizontalAlign="Center"  BorderWidth="1px" Height="20px" />
   <EditRowStyle BackColor="#999999" Height="40px" Width="100px" />

This will become much easier if you use CSS rules for your styling instead of inline styles like you currently have. To do this, change your row style tags to only specify CSS classes, not specific styles, like this:

<asp:GridView ID="gvSearch" runat="server" CssClass="gridView">
    <%-- ... Your other markup here ... --%>
    <AlternatingRowStyle CssClass="altRow" />
    <RowStyle CssClass="row" />
    <FooterStyle CssClass="footer" />
    <PagerStyle CssClass="pager" />
    <SelectedRowStyle CssClass="selectedRow" />
    <HeaderStyle CssClass="headerRow" />
    <EditRowStyle CssClass="editingRow" />
</asp:GridView>

Then you can apply the same styles you originally had inline in your markup using a style sheet like this (all of the CSS rules are exactly the same as your original inline styles):

.gridView { width: 880px; padding: 5px; color: #333; text-align: center; 
            height: 278px; border-collapse:separate;border-spacing: 1px;}
.altRow { background: #fff; color: #284775 }
.row { background: #f7f6f3; color: #333; height: 50px }
.footer { background: #5d7b9d; font-weight: bold; color: #fff; height: 20px }
.pager { background: #284775; color: #fff; text-align: center; }
.selectedRow { background: #e2ded6; font-weight: bold; color: #333 }
.headerRow { background: #5d7b9d; font-weight: bold; color: #333; 
             text-align: center; border: 1px solid #000; height: 20px }
.editingRow { background: #999; height: 40px; width: 100px }

Once you've got your CSS established, the next thing to do is handle clicking the header check boxes. To do this, you must use a JavaScript framework like jQuery, Dojo, YUI, MooTools or Prototype. Doing it without one would take me all day to write out and explain properly, and even then it may not even work across all browsers. I'll show you how to do what I think you're looking for using jQuery, since that is what I'm most comfortable with, however any JavaScript framework can accomplish the same thing.

In your header template, you won't need anything except an ID on your <input /> tag, which you already have. You should remove the onclick attribute you already have, since you won't need it. Make sure you're using the CSS rules I defined above, as the code I'm going to write relies on it being there.

First, subscribe to the click event of the header checkbox. When the checkbox is clicked, this code finds the column the checkbox exists in and then goes through every row in the table and clicks the checkbox it finds in that column.

$(document).ready(function() {
    $("#chkAll").click(function(){

        // First find the column index of the clicked checkbox
        // If you know your column order won't change, this
        // can be done with less code by just hard-coding
        // the "colIndex" variable to the zero-based column number
        var $this = $(this);
        var clickedColumn = $this.closest(".headerRow > th");
        var headerRow = $this.closest(".headerRow");
        var colIndex = headerRow.children().index(clickedColumn);

        // Next, traverse through the table, checking or
        // unchecking each checkbox in the specified column index
        var table = $this.closest("table.gridView");

        if (this.checked) {
            table.find("tr.altRow, tr.row").each(function() {
                var $this = $(this);
                // Finding the checkbox in the correct column
                // involves finding the correct column and then
                // getting the checkbox inside it. This is easy 
                // with jQuery
                var checkbox = $this.children()
                                    .eq(colIndex)
                                    .children("input:checkbox");
                checkbox.attr("checked", true);
                $this.addClass("selectedRow");
            });
        } else {
            table.find("tr.altRow, tr.row").each(function() {
                var $this = $(this);
                // Finding the checkbox in the correct column
                // involves finding the correct column and then
                // getting the checkbox inside it. This is easy 
                // with jQuery
                var checkbox = $this.children()
                                    .eq(colIndex)
                                    .children("input:checkbox");
                checkbox.attr("checked", false);
                $this.removeClass("selectedRow");
            });
        }

    });

});

A working demo of this can be found at: http://jsbin.com/alafo