jQWidgets Forums

Tagged: Select all checkbox with grouping

This topic contains 13 replies, has 2 voices, and was last updated by Shiva shankar. C 10 years, 11 months ago.

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

Author

Select all checkbox with grouping Posts

July 30, 2014 at 12:44 pm Select all checkbox with grouping #57822

Participant

Hi guys,

am using JQxgrid latest version which is available in in this site,
every thing working fine only issue with facing when i group the grid select all is not working throwing “e.bounddata is undefined” error
and not selection any row after clicking the selecting row any solutions

July 30, 2014 at 1:32 pm Select all checkbox with grouping #57826

Peter Stoev

Keymaster

Hi Shiva shankar. C,

Thanks for the feedback. Unfortunately, we were not able to reproduce this with jQWidgets 3.4.

Please, find my test sample below:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>Basic grouping Grid showing collapsible data groups that can
        be customized via the 'Group By' header menu option or via drag and drop of grid
        column headers.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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.grouping.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script> 
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script> 

    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/customers.xml";

            // prepare the data
            var source =
            {
                datatype: "xml",
                datafields: [
                    { name: 'CompanyName', map: 'm\\:properties>d\\:CompanyName', type: 'string' },
                    { name: 'ContactName', map: 'm\\:properties>d\\:ContactName', type: 'string' },
                    { name: 'ContactTitle', map: 'm\\:properties>d\\:ContactTitle', type: 'string' },
                    { name: 'City', map: 'm\\:properties>d\\:City', type: 'string' },
                    { name: 'PostalCode', map: 'm\\:properties>d\\:PostalCode', type: 'string' },
                    { name: 'Country', map: 'm\\:properties>d\\:Country', type: 'string' }
                ],
                root: "entry",
                record: "content",
                id: 'm\\:properties>d\\:CustomerID',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // Create jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                selectionmode: 'checkbox',
                groupable: true,
                columns: [
                  { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                  { text: 'City', datafield: 'City', width: 120 },
                  { text: 'Country', datafield: 'Country' }
                ],
                groups: ['City']
            });

            $("#expand").jqxButton({ theme: theme });
            $("#collapse").jqxButton({ theme: theme });
            $("#expandall").jqxButton({ theme: theme });
            $("#collapseall").jqxButton({ theme: theme });

            // expand group.
            $("#expand").on('click', function () {      
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('expandgroup', groupnum);
                }
            });

            // collapse group.
            $("#collapse").on('click', function () {
                var groupnum = parseInt($("#groupnum").val());
                if (!isNaN(groupnum)) {
                    $("#jqxgrid").jqxGrid('collapsegroup', groupnum);
                }
            });

            // expand all groups.
            $("#expandall").on('click', function () {
                $("#jqxgrid").jqxGrid('expandallgroups');
            });

            // collapse all groups.
            $("#collapseall").on('click', function () {
                $("#jqxgrid").jqxGrid('collapseallgroups');
            });

            // trigger expand and collapse events.
            $("#jqxgrid").on('groupexpand', function (event) {
                var args = event.args;
                $("#expandedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });

            $("#jqxgrid").on('groupcollapse', function (event) {
                var args = event.args;
                $("#collapsedgroup").text("Group: " + args.group + ", Level: " + args.level);
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
        <div style="margin-top: 30px;">
            <div style="float: left; margin-left: 20px;">
                <input value="Expand Group" type="button" id='expand' />
                <br />
                <input style="margin-top: 10px;" value="Collapse Group" type="button" id='collapse' />
                <br />
                <span style="margin-top: 10px;">Group:</span>
                <input value="1" id="groupnum" style="margin-top: 10px; width: 20px;" type="text" />
            </div>
            <div style="float: left; margin-left: 20px;">
                <input value="Expand All Groups" type="button" id='expandall' />
                <br />
                <input style="margin-top: 10px; margin-bottom: 10px;" value="Collapse All Groups"
                    type="button" id='collapseall' />
                <br />
            </div>
            <div style="float: left; margin-left: 20px;">
                <div style="font-weight: bold;">
                    <span>Event Log:</span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Expanded Group:</span> <span id="expandedgroup"></span>
                </div>
                <div style="margin-top: 10px;">
                    <span>Collapsed Group:</span> <span id="collapsedgroup"></span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Would you be able to modify the above to match your application’s scenario in such way that it reproduces the reported behavior? could you also check whether you use or not the latest jQWidgets version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 1, 2014 at 7:29 am Select all checkbox with grouping #57891

Shiva shankar. C

Participant

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');

August 1, 2014 at 12:28 pm Select all checkbox with grouping #57907

Peter Stoev

Keymaster

Hi Shiva shankar. C,

Remove virtualmode: true. It is still not possible to have groupable and virtualmode enabled at the same time in this version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 1, 2014 at 1:14 pm Select all checkbox with grouping #57918

Shiva shankar. C

Participant

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.

August 1, 2014 at 1:25 pm Select all checkbox with grouping #57922

Peter Stoev

Keymaster

Hi Shiva shankar. C,

IF you remove virtual mode the pagination will work. Please, refer to the Grouping with Paging demo on our website. The problem is that your code enables virtual mode but actually does not use it. You also don’t need to implement the filter callback function. This is used only for Server Filtering and you bind your Grid to local data, not to a Server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 1, 2014 at 1:47 pm Select all checkbox with grouping #57926

Shiva shankar. C

Participant

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

August 1, 2014 at 2:09 pm Select all checkbox with grouping #57927

Peter Stoev

Keymaster

Hi Shiva shankar. C,

The approach which you use for virtual mode is wrong. If you want to use virtual mode, you will have to implement on your own filtering, sorting, editing, etc. That’s why this mode is usually used when the filtering, sorting and editing are done in a server and the grid is used only for displaying data, not for customizing data. Also, as I already wrote, grouping in virtual mode is not supported. I suggest you to use jQWidgets 3.4, too and I suggest you to see this demo: http://www.jqwidgets.com/jquery-widgets-demo/demos/php/serverfiltering_paging_and_sorting.htm?arctic to learn how to implement server paging, sorting and filtering correctly.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 1, 2014 at 3:00 pm Select all checkbox with grouping #57936

Shiva shankar. C

Participant

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).

August 2, 2014 at 10:31 am Select all checkbox with grouping #57952

Shiva shankar. C

Participant

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');

August 2, 2014 at 10:57 am Select all checkbox with grouping #57957

Peter Stoev

Keymaster

Hi Shiva shankar. C,

Ok, thank you for the feedback. We will continue our investigation of the reported behavior. In the meantime, you may use some of the other row or cell selection modes.

Best Regards,
Peter Stoev

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

August 2, 2014 at 12:46 pm Select all checkbox with grouping #57958

Shiva shankar. C

Participant

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.

August 2, 2014 at 7:02 pm Select all checkbox with grouping #57964

Peter Stoev

Keymaster

Hi Shiva shankar. C,

You may use some of the other row or cell selection modes, if you don’t like how the checkbox selection behaves.

Best Regards,
Peter Stoev

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

August 4, 2014 at 6:06 am Select all checkbox with grouping #57982

Shiva shankar. C

Participant

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.

Author

Posts

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

You must be logged in to reply to this topic.