In a jqGrid, is there any visual cue that rows have been flitered?

Question

I have a jqGrid with a navGrid. When the user has clicked the search icon, and has run a search, is there any visual cue that the rows in the grid have been filtered? If not, is there a convenient or standard way for adding such a cue?

This is such a general question that perhaps I don't need to show any code. But just in case you want to see it, the code for the grid is as follows:

// Define the grid.
$("#messages_grid").jqGrid({

  datatype: "local",

  colNames:[
    'Date/Time',
    'Type',
    'Details'
  ],

  colModel :[
    {name:'DateTime', index:'DateTime', width:200, align:'left', sorttype:'text'},
    {name:'Summary', index:'Summary', width:100, align:'left', sorttype:'text'},
    {name:'Details', index:'Details', width:830, align:'left', sorttype:'text'},
  ],

  height: 'auto',
  rowNum: 3,
  rowList: [3, 6, 9, 12, 15],
  pager: '#messages_pager',
  viewrecords: true,
  caption: 'Messages',
  ignoreCase: true,
});

// Add the navGrid, which contains things like the search icon.
$("#messages_grid").jqGrid('navGrid', '#messages_pager', { edit: false, add: false, del: false });

Rows are added to the grid programmatically, by calling the following function:

function AddMessage(summary, details) {
    // Add the new row to the grid.
    var grid = jQuery("#messages_grid");
    var new_id = $("#messages_grid").getGridParam("reccount") + 1;
    var new_data = { DateTime: new Date(), Summary: summary, Details: details };
    grid.addRowData(new_id, new_data);

    // Set the sort order so that new messages appear at the end.
    grid.jqGrid().setGridParam({sortorder: "asc"});
    grid.jqGrid("sortGrid", "DateTime", true);

    // Set the page to the last page
    var last_page = grid.getGridParam('lastpage');
    $("#messages_grid").setGridParam({page: last_page});

    // Reload the grid.
    $("#messages_grid").trigger("reloadGrid")

    // Select newest row.
    $("#messages_grid").setSelection(new_id, true);
}

Thank you!

score 2 · Accepted Answer · edited May 23 '17 at 11:51

I hope that I correctly understand your problem. During developing of solution for one customer there were close requirement. As the solution I added ui-state-highlight class to the column headers by which the filtering are set. The first demo demonstrates this. The filtered results look like on the picture below

enter image description here

it uses the code

loadComplete: function () {
    highlightFilteredColumns.call(this);
}

where highlightFilteredColumns function defined as

var highlightFilteredColumns = function () {
        var $self = $(this), postData = $self.jqGrid("getGridParam", "postData"), i, l,
            cm = $self.jqGrid("getGridParam", "colModel"), control,
            filtersColumns = {},
            getAllFilteredColumns = function (f) {
                var j, n;
                if (f) {
                    if (f.groups !== undefined && f.groups !== null) {
                        for (j = 0, n = f.groups.length; j < n; j++) {
                            getAllFilteredColumns(f.groups[j]);
                        }
                    }
                    if (f.rules !== undefined && f.rules !== null) {
                        for (j = 0, n = f.rules.length; j < n; j++) {
                            filtersColumns[f.rules[j].field] = true;
                        }
                    }
                }
            };
        if (typeof postData.filters === "string") {
            getAllFilteredColumns($.parseJSON(postData.filters));
        } else if (postData.filters !== null && typeof postData.filters === "object") {
            getAllFilteredColumns(postData.filters);
        } else {
            return; // do nothing
        }

        for (i = 0, l = cm.length; i < l; i += 1) {
            control = $("#gs_" + $.jgrid.jqID(cm[i].name));
            if (control.length > 0) {
                if (filtersColumns[cm[i].index || cm[i].name] === true) {
                    //control.parent().addClass("ui-state-error").css({ borderTop: "0", borderBottom: "0" });
                    $("#" + $.jgrid.jqID($self[0].id) + "_" + $.jgrid.jqID(cm[i].name)).addClass("ui-state-highlight");
                } else {
                    //control.parent().removeClass("ui-state-error").css({ borderTop: "0", borderBottom: "0" });
                    $("#" + $.jgrid.jqID($self[0].id) + "_" + $.jgrid.jqID(cm[i].name)).removeClass("ui-state-highlight");
                }
            }
        }
    };

Another demo have a little longer code, but it's practical if one combines toolbar searching with advanced searching or if one set some initial filter and uses toolbar searching at the same time. In the case the toolbar will be filled with the values from the filter. I posted the approach initially in the answer (see refreshSerchingToolbar function).

Thanks, Oleg! That was a much more sophisticated answer than I was looking for. All I had in mind was some sort of true/false indicator -- although I had no idea what visual element should change. Highlighting each column heading involved in the filtering is even better. — Spacewaster, Jul 29 '14 at 21:04

In a jqGrid, is there any visual cue that rows have been flitered?

1 Answers1

Linked