"Select All" checkbox for checkbox grid column

2 Answers 2628 Views
Grid
Rich
Top achievements
Rank 1
Rich asked on 18 Jul 2013, 05:07 PM
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
Top achievements
Rank 1
commented on 18 Nov 2015, 05:00 PM

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
Telerik team
commented on 19 Nov 2015, 06:51 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 

2 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 22 Jul 2013, 08:05 AM
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!
0
Achilles
Top achievements
Rank 1
answered on 23 Jul 2013, 08:15 AM
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
Tags
Grid
Asked by
Rich
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Achilles
Top achievements
Rank 1
Share this question
or