"Select All" checkbox for checkbox grid column

3 posts, 0 answers
  1. Rich
    Rich avatar
    31 posts
    Member since:
    May 2011

    Posted 18 Jul 2013 Link to this post

    I am currently working on a grid that contains a column of checkboxes. I am adding a feature where by clicking a single checkbox, located at the top of the column (instead of having a title), will allow the user to either select or deselect every checkbox in that column with a single click. The entire grid and its functionality are being laid out in the Javascript file referenced in the markup at the time that the page renders.

    This is how my grid is currently laid out:

    $("#grid").kendoGrid({
        dataSource: {
            data: testData,
            pageSize: 10
        },
        groupable: false,
        sortable: false,
        pageable: {
            refresh: true,
            pageSizes: true
        },
        columns:
        [
           {
               width: 35,
               title:  "<input id='checkAll', type='checkbox', class='check-box' />",
               template: "<input type=\"checkbox\" />"
     
           },
           {
               field: "FileName",
               title: "File Name",
               template: "<input id='f', type='file' />"
           },
           {
               field: "Description",
               title: "Description"
           },
           {
               field: "InLibrary",
               title: "In Library",
               template: "<input type=\"checkbox\" />"
           },
           {
               field: "Location",
               title: "Location",
               editor: locationDropDownEditor,
               template: "<input type=\"DropDownList\" />"
                
           },
        ]
    });

    Now, I know that something like this would work for me. However, I am confused by the implementation, and how the class "check-box" is used.

    $(document).ready(function () {
        $('#checkAll').click(function () {
            if ($(this).attr('checked')) {
                $('.check-box').attr('checked', 'checked');
            } else {
                $('.check-box').removeAttr('checked');
            }
        });
      
        $('#Grid input[type=checkbox][id!=checkAll]').click(function () {
            var numChkBoxes = $('#Grid input[type=checkbox][id!=checkAll]').length;
            var numChkBoxesChecked = $('#Grid input[type=checkbox][checked][id!=checkAll]').length;
            if (numChkBoxes == numChkBoxesChecked && numChkBoxes > 0) {
                $('#checkAll').attr('checked', 'checked');
            }
            else {
                $('#checkAll').attr('checked', '');
            }
        });
    });

    What is missing to connect these two pieces of functionality? Is this a viable solution? How do I implement the "check-box" class?

  2. Petur Subev
    Admin
    Petur Subev avatar
    1695 posts
    Member since:
    Sep 2012

    Posted 22 Jul 2013 Link to this post

    Hello Rich,

    For best performance I would suggest you to go with our implementation that we shared on the 'code libraries' part of the forums.

    http://www.kendoui.com/code-library/mvc/grid/checkbox-column-and-incell-editing.aspx


    Kind Regards,
    Petur Subev
    Telerik

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!

  3. Achilles
    Achilles avatar
    55 posts
    Member since:
    Jan 2013

    Posted 23 Jul 2013 Link to this post

    Hi Rich,

    I have managed to do it this way

    $(document).on("click", "#checkAll", function () {
        $("#InverterGrid tbody input:checkbox").attr("checked", this.checked);
    });


    In my case I have only one column of checkboxes. In case you have more,you might need to filter them further

    Regards

    Achilles

Back to Top