c# - javascript - checkbox checkall() function

Question

I've been trying to implement a checkAll() function in order to select/deselect all the checkboxes inside a grid. The grid I have is this one:

<table style="width: 100%;">
            <tr>
                <td>
                    <input type="checkbox" id="chkImprimir" runat="server" enableviewstate="true" onclick="CheckAll()" />
                    <asp:Label ID="SeleccionarLabel" runat="server" meta:resourceKey="SeleccionarLabel"></asp:Label>
                </td>
                </tr>
                <tr>
                <td align="right">
                    <asp:ImageButton ID="ImageButtonDownloadXLS" ToolTip="ImageButtonDownloadXLS" ImageUrl="SiteImages/toolbar/xls.gif" 
                        onmouseover="this.src='SiteImages/toolbar/xls_hover.gif';" onmouseout="this.src='SiteImages/toolbar/xls.gif';" runat="server" meta:resourcekey="ImageButtonDownloadXLS"
                        Style="float: right;" OnClick="ImageButtonDownloadXLS_Click" />
                    <asp:Button ID="btnAddOfertasDetalle" runat="server" CausesValidation="False" meta:resourceKey="btnAddOfertasDetalle"
                        OnClientClick="javascript:AddOfertasDetalle()" Text="Afegir OfertaDetalle" />
                </td>
            </tr>
            <tr>
                <td id="Td2" runat="server" class="generalContent">
                    <ComponentArt:Grid ID="GridOfertasDetalle" runat="server" AllowEditing="true" CssClass="Grid"
                        EditOnClickSelectedItem="false" EnableViewState="true" FooterCssClass="GridFooter"
                        Height="350" ImagesBaseUrl="images/" KeyboardEnabled="false" LoadingPanelClientTemplateId="LoadingFeedbackTemplate"
                        LoadingPanelPosition="MiddleCenter" PagerStyle="Numbered" PagerTextCssClass="PagerText"
                        PageSize="15" RunningMode="Client" ShowHeader="False" Width="730"  AllowHorizontalScrolling="True">
                        <Levels>
                            <ComponentArt:GridLevel DataCellCssClass="DataCell" DataKeyField="Id" EditCellCssClass="EditDataCell"       
                                HeadingCellCssClass="HeadingCell" HeadingRowCssClass="HeadingRow" HeadingSelectorCellCssClass="SelectorCell"
                                HeadingTextCssClass="HeadingCellText" SelectedRowCssClass="SelectedRow"
                                RowCssClass="Row" ShowTableHeading="false" SortAscendingImageUrl="asc.gif"
                                SortDescendingImageUrl="desc.gif" SortImageHeight="10" SortImageWidth="10">
                                <Columns>
                                    <ComponentArt:GridColumn AllowEditing="True" Width="15" ColumnType="CheckBox" Align="Center" />

                                    <ComponentArt:GridColumn DataField="Id"/>


                                </Columns>
                            </ComponentArt:GridLevel>
                        </Levels>

        </table>

Then I've tried several things in order to implement the checkAll() function:

function CheckAll() {
        var grid = GetGrid();
        var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;

        grid.beginUpdate();

        var gridItem;
        var itemIndex = 0;
        while (gridItem = GetGrid().get_table().GetRow(itemIndex)) {
            gridItem.setValue(0, check, false);
            itemIndex++;
        }

        grid.endUpdate();
        grid.Render(); 
    } 

    function GetGrid() 
    {
        return <%= GridOfertasDetalle.ClientObjectId %>;
    }

I've also tried:

function CheckAll() {
        var grid = GetGrid();
        var check = document.getElementById('<%=chkImprimir.ClientID%>').checked;

        grid.beginUpdate();

        var gridItem;
        var itemIndex = 0;
        while (gridItem = GetGrid().Table.GetRow(itemIndex)) { //<-- change to Table
            gridItem.setValue(0, check); //<-- tried with and without the (x, x, FALSE)
            itemIndex++;
        }

        grid.endUpdate();
        grid.Render(); // <-- tried with and without Render
    } 

    function GetGrid() 
    {
        return <%= GridOfertasDetalle.ClientObjectId %>;
    }

`gridItem = GetGrid2().Table.GetRow(...` mixing javascript with c#, eh? — Abhitalks, May 29 '14 at 08:59
Indeed; but this code works fine in 20 others .aspx pages I have; there is something else I'm missing there. — Miquel Coll, May 29 '14 at 09:00
This might help... http://www.componentart.com/community/forums/p/32823/32823.aspx — Bhavik, Jun 13 '14 at 08:38
add debugger in CheckAllUsuarios() function and check where it goes wrong. you can check line by line execution and value in running page and compare it with not running page. http://www.codeproject.com/Tips/422713/Check-all-checkboxes-in-GridView-using-jQuery — Rachit Patel, Jun 13 '14 at 10:40
Extending on Niklas Wingers comment, have you tried running the console and putting some _console.log('...')_ lines in there? http://stackoverflow.com/questions/4539253/what-is-console-log — Aaron Newton, Jun 15 '14 at 23:12
I've tried putting logs verywhere and seeing what was going wrong. Everything seemd fine. The function variables were correct; the index was correct and the gird was being correctly indexed. The problem has to be in something stupid I miss since I can make it work almost everywhere else (but no everywhere!). I'll try to implement the code from the Bhavik link and tell you something. — Miquel Coll, Jun 16 '14 at 06:01
How does it get rendered to the page? Use the View Source function in the browser and post the following: 1) The JavaScript code as it is ultimately rendered to the browser, 2) the HTML snippets showing the IDs of each control referenced by the JavaScript. — Katie Kilian, Jun 16 '14 at 13:24

Matthew Carroll · Accepted Answer · 2014-06-17T18:29:50.533

Here is a jQuery solution.

A checkbox with ID of CheckAll and all checkboxes to be checked or unchecked inside an element with class wrapper.

$('#CheckAll').click(function () {
    if (this.checked) {
        $('.wrapper input[type=checkbox]').each(function () {
            if (!this.checked) {
                $(this).trigger('click');
            }
        });
    }
    else {
        $('.wrapper input[type=checkbox]').each(function () {
            if (this.checked) {
                $(this).trigger('click');
            }
        });
    }
});

Using the jQuery function trigger instead of setting the attribute to checked will allow for normal function of any JavaScript events tied to said checkboxes.

score 0 · Answer 2 · answered Jun 17 '14 at 14:28

Try using JQuery, for example, if your GridOfertasDetalle.ClientObjectId is offersTable

function checkUncheckAll() {
    var offersTable = $('#offersTable');
    var allCheckBox = $('input[type=checkbox]', offersTable);
    var allCheckBoxChecked = $('input[type=checkbox]:checked', offersTable);

    if (allCheckBox.length == allCheckBoxChecked.length) //if all are checked 
    {
       allCheckBox.removeAttr('checked'); //uncheck all
    }
    else allCheckBox.attr('checked', 'checked'); //check all
}

c# - javascript - checkbox checkall() function

2 Answers2