Check All checkbox in column header of check box column - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: check, check all, checkbox, column, columntype, grid, jqxgrid, rendered, renderer, uncheck, uncheck all, virtual mode, virtualmode

This topic contains 10 replies, has 3 voices, and was last updated by Dimitar 9 years, 10 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)

Author

Check All checkbox in column header of check box column Posts

August 8, 2014 at 3:00 pm Check All checkbox in column header of check box column #58176

Vaibhav

Participant

Hi,

I need to know if there is a functionality in jqxGrid if a “Check All” check box can be provided in the column header of the check box column so that if the user checks the box present in the column header, all the check boxes present in the data part of that particular check box column get selected and deselected (get toggled together consecutively on each successive click on “Check All” check box present in column header)?

August 11, 2014 at 6:21 am Check All checkbox in column header of check box column #58205

Dimitar

Participant

Hello Vaibhav,

There is no such built-in functionality. This is achieved in the following example, however:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>  
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>      
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var theme = getDemoTheme();

             // prepare the data
             var data = preparegriddata(200);

             var source =
            {
                localdata: data,
                datatype: "array",
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'available', type: 'bool' },
                    { name: 'quantity', type: 'number' }
                ],
                updaterow: function (rowid, rowdata, commit) {
                    // synchronize with the server - send update command   
                    commit(true);
                }
            };

             var dataAdapter = new $.jqx.dataAdapter(source);
             var columnCheckBox = null;
             var updatingCheckState = false;

             // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: true,
                autoheight: true,
                columns: [
                  {
                      text: '', menu: false, sortable: false,
                      datafield: 'available', columntype: 'checkbox', width: 40,
                      renderer: function () {
                          return '<div style="margin-left: 10px; margin-top: 5px;"></div>';
                      },
                      rendered: function (element) {
                          $(element).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
                          columnCheckBox = $(element);
                          $(element).on('change', function (event) {
                              var checked = event.args.checked;
                              var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = pageinfo.pagenum;
                              var pagesize = pageinfo.pagesize;
                              if (checked == null || updatingCheckState) return;
                              $("#jqxgrid").jqxGrid('beginupdate');

                              // select all rows when the column's checkbox is checked.
                              if (checked) {
                                  $("#jqxgrid").jqxGrid('selectallrows');
                              }
                              // unselect all rows when the column's checkbox is checked.
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }

                              // update cells values.
                              var startrow = pagenum * pagesize;
                              for (var i = startrow; i < startrow + pagesize; i++) {
                                  // The bound index represents the row's unique index. 
                                  // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
                                  // The code below gets the bound index of the displayed row and updates the value of the row's available column.
                                  var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                                  $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
                              }

                              $("#jqxgrid").jqxGrid('endupdate');
                          });
                          return true;
                      }
                  },
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 90 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 90 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 200 },
                  { text: 'Quantity', editable: false, datafield: 'quantity' }
               ]
            });

            var updatePageState = function (pagenum) {
                var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                var pagenum = datainfo.paginginformation.pagenum;
                var pagesize = datainfo.paginginformation.pagesize;
                var startrow = pagenum * pagesize;
                // select the rows on the page.
                $("#jqxgrid").jqxGrid('beginupdate');
                var checkedItemsCount = 0;
                for (var i = startrow; i < startrow + pagesize; i++) {
                    var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                    var value = $("#jqxgrid").jqxGrid('getcellvalue', boundindex, 'available');
                    if (value) checkedItemsCount++;
                    if (value) {
                        $("#jqxgrid").jqxGrid('selectrow', boundindex);
                    }
                    else {
                        $("#jqxgrid").jqxGrid('unselectrow', boundindex);
                    }
                }

                $("#jqxgrid").jqxGrid('endupdate');
                if (checkedItemsCount == pagesize) {
                    columnCheckBox.jqxCheckBox({ checked: true });
                }
                else if (checkedItemsCount == 0) {
                    columnCheckBox.jqxCheckBox({ checked: false });
                }
                else {
                    columnCheckBox.jqxCheckBox({ checked: null });
                }
            }

            // update the selection after sort.
            $("#jqxgrid").on('sort', function (event) {
                updatePageState();
            });

             // update the selection after page change.
            $("#jqxgrid").on('pagechanged', function (event) {
                 updatePageState();
             });

             // select or unselect rows when a checkbox is checked or unchecked. 
             $("#jqxgrid").on('cellvaluechanged', function (event) {
                 if (event.args.value) {
                     $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                 }
                 else {
                     $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                 }

                 // update the state of the column's checkbox. When all checkboxes on the displayed page are checked, we need to check column's checkbox. We uncheck it,
                 // when there are no checked checkboxes on the page and set it to intederminate state when there is at least one checkbox checked on the page.  
                 if (columnCheckBox) {
                     var datainfo = $("#jqxgrid").jqxGrid('getdatainformation');
                     var pagesize = datainfo.paginginformation.pagesize;
                     var pagenum = datainfo.paginginformation.pagenum;
                     var selectedRows = $("#jqxgrid").jqxGrid('getselectedrowindexes');
                     var state = false;
                     var count = 0;
                     $.each(selectedRows, function () {
                         if (pagenum * pagesize <= this && this < pagenum * pagesize + pagesize) {
                             count++;
                         }
                     });

                     if (count != 0) state = null;
                     if (count == pagesize) state = true;
                     if (count == 0) state = false;
                     
                     updatingCheckState = true;
                     $(columnCheckBox).jqxCheckBox({ checked: state });

                     updatingCheckState = false;
                 }
             });
         });

        function preparegriddata(rowscount) {
            // prepare the data
            var data = new Array();
            var firstNames =
            [
                "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
            ];

             var lastNames =
            [
                "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
            ];

            var productNames =
            [
                "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Caramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
            ];
          
            for (var i = 0; i < rowscount; i++) {
                var row = {};
                var productindex = Math.floor(Math.random() * productNames.length);
                var quantity = 1 + Math.round(Math.random() * 10);

                row["available"] = false;
                row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["quantity"] = quantity;
                data[i] = row;
            }

            return data;
        }
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
     </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 12, 2014 at 2:32 pm Check All checkbox in column header of check box column #58280

