ansaurus

Question

Answer 1

A:

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

Dan Herbert 2009-11-01 16:29:30

ansaurus

tags:

views:

answers:

gridview multiple check box column

related questions