JqxGrid Scrollbar Problem

[sreeni379Member]

HI,

I  have problem in scrolling  in grid , when i click horizontal scroll bar it is  saying “Object Error”, following code i have written for grid ,please help me .

  var source =
                 {
                     datatype: "json",
                     datafields: [

                             { name: 'InSelect', type: 'boolean' },
                             { name: 'UserID' },
                             { name: 'UserName' },
                             { name: 'UserEmail' },
                             { name: 'Status' },
                             { name: 'SuperAdmin', type: 'boolean' },
                             { name: 'LOBAdmin', type: 'boolean' },
                             { name: 'DataAdmin', type: 'boolean' },
                             { name: 'SecurityAdmin', type: 'boolean' },
                             { name: 'Publisher' }
                     ],
                     data: ArrayVal,
                     url: '../UserAdmin/GridInternaluserAdmin/'
                 };

                var dataAdapter = new $.jqx.dataAdapter(source);
                var columnCheckBox = null;
                var updatingCheckState = false;
                // initialize jqxGrid. Disable the built-in selection.
                $("#Injqxgrid").jqxGrid(
                {
                    width: 886,
                    height: 206,
                    source: dataAdapter,
                    editable: true,
                    theme: theme,
                    enablehover: false,
                    selectionmode: 'none',
                    pageable: true,
                    sortable: true,
                    columns: [
                      {
                          text: '', datafield: 'InSelect', columntype: 'checkbox',sortable: false , 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 = $("#Injqxgrid").jqxGrid('getrows').length;

                              $(element).bind('change', function (event) {
                                  var IndexesArray = new Array();
                                  for (var i = 0; i < rowscount; i++) {
                                      var visibleIndex = $("#Injqxgrid").jqxGrid('getrowvisibleindex', i);
                                      IndexesArray.push({ bound: i, visible: visibleIndex });
                                  };
                                  var paginginformation = $("#Injqxgrid").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);
                                          $("#Injqxgrid").jqxGrid('setcellvalue', IndexesArray[j].bound, 'InSelect', event.args.checked);
                                      };
                                  };

                                  var checked = event.args.checked;
                                  if (checked == null || updatingCheckState) return;
                                  $("#Injqxgrid").jqxGrid('beginupdate');

                                  if (checked == true) {
                                      $("#Injqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                                  } else if (checked == false) {
                                      $("#Injqxgrid").jqxGrid('clearselection');
                                  };

                                  $("#Injqxgrid").jqxGrid('endupdate');
                              });

                              $("#Injqxgrid").bind("pagechanged", function (event) {
                                  var IndexesArray = new Array();
                                  for (var i = 0; i < rowscount; i++) {
                                      var visibleIndex = $("#Injqxgrid").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 = $("#Injqxgrid").jqxGrid('getcellvalue', IndexesArray[k].bound, 'InSelect');
                                          if (value == true) {
                                              $("#Injqxgrid").jqxGrid('selectrow', IndexesArray[k].bound);
                                              selectedNumber += 1;
                                          } else {
                                              $('#Injqxgrid').jqxGrid('unselectrow', IndexesArray[k].bound);
                                          };
                                      };
                                  };

                                  if (selectedNumber == pagesize) {
                                      $(element).jqxCheckBox('check');
                                  } else if (selectedNumber == 0) {
                                      $(element).jqxCheckBox('uncheck');
                                  };

                              });
                          }
                      },
                                { text: 'UserID ', dataField: 'UserID', editable: false, width: 90 },
                                { text: 'UserName ', dataField: 'UserName', editable: false, width: 100 },
                                { text: 'UserEmail ', dataField: 'UserEmail', editable: false, width: 120 },
                                { text: 'Status', dataField: 'Status', editable: false, width: 90 },
                                { text: 'SuperAdmin', dataField: 'SuperAdmin', columntype: 'checkbox',sortable: false , width: 100 },
                                { text: 'LOBAdmin', dataField: 'LOBAdmin', columntype: 'checkbox',sortable: false , width: 90 },
                                { text: 'DataAdmin', dataField: 'DataAdmin', columntype: 'checkbox',sortable: false , width: 90 },
                                { text: 'SecurityAdmin ', dataField: 'SecurityAdmin', columntype: 'checkbox',sortable: false , width: 100 },
                                { text: 'Publisher', dataField: 'Publisher', editable: false,sortable: false , width: 90 }

                    ]
                });
-----

[DimitarParticipant]

Hello sreeni379,

