[Shiva shankar. CParticipant]

Hi Peter/Team

I set autorowheight to true with paging it is warping the text but when i scroll it is dam slow some time browser hangs

can any buddy help regarding this

[Shiva shankar. CParticipant]

Hi Peter,

is checkbox not selecting is a default behavior of checkbox selection mode! or is it is bug?

If it is bug please take this issue as consideration for the fix in next release.

[Shiva shankar. CParticipant]

Hi Peter,

is checkbox not selecting is a default behavior of checkbox selection mode! or is it is bug?

If it is bug please take this issue as consideration for the fix in next release.

[Shiva shankar. CParticipant]

Thanks for response,
Yes am using jQWidgets 3.4 only

[Shiva shankar. CParticipant]

Thank you Peter can i take this issue will be fixed in next release?.
But its critical for me, and i need this functionality need to be worked, for time being do you have any alternative to make select all checkbox to be work.
Please help regarding this.

I tried below code in “groupschanged” event

_GridView.find('.jqx-grid-column-header .jqx-checkbox-default').parent().on('change', function (event) {
 if(_GridView.jqxGrid('groups').length > 0) {
    if(event.args.checked){
     var datainformation = _GridView.jqxGrid('getdatainformation');
                        var paginginformation = datainformation.paginginformation;
                        var pagenum = paginginformation.pagenum;
                        var pagesize = paginginformation.pagesize;
                        var totalRows = (pagenum + 1) * pagesize;
                        var AlltotalRows = datainformation.rowscount;
                        var checkStartIndex = ((pagenum + 1) * pagesize - pagesize);
                        var checkedRowsCount = 0;
                        if ((AlltotalRows - ((pagenum + 1) * pagesize - pagesize) > 0) && (AlltotalRows - ((pagenum + 1) * pagesize - pagesize) < pagesize)) {
                            var totalRows = ((pagenum + 1) * pagesize - pagesize) + (AlltotalRows % pagesize);
                            pagesize = (AlltotalRows % pagesize);
                            checkStartIndex = (AlltotalRows - pagesize);
                        }
                        var selection = (event.args.checked? 'selectrow' : 'unselectrow');
                        alert(totalRows)
                        var row_index = [];
                        for (var i = checkStartIndex; i < totalRows; i++) {
                            row_index.push(i);
                            _GridView.jqxGrid(selection, i);
                        }
                        alert(row_index);
                        _GridView.jqxGrid({ selectedrowindexes: row_index});
                    }
                    else {
                        _GridView.jqxGrid('clearselection');
                    }
                }
            });

This also didn’t worked

Please help with any alternative code or any suggestion.

[Shiva shankar. CParticipant]

Hi Peter,

as per you suggestion i removed virtual mode from the existing but still select all checkbox not selecting any row
http://jsfiddle.net/ZAkyj/62/

<div id="jqxgrid"></div>
<div style="margin-top: 20px;">
    <div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
        <div style="float: left;">
            <div style="margin-top: 10px;">
                <input id="btnExpandAll" type="button" value="Expand all" />
                <input id="btnCollapseAll" type="button" value="Collepse all" />
            </div>
        </div>
    </div>
</div>

  var data = generatedata(200);
  var source = {
      localdata: data,
      datafields: [{
          name: 'id',
          type: 'number'
      }, {
          name: 'firstname',
          type: 'string'
      }, {
          name: 'lastname',
          type: 'string'
      }, {
          name: 'productname',
          type: 'string'
      }, {
          name: 'quantity',
          type: 'number'
      }, {
          name: 'price',
          type: 'number'
      }, {
          name: 'total',
          type: 'number'
      }],
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  // initialize jqxGrid
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 750,
      height: 350,
      theme: 'energyblue',
      source: dataAdapter,
      pageable: true,
      columnsresize: true,
      columnsreorder: true,
      enabletooltips: true,
      enablehover: true,
      editable: true,
      editmode: 'dblclick',
      altrows: true,
      filterable: true,
      sortable: true,
      showsortcolumnbackground: false,
      sorttogglestates: 1,
      showfiltermenuitems: true,
      showfilterrow: true,
      showfiltercolumnbackground: false,
      groupable: true,
      pagesizeoptions: ['10', '15', '30', '50', '75', '100', '200'],
      pagesize: 50,
      selectionmode: 'checkbox',
      showstatusbar: true,
      statusbarheight: '20px',
      /*Due to scroll issue commented: autorowheight: true,*/
      rowdetails: false,
      rendergridrows: function (args) {
          return args.data;
      },
      groups: ['productname'],
      columns: [{
          text: 'Id',
          datafield: 'id',
          width: 50
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  // initialize buttons and checkboxes.
  $("#btnExpandAll").jqxButton({
      theme: 'energyblue'
  });
  $("#btnCollapseAll").jqxButton({
      theme: 'energyblue'
  });
  // select a row.
  $("#btnExpandAll").click(function () {
      $("#jqxgrid").jqxGrid('expandallgroups');
  });
  // clears the selection.
  $("#clearselectionbutton").click(function () {
      $("#jqxgrid").jqxGrid('collapseallgroups');
  });
  // expanding all group.
  $("#jqxgrid").jqxGrid('expandallgroups');

[Shiva shankar. CParticipant]

Thank you Peter for sample.

I want to tell you something can you please enable selection mode to checkbox and showfilterrow to true and fallow the below step
1) Load the page.
2) Do filter.
3) Click on checkbox to select the grid row
it is not working.

