Using Free jqGrid 4.15, can't filter checkboxes on false

Question

I am using Free jqGrid 4.15.0, I have three checkbox columns populated by three bools. Using the filter toolbar the "All" choice works, the "True" choice works, but the "False" choice never matches anything. I tried converting the bools to ints (0, 1) and setting the searchoptions accordingly, but until I converted the bools/ints to strings ("true", "false") and filtered on the strings, I could never get the "False" choice in the filter to work.

The checkboxes fill successfully, it's just the filtering that does not work.

This screen worked fine using a prior version of jqGrid (4.5.2).

Does anyone have any ideas what the issue is? Let me know if there is anything else you need to see.

My class which is JSON'd and delivered to the grid:

public class DelForDetails
{
    public long ScheduleId { get; set; }
    public DateTime? ShipmentDate { get; set; }
    public string PurchaseOrderNumber { get; set; }
    public string ProductNumber { get; set; }
    public string ScheduleIdentifier { get; set; }
    public Decimal? ShipmentQuantity { get; set; }
    public string CommitmentLevel { get; set; }
    public string ConsumerName { get; set; }
    public string ShipToFacilityNumber { get; set; }
    public bool Shipped { get; set; }
    public bool ExportFlag { get; set; }
    public bool MissingDateFlag { get; set; }
    public string StatusForSchedule { get; set; }
}

The grid:

$('#scheduleGrid').jqGrid({
    url: url,
    datatype: 'json',
    mtype: 'GET',
    colModel: [
        { name: 'ScheduleId', label: $('#ScheduleIdHeaderText').text(), width: 100, hidden: true, editable: true },
        {
            name: 'ShipmentDate', label: $('#ShipmentDate').text(), width: 100, align: 'center', editable: true,
            formatter: stdDateFormatter, stype: 'text'
        },
        { name: 'PurchaseOrderNumber', label: $('#PurchaseOrderNumber').text(), width: 150, align: 'left', editable: true },
        { name: 'ProductNumber', label: $('#ProductNumber').text(), width: 100, align: 'left', editable: false },
        { name: 'ScheduleIdentifier', label: $('#ScheduleIdentifierHeaderText').text(), width: 150, align: 'right', hidden: false },
        {
            name: 'ShipmentQuantity', label: $('#ShipmentQuantity').text(), width: 80, align: 'center', hidden: false, formatter: 'number',
            formatoptions: { decimalPlaces: 4, thousandsSeparator: '' }
        },
        { name: 'CommitmentLevel', label: $('#CommittmentLevelHeaderText').text(), width: 80, align: 'left', hidden: false },
        { name: 'ConsumerName', label: $('#CustomerName').text(), width: 150, align: 'left', hidden: false },
        { name: 'ShipToFacilityNumber', label: $('#ShipToCode').text(), width: 100, align: 'center', hidden: false },
        {
            name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        },
        {
            name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        },
        {
            name: 'MissingDateFlag', label: $('#MissingDateFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
            stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
        }
    ],
    jsonReader: {
        repeatitems: false,
        id: 'ScheduleId'
    },
    pager: '#schedulePager',
    altRows: true,
    altclass: 'harmony-schedule-grid-altrow-class',
    ignoreCase: true,
    multiselect: true,
    cellEdit: false,
    rowNum: 15,
    rowList: [15, 30, 50],
    loadonce: true,
    loadui: 'disable',
    sortable: true,
    sortname: 'ShipmentDate',
    sortorder: 'asc',
    viewrecords: true,
    gridview: true,
    autoencode: true,
    height: 'auto',
    autowidth: true,
    subGrid: true,
    loadComplete: function () {
        $('#LoadingPanel').hide();
        $('td[aria-describedby="scheduleGrid_subgrid"]').addClass('harmony-schedule-background-color');
        $('td[aria-describedby="scheduleGrid_cb"]').addClass('harmony-schedule-background-color');
    },
    subGridRowExpanded: function (subgrid_id, row_id) {
        ...
    }
})
.navGrid('#schedulePager', { del: false, add: false, edit: false, search: false })
.navButtonAdd('#schedulePager', { } })
.filterToolbar({ stringResult: true, searchOnEnter: false, autosearchDelay: 1000, defaultSearch: 'cn' });

View of checkboxes

Answer 1

If I correctly understand the problem, then you should add

sorttype: "boolean"

property in the column, which data should be interpreted as Boolean. It should fix your problem.

Alternatively you can consider to change

stype: 'select',
searchoptions: {
    sopt: ['eq', 'ne'],
    value: ':All;true:True;false:False'
}

to

sorttype: "boolean",
stype: "checkbox",
searchoptions: {
    sopt: ["eq"],
    value: "true:false"
}

to use stype: "checkbox" instead of stype: "select". You can use short form of the column declaration: template: "booleanCheckbox". It allows to simplify the definition of columns Shipped and ExportFlag from

{
    name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
    stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
},
{
    name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80, align: 'center', hidden: false, formatter: 'checkbox',
    stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: ':All;true:True;false:False' }
}

to

{
    name: 'Shipped', label: $('#ShippedHeaderText').text(), width: 80, 
    template: "booleanCheckbox"
},
{
    name: 'ExportFlag', label: $('#ExportFlagHeaderText').text(), width: 80,
    template: "booleanCheckbox"
}

I personally mostly add firstsortorder: "desc" property to template: "booleanCheckbox" to search for true on the first click on the tree-state checkbox created by stype: "checkbox".