Using your code snippet, we created an example but could not reproduce the reported issue. Here is the example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></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 = 'classic';
            var source =
                 {
                     datatype: "json",
                     datafields: [
                             { name: 'InSelect', type: 'boolean' },
                             { name: 'UserID' },
                             { name: 'UserName' },
                             { name: 'UserEmail' },
                             { name: 'Status' },
                             { name: 'SuperAdmin', type: 'boolean' },
                             { name: 'LOBAdmin', type: 'boolean' },
                             { name: 'DataAdmin', type: 'boolean' },
                             { name: 'SecurityAdmin', type: 'boolean' },
                             { name: 'Publisher' }
                     ],
                     //                     data: ArrayVal,
                     url: "Admin.txt"
                 };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var columnCheckBox = null;
            var updatingCheckState = false;
            // initialize jqxGrid. Disable the built-in selection.
            $("#Injqxgrid").jqxGrid(
                {
                    width: 886,
                    height: 206,
                    source: dataAdapter,
                    editable: true,
                    theme: theme,
                    enablehover: false,
                    selectionmode: 'none',
                    pageable: true,
                    sortable: true,
                    columns: [
                      {
                          text: '', datafield: 'InSelect', columntype: 'checkbox', sortable: false, 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 = $("#Injqxgrid").jqxGrid('getrows').length;
                              $(element).bind('change', function (event) {
                                  var IndexesArray = new Array();
                                  for (var i = 0; i < rowscount; i++) {
                                      var visibleIndex = $("#Injqxgrid").jqxGrid('getrowvisibleindex', i);
                                      IndexesArray.push({ bound: i, visible: visibleIndex });
                                  };
                                  var paginginformation = $("#Injqxgrid").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);
                                          $("#Injqxgrid").jqxGrid('setcellvalue', IndexesArray[j].bound, 'InSelect', event.args.checked);
                                      };
                                  };
                                  var checked = event.args.checked;
                                  if (checked == null || updatingCheckState) return;
                                  $("#Injqxgrid").jqxGrid('beginupdate');
                                  if (checked == true) {
                                      $("#Injqxgrid").jqxGrid({ selectedrowindexes: pageArray });
                                  } else if (checked == false) {
                                      $("#Injqxgrid").jqxGrid('clearselection');
                                  };
                                  $("#Injqxgrid").jqxGrid('endupdate');
                              });
                              $("#Injqxgrid").bind("pagechanged", function (event) {
                                  var IndexesArray = new Array();
                                  for (var i = 0; i < rowscount; i++) {
                                      var visibleIndex = $("#Injqxgrid").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 = $("#Injqxgrid").jqxGrid('getcellvalue', IndexesArray[k].bound, 'InSelect');
                                          if (value == true) {
                                              $("#Injqxgrid").jqxGrid('selectrow', IndexesArray[k].bound);
                                              selectedNumber += 1;
                                          } else {
                                              $('#Injqxgrid').jqxGrid('unselectrow', IndexesArray[k].bound);
                                          };
                                      };
                                  };
                                  if (selectedNumber == pagesize) {
                                      $(element).jqxCheckBox('check');
                                  } else if (selectedNumber == 0) {
                                      $(element).jqxCheckBox('uncheck');
                                  };
                              });
                          }
                      },
                                { text: 'UserID ', dataField: 'UserID', editable: false, width: 90 },
                                { text: 'UserName ', dataField: 'UserName', editable: false, width: 100 },
                                { text: 'UserEmail ', dataField: 'UserEmail', editable: false, width: 120 },
                                { text: 'Status', dataField: 'Status', editable: false, width: 90 },
                                { text: 'SuperAdmin', dataField: 'SuperAdmin', columntype: 'checkbox', sortable: false, width: 100 },
                                { text: 'LOBAdmin', dataField: 'LOBAdmin', columntype: 'checkbox', sortable: false, width: 90 },
                                { text: 'DataAdmin', dataField: 'DataAdmin', columntype: 'checkbox', sortable: false, width: 90 },
                                { text: 'SecurityAdmin ', dataField: 'SecurityAdmin', columntype: 'checkbox', sortable: false, width: 100 },
                                { text: 'Publisher', dataField: 'Publisher', editable: false, sortable: false, width: 90 }
                    ]
                });
        });
    </script>
</head>
<body>
    <div id="Injqxgrid">
    </div>
</body>
</html>

At our side there is no issue with the scrollbar. if it persists at your side, could you please share more feedback, such as your browser and its version and the version of jQWidgets you use.

Best Regards,
Dimitar

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

[Author]

Posts