One more thing i need you help, is there any way i can use group with this above settings and same method form you html link
OR
My Requirement is, I need a grid which loads more then 500000 records and it should support
1. Checkbox selection
2. Sorting Grid in all the records (Server side / client side)
3. Filtering Grid (with filter row) in all the records (Server side / client side)
4. Grouping in all the records (Server side / client side)
page should not get hang.

Please help me in this solution its vary critical for me

Note: the above html link sample you sent will not work with checkbox selection after filtering (not selecting the row).

[Shiva shankar. CParticipant]

But Peter my requirement is am cannot bring all my data to local data because i will be be having some 50, 000 + records if i bring all the data to local data my page was getting hanged, so i used “Virtual Paging” sample for you demo site to enable the pagination.
Becausing am using virtual paging ill not get all data to filter or to sort so i used server filtering and binding resulting data to grid.

Please check the link Virtual mode removed i removed the virtual mode still not working

[Shiva shankar. CParticipant]

Hi Peter
Thanks for response
if we remove the virtual mode we cannot get pagination we are using pagination and even if we remove virtual mode same issue you check with the link and remove virtual mode.
I have one more issue related to check box selection is after filtering the select row checkbox of all the rows will never work until i clear the filter

filter: function () {
    $("#jqxgrid").jqxGrid('updatebounddata', 'filter');
 },

am using above code for filter to fetch data for db based filter expression return by grid.

[Shiva shankar. CParticipant]

Hi Peter,
Thank for reply
I do tested i demo project it is working fine i don’t know why it is not working for please find the below link for the properties am using to create the grid and the sample in JSFiddle please fallow the below link for sample.
Please let me know where am going wrong and what was the issue in my code and any solutions for it !!!!!!!!!!!!!

http://jsfiddle.net/ZAkyj/60/

or below is my code

<div id="jqxgrid"></div>
<div style="margin-top: 20px;">
    <div style="clear: both; font-family: Verdana, Geneva, 'DejaVu Sans', sans-serif; font-size: 12px;">
        <div style="float: left;">
            <div style="margin-top: 10px;">
                <input id="btnExpandAll" type="button" value="Expand all" />
                <input id="btnCollapseAll" type="button" value="Collepse all" />
            </div>
        </div>
    </div>
</div>

  var data = generatedata(200);
  var source = {
      localdata: data,
      datafields: [{
          name: 'id',
          type: 'number'
      }, {
          name: 'firstname',
          type: 'string'
      }, {
          name: 'lastname',
          type: 'string'
      }, {
          name: 'productname',
          type: 'string'
      }, {
          name: 'quantity',
          type: 'number'
      }, {
          name: 'price',
          type: 'number'
      }, {
          name: 'total',
          type: 'number'
      }],
      datatype: "array"
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  // initialize jqxGrid
  $("#jqxgrid").jqxGrid({
      theme: 'energyblue',
      width: 750,
      height: 350,
      theme: 'energyblue',
      source: dataAdapter,
      pageable: true,
      columnsresize: true,
      columnsreorder: true,
      enabletooltips: true,
      virtualmode: true,
      enablehover: true,
      editable: true,
      editmode: 'dblclick',
      altrows: true,
      filterable: true,
      sortable: true,
      showsortcolumnbackground: false,
      sorttogglestates: 1,
      showfiltermenuitems: true,
      showfilterrow: true,
      showfiltercolumnbackground: false,
      groupable: true,
      pagesizeoptions: ['10', '15', '30', '50', '75', '100', '200'],
      pagesize: 50,
      selectionmode: 'checkbox',
      showstatusbar: true,
      statusbarheight: '20px',
      /*Due to scroll issue commented: autorowheight: true,*/
      rowdetails: false,
      rendergridrows: function (args) {
          return args.data;
      },
      groups: ['productname'],
      columns: [{
          text: 'Id',
          datafield: 'id',
          width: 50
      }, {
          text: 'First Name',
          datafield: 'firstname',
          width: 100
      }, {
          text: 'Last Name',
          datafield: 'lastname',
          width: 100
      }, {
          text: 'Product',
          datafield: 'productname',
          width: 180
      }, {
          text: 'Quantity',
          datafield: 'quantity',
          width: 80,
          cellsalign: 'right'
      }, {
          text: 'Unit Price',
          datafield: 'price',
          width: 90,
          cellsalign: 'right',
          cellsformat: 'c2'
      }, {
          text: 'Total',
          datafield: 'total',
          width: 100,
          cellsalign: 'right',
          cellsformat: 'c2'
      }]
  });
  // initialize buttons and checkboxes.
  $("#btnExpandAll").jqxButton({
      theme: 'energyblue'
  });
  $("#btnCollapseAll").jqxButton({
      theme: 'energyblue'
  });
  // select a row.
  $("#btnExpandAll").click(function () {
      $("#jqxgrid").jqxGrid('expandallgroups');
  });
  // clears the selection.
  $("#clearselectionbutton").click(function () {
      $("#jqxgrid").jqxGrid('collapseallgroups');
  });
  // expanding all group.
  $("#jqxgrid").jqxGrid('expandallgroups');

[Shiva shankar. CParticipant]

Thank you Team it is working for me i added this code to my grid it was working fine for first time,
the problem is when you enable scroll bares to grid.
the image is not resetting

[Shiva shankar. CParticipant]

Hi Guys,

I have a similar issue i cannot use auto height for grid and my user want grid need to be set to full screen so my grid is set to height of window height.
With this scenario “autorowheight” will not work is thare any way to set the row height to the content of the column height

Note: am using latest verson downloaded form the JQwidgets site

[Shiva shankar. CParticipant]

Hi Peter,

I have scenario in my project the user want to filter when he hit enter key, is dr any option to fix this

[Author]

Posts