I have a jqGrid multiple search dialog as below:

(Note the first empty td in each row).

What I want is a search grid like this (below), where:

1. The first td is filled in with "and/or" accordingly.
2. The corresponding search filters are also built that way.

The empty td is there by default, so I assume that this is a standard jqGrid feature that I can turn on, but I can't seem to find it in the docs.

My code looks like this:

<script type="text/javascript">

    $(document).ready(function () {

        var lastSel;
        var pageSize = 10; // the initial pageSize

        $("#grid").jqGrid({
            url: '/Ajax/GetJqGridActivities',
            editurl: '/Ajax/UpdateJqGridActivities',
            datatype: "json",
            colNames: [
                'Id',
                'Description',
                'Progress',
                'Actual Start',
                'Actual End',
                'Status',
                'Scheduled Start',
                'Scheduled End'
            ],
            colModel: [
                { name: 'Id', index: 'Id', searchoptions: { sopt: ['eq', 'ne']} },
                { name: 'Description', index: 'Description', searchoptions: { sopt: ['eq', 'ne']} },
                { name: 'Progress', index: 'Progress', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
                { name: 'ActualStart', index: 'ActualStart', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
                { name: 'ActualEnd', index: 'ActualEnd', editable: true, searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
                { name: 'Status', index: 'Status.Name', editable: true, searchoptions: { sopt: ['eq', 'ne']} },
                { name: 'ScheduledStart', index: 'ScheduledStart', searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} },
                { name: 'ScheduledEnd', index: 'ScheduledEnd', searchoptions: { sopt: ['eq', 'ne', "gt", "ge", "lt", "le"]} }
            ],
            jsonReader: {
                root: 'rows',
                id: 'Id',
                repeatitems: false
            },
            rowNum: pageSize, // this is the pageSize 
            rowList: [pageSize, 50, 100],
            pager: '#pager',
            sortname: 'Id',
            autowidth: true,
            shrinkToFit: false,
            viewrecords: true,
            sortorder: "desc",
            caption: "JSON Example",
            onSelectRow: function (id) {
                if (id && id !== lastSel) {
                    $('#grid').jqGrid('restoreRow', lastSel);
                    $('#grid').jqGrid('editRow', id, true);
                    lastSel = id;
                }
            }
        });

        // change the options (called via searchoptions)
        var updateGroupOpText = function ($form) {
            $('select.opsel option[value="AND"]', $form[0]).text('and');
            $('select.opsel option[value="OR"]', $form[0]).text('or');
            $('select.opsel', $form[0]).trigger('change');
        };

        // $(window).bind('resize', function() {
        //    ("#grid").setGridWidth($(window).width());
        //}).trigger('resize');

        // paging bar settings (inc. buttons)
        // and advanced search
        $("#grid").jqGrid('navGrid', '#pager', 
            { edit: true, add: false, del: false }, // buttons
            {}, // edit option - these are ordered params!
            {}, // add options
            {}, // del options            
            {closeOnEscape: true, multipleSearch: true, closeAfterSearch: true, onInitializeSearch: updateGroupOpText, afterRedraw: updateGroupOpText}, // search options
            {}
        );


    // TODO: work out how to use global $.ajaxSetup instead
        $('#grid').ajaxError(function (e, jqxhr, settings, exception) {
            var str = "Ajax Error!\n\n";
            if (jqxhr.status === 0) {
                str += 'Not connect.\n Verify Network.';
            } else if (jqxhr.status == 404) {
                str += 'Requested page not found. [404]';
            } else if (jqxhr.status == 500) {
                str += 'Internal Server Error [500].';
            } else if (exception === 'parsererror') {
                str += 'Requested JSON parse failed.';
            } else if (exception === 'timeout') {
                str += 'Time out error.';
            } else if (exception === 'abort') {
                str += 'Ajax request aborted.';
            } else {
                str += 'Uncaught Error.\n' + jqxhr.responseText;
            }
            alert(str);
        });


        $("#grid").jqGrid('bindKeys');
        $("#grid").jqGrid('inlineNav', "#grid");

    });

</script>


<table id="grid"/> <div id="pager"/>