Select All Checkbox - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: check, checkbox, evend, grid, jqxGrid ;, page, paging, row, select, select all, selectionmode

This topic contains 9 replies, has 6 voices, and was last updated by Hristo 5 years, 11 months ago.

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

Author

Select All Checkbox Posts

November 7, 2014 at 6:39 am Select All Checkbox #62352

Participant

Hello,

We are trying to fire onchange event of checkbox in header of checkbox column whene “selectionmode” is set to “checkbox”.
On change of that check box I want to select only the rows that are visible on current page instead of selecting all the rows across the pages. Is there a way to select the rows on current page.

Regards,
Jash

November 10, 2014 at 7:00 am Select All Checkbox #62439

jkapasi

Participant

Hello,

I want to know that which event will be fired when I select the checkbox in the header of checkbox column. Is there any event which will be fired?

Regards,
Jash

November 10, 2014 at 8:19 am Select All Checkbox #62448

Dimitar

Participant

Hello Jash,

selectionmode: "checkbox" does not support such modification, but here is an example that shows how to implement the functionality you require:

<!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.1.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/

November 14, 2014 at 6:06 am Select All Checkbox #62733

jkapasi

Participant

Thanks for your response.

Regards,
Jash

July 9, 2015 at 8:56 am Select All Checkbox #73562

Brett lee

Participant

Hi,
In the above code you have a datafield:available which is set to false in the response.
How can we get the default state of check box when we dont have any data field for checkbox column.
Since we cant control the response of a service, we need to have a checkbox at the header which will select all the visible rows on its selection.

Please suggest me a way where we can have a checkbox in our grid with default unchecked state without having a datafield.

July 9, 2015 at 12:19 pm Select All Checkbox #73575

Dimitar

Participant

Hi Brett lee,

How about the built-in selectionmode: ‘checkbox’?

Best Regards,
Dimitar

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

January 13, 2016 at 2:54 am Select All Checkbox #80335

pandy

Participant

Hi,

does the latest version support this function now? I meet the same matter.

Best Regards,

jason

January 13, 2016 at 8:34 am Select All Checkbox #80345

Dimitar

Participant

Hi jason,

Please clarify what exactly your issue is. We recommend using selectionmode: 'checkbox', but you may also try the workaround above.

Best Regards,
Dimitar

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

February 8, 2019 at 3:26 pm Select All Checkbox #103903

narayan

Participant

Here I need to use both features selectionmode:’checkbox’ and selectionmode:’multiplecellsadvanced’ How can I do that…?
My problem now is I have used selectionmode checkbox so that I can select specific row and save it I need this. In the same way I also want to use up/down left/right arrow key to select specific cell but this is possible when selectionmode is “multiplecellsadvanced”. Is there any solutions??

February 14, 2019 at 2:20 pm Select All Checkbox #103970

Hristo

Participant

Hello narayan,

There is no such feature.
You could use a combination of the suggested approach (with custom “checkbox selection”).
Please, take a look at this and this demo, where you could find different selection modes.
With “multiplecells” option of the selectionmode property you could use it and when clicking on the checkbox as in the suggestion in the forum you should iterate over the columns on that row to select all cells.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

Author

Posts

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

You must be logged in to reply to this topic.