"Select All" checkbox for checkbox grid column

[Rich]

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?

[Chad]

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).

Thanks.

[Venelin]

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:

http://stackoverflow.com/questions/30538201/kendo-grid-column-header-checkbox-check-all-that-checks-boxes-across-grid-all

http://stackoverflow.com/questions/20781918/kendoui-grid-select-all

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.

Regards,
Venelin
Telerik

 

 

[Petur Subev]

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

[Achilles]

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