jQWidgets Forums

Tagged: checkbox, custom, grid, jqxgrid, paging, row, selection, sort

This topic contains 8 replies, has 2 voices, and was last updated by sreeni379 12 years, 7 months ago.

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

Author

Grid Column jqxCheckBox Posts

September 28, 2012 at 12:50 pm Grid Column jqxCheckBox #8629

Member

Hi Peter Stoev,

In Grid Custom Row Selection .If Check box Column select all rows in Grid. In this add paging to Grid. I am in First Page of Grid Click Check Box Column that page records has to select,but it selecting all row in grid.

Here I need to If Selected FirstPage Grid Select that records Only and if Click the next page check box column should be unchecked. Check box Column clicked pages should select and remain pages should unchecked column .

Thanks

Sree

September 29, 2012 at 6:24 am Grid Column jqxCheckBox #8679

Dimitar

Participant

Hello Sree,

The following example has a checkbox which selects only the rows on the current page:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/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",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;
            // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                autoheight: true,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: 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 paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = paginginformation.pagenum;
                              var pagesize = paginginformation.pagesize;
                              var pagescount = paginginformation.pagescount;
                              var k = 1;
                              var pageArray = new Array();
                              for (var i = pagenum * pagesize; i < (pagenum + 1) * pagesize; i++) {
                                  pageArray.push(i);
                              };
                              var checked = event.args.checked;
                              if (checked == null || updatingCheckState) return;
                              var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                              $("#jqxgrid").jqxGrid('beginupdate');
                              if (checked) {
                                  $("#jqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                              }
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }
                              for (var j = (pagenum) * pagesize; j < (pagenum + 1) * pagesize; j++) {
                                  $("#jqxgrid").jqxGrid('setcellvalue', j, 'available', event.args.checked);
                              }
                              $("#jqxgrid").bind("pagechanged", function (event) {
                                  for (var m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++) {
                                      var value = $('#grid').jqxGrid('getcellvalue', m, "available");
                                      if (value != null) {
                                          k = k * 1;
                                      } else {
                                          k = k * 0;
                                          break;
                                      };
                                  };
                                  if (k != 1) {
                                      $(element).jqxCheckBox('uncheck');
                                  };
                              });
                              $("#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 $(columnCheckBox).jqxCheckBox('indeterminate');
                    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/

September 29, 2012 at 12:09 pm Grid Column jqxCheckBox #8693

sreeni379

Member

Hi Dimitar,

Thanks for your help .Here I have problem with sorting.Is there any Sort concept for particular page. added sort concept to grid, if click any column in grid then it was selecting previous rows of before sorting in grid particular page.

Here I need If sort either one from this ASC, DESC.is there any concept for sorting for particular page and if sorted also i need selected that page elements only.

If there is no sorting concept for particular page ,help me if sort also it should be selecting that rows of that page only.

I am very happy see u quick replay .Can u Please help me.

Thanks
Sreeni

October 1, 2012 at 7:41 am Grid Column jqxCheckBox #8722

Dimitar

Participant

Hi Sreeni,

This updated version of the example shows how to select all rows of a page even if it is sorted:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/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(30);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;
            // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                autoheight: true,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: 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 paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = paginginformation.pagenum;
                              var pagesize = paginginformation.pagesize;
                              var pagescount = paginginformation.pagescount;
                              var pageArray = new Array();
                              var k = 1;
                              var IndexesArray = new Array();
                              var rowscount = $("#jqxgrid").jqxGrid('getrows').length;
                              for (var l = 0; l < rowscount; l++) {
                                  var visibleIndex = $("#jqxgrid").jqxGrid('getrowvisibleindex', l);
                                  IndexesArray.push({ bound: l, visible: visibleIndex });
                              };
                              for (var i = 0; i < rowscount; i++) {
                                  if (IndexesArray[i].visible >= pagenum * pagesize && IndexesArray[i].visible < (pagenum + 1) * pagesize) {
                                      pageArray.push(IndexesArray[i].bound);
                                      $("#jqxgrid").jqxGrid('setcellvalue', IndexesArray[i].bound, 'available', event.args.checked);
                                  };
                              };
                              var checked = event.args.checked;
                              if (checked == null || updatingCheckState) return;
                              var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                              $("#jqxgrid").jqxGrid('beginupdate');
                              if (checked) {
                                  $("#jqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                              }
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }
                              $("#jqxgrid").bind("pagechanged", function (event) {
                                  for (var m = pagenum * pagesize; m < (pagenum + 1) * pagesize; m++) {
                                      var value = $('#grid').jqxGrid('getcellvalue', m, "available");
                                      if (value != null) {
                                          k = k * 1;
                                      } else {
                                          k = k * 0;
                                          break;
                                      };
                                  };
                                  if (k != 1) {
                                      $(element).jqxCheckBox('uncheck');
                                  };
                              });
                              $("#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 $(columnCheckBox).jqxCheckBox('indeterminate');
                    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/

October 1, 2012 at 8:01 am Grid Column jqxCheckBox #8726

sreeni379

Member

Hi Dimitar,

Thank for your help.You posted code if change page, grid check box column clearing and previous selected column also clearing.

Here my requirement is selected check box column as keep same if move different page.selected check box column as keep selected if move different page .

How i can read rows from selected rows from different pages . if click save button what every selected pages as to clear or unchecked.This is my requirement please me.

Thanks
Sreeni

October 2, 2012 at 8:01 am Grid Column jqxCheckBox #8782

Dimitar

Participant

Hi Sreeni,

Here is how to save your selections:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/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(30);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;
            // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                autoheight: true,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: 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 paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = paginginformation.pagenum;
                              var pagesize = paginginformation.pagesize;
                              var pagescount = paginginformation.pagescount;
                              var pageArray = new Array();
                              var k = 1;
                              var IndexesArray = new Array();
                              var rowscount = $("#jqxgrid").jqxGrid('getrows').length;
                              for (var l = 0; l < rowscount; l++) {
                                  var visibleIndex = $("#jqxgrid").jqxGrid('getrowvisibleindex', l);
                                  IndexesArray.push({ bound: l, visible: visibleIndex });
                              };
                              for (var i = 0; i < rowscount; i++) {
                                  if (IndexesArray[i].visible >= pagenum * pagesize && IndexesArray[i].visible < (pagenum + 1) * pagesize) {
                                      pageArray.push(IndexesArray[i].bound);
                                      $("#jqxgrid").jqxGrid('setcellvalue', IndexesArray[i].bound, 'available', event.args.checked);
                                  };
                              };
                              var checked = event.args.checked;
                              if (checked == null || updatingCheckState) return;
                              var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                              $("#jqxgrid").jqxGrid('beginupdate');
                              if (checked) {
                                  $("#jqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                              }
                              else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              }
                              $("#jqxgrid").bind("pagechanged", function (event) {
                                  for (var r = 0; r < rowscount; r++) {
                                      if (IndexesArray[r].visible >= pagenum * pagesize && IndexesArray[r].visible < (pagenum + 1) * pagesize) {
                                          var value = $("#jqxgrid").jqxGrid('getcellvalue', IndexesArray[r].bound, 'available');
                                          if (value != null) {
                                              $("#jqxgrid").jqxGrid({ selectedrowindex: IndexesArray[r].bound });
                                          } else {
                                              $('#jqxgrid').jqxGrid('unselectrow', IndexesArray[r].bound);
                                          };
                                      };
                                  };
                              });
                              $("#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);
                }
            });
        });
        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/

October 3, 2012 at 6:31 am Grid Column jqxCheckBox #8814

sreeni379

Member

Hi Dimitar,

Last you post code is working fine ,but here if check box checked one page and if move different page there also showing checkbox column checked.

Here I need Selected pages should check box should check reaming unchecked.Please help me.

Thank
sree

October 4, 2012 at 8:22 am Grid Column jqxCheckBox #8904

Dimitar

Participant

Hi sree,

Here is the updated example. If the page you move to has no checked rows, the top checkbox is unchecked.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Custom Rows Selection</title>
    <link rel="stylesheet" href="../../jqwidgets2.4.2/jqwidgets/styles/jqx.base.css"
        type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets2.4.2/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(30);
            var source =
            {
                localdata: data,
                datatype: "array",
                updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command
                }
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;
            // initialize jqxGrid. Disable the built-in selection.
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                autoheight: true,
                editable: true,
                theme: theme,
                enablehover: false,
                selectionmode: 'none',
                pageable: true,
                sortable: 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, hasThreeStates: false });
                          columnCheckBox = $(element);
                          var rowscount = $("#jqxgrid").jqxGrid('getrows').length;
                          $(element).bind('change', function (event) {
                              var IndexesArray = new Array();
                              for (var i = 0; i < rowscount; i++) {
                                  var visibleIndex = $("#jqxgrid").jqxGrid('getrowvisibleindex', i);
                                  IndexesArray.push({ bound: i, visible: visibleIndex });
                              };
                              var paginginformation = $("#jqxgrid").jqxGrid('getpaginginformation');
                              var pagenum = paginginformation.pagenum;
                              var pagesize = paginginformation.pagesize;
                              var pageArray = new Array();
                              for (var j = 0; j < rowscount; j++) {
                                  if (IndexesArray[j].visible >= pagenum * pagesize && IndexesArray[j].visible < (pagenum + 1) * pagesize) {
                                      pageArray.push(IndexesArray[j].bound);
                                      $("#jqxgrid").jqxGrid('setcellvalue', IndexesArray[j].bound, 'available', event.args.checked);
                                  };
                              };
                              var checked = event.args.checked;
                              if (checked == null || updatingCheckState) return;
                              $("#jqxgrid").jqxGrid('beginupdate');
                              if (checked == true) {
                                  $("#jqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                              } else if (checked == false) {
                                  $("#jqxgrid").jqxGrid('clearselection');
                              };
                              $("#jqxgrid").jqxGrid('endupdate');
                          });
                          $("#jqxgrid").bind("pagechanged", function (event) {
                              var IndexesArray = new Array();
                              for (var i = 0; i < rowscount; i++) {
                                  var visibleIndex = $("#jqxgrid").jqxGrid('getrowvisibleindex', i);
                                  IndexesArray.push({ bound: i, visible: visibleIndex });
                              };
                              var args = event.args;
                              var pagenum = args.pagenum;
                              var pagesize = args.pagesize;
                              var selectedNumber = 0;
                              for (var k = 0; k < rowscount; k++) {
                                  if (IndexesArray[k].visible >= pagenum * pagesize && IndexesArray[k].visible < (pagenum + 1) * pagesize) {
                                      var value = $("#jqxgrid").jqxGrid('getcellvalue', IndexesArray[k].bound, 'available');
                                      if (value == true) {
                                          $("#jqxgrid").jqxGrid('selectrow', IndexesArray[k].bound);
                                          selectedNumber += 1;
                                      } else {
                                          $('#jqxgrid').jqxGrid('unselectrow', IndexesArray[k].bound);
                                      };
                                  };
                              };
                              if (selectedNumber == pagesize) {
                                  $(element).jqxCheckBox('check');
                              } else if (selectedNumber == 0) {
                                  $(element).jqxCheckBox('uncheck');
                              };
                          });
                      }
                  },
                  { 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);
                }
            });
        });
        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/

