"Select All" checkbox for checkbox grid column

5 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:
        dataSource: {
            data: testData,
            pageSize: 10
        groupable: false,
        sortable: false,
        pageable: {
            refresh: true,
            pageSizes: true
               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 {
        $('#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
    Petur Subev avatar
    1882 posts

    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.


    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Achilles
    Achilles avatar
    57 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


  4. Chad
    Chad avatar
    1 posts
    Member since:
    Oct 2015

    Posted 18 Nov Link to this post

    Has anybody done something similar in 2015 with the AngularJS version? I don't do any Microsoft development, so I can't make sense of the files in that ASP.NET MVC zip file from two years.

    It's not obvious to all users that they can Alt/Command-click rows to select multiple rows. I'm trying to put a column of checkboxes into the grid for selecting rows with a select-all toggle in the column header. 

    I'd like to find a way of doing that with reasonable performance and in a reasonably structured and idiomatic way (i.e., without resorting to fragile DOM selectors and imperative JQuery code).


  5. Venelin
    Venelin avatar
    308 posts

    Posted 19 Nov Link to this post

    Hello Chad,

    If you are not able to implement it on server there is nothing else to do except to touch the DOM with (or if you like without) jQuery. Achilles' solution should work. There are plenty of other solutions depending on the specific case:



    If you experience some difficulties in implementing this functionality I would recommend to open a support ticket and send a dojo example that demonstrates your scenario.

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