jQuery UI Widgets Forums Grid How to make the check all to select only filtered rows

This topic contains 6 replies, has 2 voices, and was last updated by  Shelan 4 years, 5 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • Shelan
    Participant

    Hi Team,

    I have a grid with selectionmode: ‘checkbox’ and showfilterrow: true

    I want to filter the data and export as CSV. When I click on the checkall which is on top left of jqxgrid, whole grid rows are selected.

    I want to make the checkall to select only filtered rows instead of selecting all the available rows. Anyone please help me on this.
    Thanks in advance…

    Best Regards,
    Shelan


    Dimitar
    Participant

    Hi Shelan,

    The “Select all” checkbox selects only the filtered rows. You can see this in the following example by entering a filter, clicking “Select all” and finally pressing the “Get selected rows” button.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.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/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.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.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
        <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = generatedata(500);
                var source =
                {
                    localdata: data,
                    datafields:
                    [
                        { name: 'name', type: 'string' },
                        { name: 'productname', type: 'string' },
                        { name: 'available', type: 'bool' },
                        { name: 'date', type: 'date' },
                        { name: 'quantity', type: 'number' }
                    ],
                    datatype: "array"
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source);
    
                $("#jqxgrid").jqxGrid(
                {
                    width: 850,
                    source: dataAdapter,
                    showfilterrow: true,
                    filterable: true,
                    selectionmode: 'checkbox',
                    columns: [
                      { text: 'Name', columntype: 'textbox', filtertype: 'input', datafield: 'name', width: 215 },
                      {
                          text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
                      },
                      { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
                      { text: 'Ship Date', datafield: 'date', filtertype: 'range', width: 210, cellsalign: 'right', cellsformat: 'd' },
                      { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
                    ]
                });
                $('#clearfilteringbutton, #getSelectedRows').jqxButton({ height: 25 });
                $('#clearfilteringbutton').click(function () {
                    $("#jqxgrid").jqxGrid('clearfilters');
                });
                $('#getSelectedRows').click(function () {
                    var rowindexes = $('#jqxgrid').jqxGrid('getselectedrowindexes');
                    alert(rowindexes.length);
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
        <input style="margin-top: 10px;" value="Remove Filter" id="clearfilteringbutton"
            type="button" />
        <input type="button" id="getSelectedRows" value="Get selected rows" />
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Shelan
    Participant

    Hi Dimitar,

    Thanks for the solution provided.

    I’m following the same way, but i couldn’t achieve the same in my project.

    But I tried with the same example code in a separate HTML file, and it’s working fine. Any idea what will be the problem?

    Thanks & Regards,
    Shelan


    Dimitar
    Participant

    Hi Shelan,

    Are there any errors thrown in your browser’s console? Please also make sure that you are using the latest version of jQWidgets (3.9.0).

    Best Regards,
    Dimitar

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


    Shelan
    Participant

    Hi Dimitar,

    There is no error thrown in the console. I checked the version of jQWidgets, it is v3.2.2.

    I agree with your point that, we have to use the latest version. But it’s very difficult to get approval for the version upgrade.

    Since we faced some issues with the other existing functionalities when we did the version upgrade, I couldn’t able to get approval.

    Kindly suggest me on this.

    Thanks & Regards,
    Shelan


    Dimitar
    Participant

    Hi Shelan,

    I am sorry, but there is nothing else we can offer you. It seems the issue originates either from your custom implementation or is related to the outdated version you are using.

    Best Regards,
    Dimitar

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


    Shelan
    Participant

    Hi Dimitar,

    I checked my implementation and I don’t find anything wrong.

    I tried the example with both 3.2.2 and 3.9.0, I found that, The issue is because of the outdated version(3.2.2) which I’m using.

    Thank you very much for your help.

    Regards,
    Shelan

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

You must be logged in to reply to this topic.