Vaibhav

Participant

Thanks a lot Dimitar.. you solved my problem..
One more thing I would like to ask.. only the display of check box in column header won’t suffice the purpose without having any text.
Could you please let me know how I can prepend a text to the check box being rendered in the column header?

Also please let me know based on condition I need to keep few check boxes in the grid at disabled mode, i.e. the user should not be able to toggle the check box if he clicks on those and even these check boxes shouldn’t get toggled when “Check All” checkbox is toggled?

August 13, 2014 at 5:40 am Check All checkbox in column header of check box column #58302

Dimitar

Participant

Hi Vaibhav,

1) Here is a modification of the checkbox column definition, this time with checkbox and text in the header:

{
    text: '', menu: false, sortable: false,
    datafield: 'available', columntype: 'checkbox', width: 80,
    renderer: function () {
        return '<div><div style="margin-left: 10px; margin-top: 5px;"></div><div>Select</div></div>';
    },
    rendered: function (element) {
        var checkbox = $(element).last();
        $(checkbox).jqxCheckBox({ theme: theme, width: 16, height: 16, animationShowDelay: 0, animationHideDelay: 0 });
        columnCheckBox = $(checkbox);
        $(checkbox).on('change', function (event) {
            var checked = event.args.checked;
            var pageinfo = $("#jqxgrid").jqxGrid('getpaginginformation');
            var pagenum = pageinfo.pagenum;
            var pagesize = pageinfo.pagesize;
            if (checked == null || updatingCheckState) return;
            $("#jqxgrid").jqxGrid('beginupdate');

            // select all rows when the column's checkbox is checked.
            if (checked) {
                $("#jqxgrid").jqxGrid('selectallrows');
            }
            // unselect all rows when the column's checkbox is checked.
            else if (checked == false) {
                $("#jqxgrid").jqxGrid('clearselection');
            }

            // update cells values.
            var startrow = pagenum * pagesize;
            for (var i = startrow; i < startrow + pagesize; i++) {
                // The bound index represents the row's unique index. 
                // Ex: If you have rows A, B and C with bound indexes 0, 1 and 2, afer sorting, the Grid will display C, B, A i.e the C's bound index will be 2, but its visible index will be 0.
                // The code below gets the bound index of the displayed row and updates the value of the row's available column.
                var boundindex = $("#jqxgrid").jqxGrid('getrowboundindex', i);
                $("#jqxgrid").jqxGrid('setcellvalue', boundindex, 'available', event.args.checked);
            }

            $("#jqxgrid").jqxGrid('endupdate');
        });
        return true;
    }
},

2) Please refer to the forum topic Grid Checkbox column for more information on the matter.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 13, 2014 at 8:54 am Check All checkbox in column header of check box column #58308

Vaibhav

Participant

Hi Dimitar,

Well the first solution you gave regarding pre-pending of the text just before the “Check All” check box is not working as expected when I implemented your given code. It is still showing up just the check box in the column header. Could you please provide me a working example in JSFiddle and providing the link to that working example. I couldn’t share you the implemented code in JSFiddle since I am not very much familiar in posting code on JSFiddle.

August 14, 2014 at 5:23 am Check All checkbox in column header of check box column #58347

Dimitar

Participant

Hi Vaibhav,

Here is the fiddle you requested: http://jsfiddle.net/Dimitar_jQWidgets/axujkwrv/.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 14, 2014 at 7:16 am Check All checkbox in column header of check box column #58351

Vaibhav

Participant

Thanks a lot Dimitar.. you made my day..
You are absolutely genius..

August 18, 2014 at 9:40 am Check All checkbox in column header of check box column #58473

Vaibhav

Participant

Hi Dimitar,

Based on the above functionality, I need to disable few of the check boxes so that they cannot be toggled. I got it implemented successfully by returning false from cellbeginedit event. Now I want that the “Check All” check box in the column header when toggled should not impact those check boxes in the grid which have been disabled. Could you please let me know the workaround for this by modifying the code in the above JSFiddle code posted by you.

Also I request you to help me with implementing how such disabled check boxes should appear to the user as disable by modifying their CSS properties. Could you please include its implementation as well in the above JSFiddle example?

Regards,
Vaibhav

August 18, 2014 at 10:25 am Check All checkbox in column header of check box column #58474

Dimitar

Participant

Hi Vaibhav,

I have updated the fiddle (http://jsfiddle.net/Dimitar_jQWidgets/axujkwrv/) and now the “select all” checkbox does not select the disabled rows (specified in the array disabled).

However, the appearance of “disabled” checkboxes cannot be modified, unfortunately.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

November 27, 2014 at 11:03 am Check All checkbox in column header of check box column #63451

kuberasamrat

Participant

Hi Dimitar,

Can you provide a sample where virtualmode:true (onDemand Data) This example is not working for me.

November 28, 2014 at 6:37 am Check All checkbox in column header of check box column #63499

Dimitar

Participant

Hi kuberasamrat,

What exactly is your requirement? There are multiple functionalities discussed in this topic. Note, however, that it is not possible to select rows that have not been loaded in the grid and when virtual mode is enabled only the rows on the current page are loaded and can be selected.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.