October 11, 2012 at 9:44 am Grid Column jqxCheckBox #9257

sreeni379

Member

Hi Dimita,

Thanks for valuable help. it is help me lot. But here i have problem delete selected rows in grid.it is not happening to me to delete. if selected two rows from grid. if get row ids of selected whatever i selected two rows ids i am getting here but while deleting first record is deleting and second record is not deleting .following code i have written for delete rows in grid .

function GetExternalauserDetails() {

Exarr15 = [];
ExIndexesArray = [];
EXpageArray = [];

var rowscount = $(“#Exjqxgrid”).jqxGrid(‘getrows’).length;
var IndexesArray = new Array();
for (var i = 0; i < rowscount; i++) {
var ExvisibleIndex = $("#Exjqxgrid").jqxGrid('getrowvisibleindex', i);
IndexesArray.push({ bound: i, visible: ExvisibleIndex });
};
var paginginformation = $("#Exjqxgrid").jqxGrid('getpaginginformation');
var pagenum = paginginformation.pagenum;
var pagesize = paginginformation.pagesize;
var pageArray = new Array();

for (var j = 0; j = pagenum * pagesize && IndexesArray[j].visible 0) {
for (var i = 0; i < arr20.length; i++) {
//var row = $("#Injqxgrid").jqxGrid('getrowdata', arr20[i]);
// var row = $('#Injqxgrid').jqxGrid('getcellvalue', arr20[i], "UserID");
var row = $('#Injqxgrid').jqxGrid('getcell', arr20[i], "UserID");
arr20["UserID"] = row.UserID;
dataRecord4.push(arr20);
var id = $("#Injqxgrid").jqxGrid('getrowid', arr20[i]);
$("#Injqxgrid").jqxGrid('deleterow', id);

}

}
var val = JSON.stringify(dataRecord4);
debugger;
$.ajax({
url: '/UserAdmin/DeleteData',
type: 'POST',
data: val,
datatype: "json",
contentType: 'application/json; charset=utf-8',
success: function (result) {
}
});
arr20 = [];
}

Thanks
Sreeni

Author

Posts

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

You must be logged in to reply to this topic.