Filter by selection or Sort by Selection - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox, filter, filtering, grid, jqxgrid, selection, selectionmode, sort, sorting

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 6 months ago.

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

Author

Filter by selection or Sort by Selection Posts

May 20, 2014 at 8:04 pm Filter by selection or Sort by Selection #54710

gombbc

Participant

I have searched the forum on the phrase “filter by selection” and have not been able to find a similiar question.

We would like to have the ability for the user to quickly filter (and toggle this) to what they have selected. This is necessary b/c they may make selections from a large data set and may need to remove one or two. Is it possible to turn on a filter option when selectionmode is checkboxes?

If not, sorting would work as well. Here’s an example which is close to what we would like to have for sort.
http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithSortableMultiselect.htm
Could the sort ability be enabled for a selectionmode of checkbox?

any help would be appreciated.

May 21, 2014 at 5:25 am Filter by selection or Sort by Selection #54720

Dimitar

Participant

Hello gombbc,

You can filter a grid while selectionmode is set to “checkbox” but not as explained by you. You can see the available filter modes in the jqxGrid demo section, under Filtering.

As for the kind of sorting you require – it is already demonstrated by the CheckBox Selection demo.

Best Regards,
Dimitar

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

May 21, 2014 at 3:45 pm Filter by selection or Sort by Selection #54768

gombbc

Participant

Dimitar,

Thank you for your response! I should better explain what we are attempting to achieve.

We are looking at using a “Drop Down Grid” to allow users to choose people based on id, name, groups. We would like to extend it so that multiple people may be selected. The content of the dropdown will be set to “N selected” where N will be the number of people selected.

So, when the user clicks on the dropdown, we are looking for a quick way for them to find the rows they have selected. So, that’s why filtering or sorting on the “checkbox” column would be what we are looking for.

Sorry, my explanation above was jumping to a solution before making the desired behavior clear. I’ll try to be better about that in the future.

May 22, 2014 at 6:23 am Filter by selection or Sort by Selection #54784

Dimitar

Participant

Hi gombbc,

Unfortunately, this cannot be achieved. However, you can change the value of another column when you select/unselect rows. This “dummy” column can then be used for filtering/sorting. It may even be hidden but then you would only be able to filter/sort programmatically. Here is an example:

<!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.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/jqxcheckbox.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/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.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 () {
            // prepare the data
            var data = generatedata(20, true);

            var source =
            {
                localdata: data,
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'selected', type: 'bool' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ],
                datatype: "array"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);

            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 850,
                source: dataAdapter,
                sortable: true,
                filterable: true,
                selectionmode: "checkbox",
                ready: function () {
                    var rows = $('#jqxgrid').jqxGrid('getrows');
                    for (var i = 0; i < rows.length; i++) {
                        $("#jqxgrid").jqxGrid('setcellvalue', i, "selected", false);
                    };
                },
                columns: [
                  { text: 'Selected', datafield: 'selected', threestatecheckbox: true, columntype: 'checkbox', width: 70, hidden: true },
                  { text: 'First Name', editable: false, datafield: 'firstname', width: 120 },
                  { text: 'Last Name', editable: false, datafield: 'lastname', width: 120 },
                  { text: 'Product', editable: false, datafield: 'productname', width: 180 },
                  { text: 'Quantity', editable: false, datafield: 'quantity', width: 80, cellsalign: 'right' },
                  { text: 'Unit Price', editable: false, datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Total', editable: false, datafield: 'total', cellsalign: 'right', cellsformat: 'c2' }
                ]
            });

            $('#jqxgrid').on('rowselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                $("#jqxgrid").jqxGrid('setcellvalue', row, "selected", true);
            });

            $('#jqxgrid').on('rowunselect', function (event) {
                var args = event.args;
                var row = args.rowindex;
                $("#jqxgrid").jqxGrid('setcellvalue', row, "selected", false);
            });

            $("#sortBySelection").click(function () {
                $('#jqxgrid').jqxGrid('sortby', 'selected', 'desc');
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid">
        </div>
    </div>
    <button id="sortBySelection">
        Sort by selection</button>
</body>
</html>

Another (reverse) approach is to use a checkbox column and select/unselect the rows programmatically when you change the value of its cells. It would be easy to sort/filter this column.

Best Regards,
Dimitar

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

Author

Posts

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

You must be logged in to reply to this topic.