jQWidgets Forums

Tagged: checkbox, column, grid, grouping, jqxgrid, paging

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

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

Author

Grid grouping and checkbox not check Posts

February 20, 2013 at 8:07 am Grid grouping and checkbox not check #15512

Member

Hi, I’m working with the grid and I have a columntype checkbox, this column don’t take a value of database, this is created directly in columns property columntype. When show the data I can check and uncheck this column, but when I group on any column, control that is checked, this take a new value: unchecked and I can’t check anything; if I ungroup now yes I can check and uncheck. And other thing, the grid have the property paging is true, if I check the firs row when change page aparently the second segment in the first row is check but isn’t… Sorry but my bad english!!! thanks for your help and this is my code:

February 20, 2013 at 10:42 am Grid grouping and checkbox not check #15526

Dimitar

Participant

Hello benitocas88,

Here is an example of a groupable and pageable grid with a chekbox column. We were not able to reproduce any of the reported issues.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.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.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            // 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',
                groupable: true,
                pageable: true,
                autoheight: true,
                columns: [
                  { text: '', 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).bind('change', function (event) {
                              var checked = event.args.checked;
                              if (checked == null || updatingCheckState) return;
                              var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                              $("#jqxgrid").jqxGrid('beginupdate');
                              if (checked) {
                                  $("#jqxgrid").jqxGrid('selectallrows');
                              }
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }
                              for (var i = 0; i < rowscount; i++) {
                                  $("#jqxgrid").jqxGrid('setcellvalue', i, 'available', event.args.checked);
                              }
                              $("#jqxgrid").jqxGrid('endupdate');
                          });
                      }
                  },
                  { 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' }
               ]
            });
            // select or unselect rows when the checkbox is checked or unchecked.
            $("#jqxgrid").bind('cellendedit', function (event) {
                if (event.args.value) {
                    $("#jqxgrid").jqxGrid('selectrow', event.args.rowindex);
                }
                else {
                    $("#jqxgrid").jqxGrid('unselectrow', event.args.rowindex);
                }
                if (columnCheckBox) {
                    var selectedRowsCount = $("#jqxgrid").jqxGrid('getselectedrowindexes').length;
                    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                    updatingCheckState = true;
                    if (selectedRowsCount == rowscount) {
                        $(columnCheckBox).jqxCheckBox('check')
                    }
                    else if (selectedRowsCount > 0) {
                        $(columnCheckBox).jqxCheckBox('indeterminate');
                    }
                    else {
                        $(columnCheckBox).jqxCheckBox('uncheck');
                    }
                    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>

Please make sure you use the latest version of jQWidgets (as of now, it is 2.7).

Best Regards,
Dimitar

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

February 20, 2013 at 5:40 pm Grid grouping and checkbox not check #15567

benitocas88

Member

Thanks dimitar, I see my error, maybe. When I draw the grid, use this code:
Specific function=> rendered:function(){for(……)}


pageable: true,
groupable: true,
rendered: function(){
var length = dataAdapter.records.length;
for(var x=0; x<length; x++)
{ //the check is indeterminated and this set false value
$("#grid-grupos").jqxGrid('setcellvalue', x, 'chk', false, false);
}
},
columns:...

Here, do assing the value false because if I not do it, the values charge null or indeterminated. This works perfectly, I mean the event check or unchecked works in one or more rows.

The problem comes when I group the column, apparently becomes static, check or uncheck not works, anything checkbox. But if remove the last code obviously(rendered) the value there check’s are null and if I group, YES check or unchecked works!!!.

The question is:
I need there values check’s are false the first time when load but when I grouping I can modify there’s values one or more rows, not necessary check or unchecked all… Thanks!!!

I try to be the most specific possible…

February 22, 2013 at 8:18 am Grid grouping and checkbox not check #15663

Dimitar

Participant

Hi benitocas88,

The example that we provided you has all the specifications you seek.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.