How do I make jqgrid columns sort?

Question

The columns do not sort.

I've tried changing the datatype to local and adding loadonce: true. Columns are set to sortable: true and I've tried setting sorttype to string and text, neither work. I'm using JQGrid version 4.5.2.

var grid = jQuery("#AgencyQuotesGrid");
grid.jqGrid({
    url: '/Admin/QuotesGrid',
    altRows: true,
    altclass: 'myAltRowClass',
    autowidth: false,
    datatype: 'local',
    mtype: 'POST',
    colNames: ['Agency', 'Agency Name', 'Quote Number', 'Insured Name', 'Product', 'Status', 'Effective Date', 'Last Update'],
    colModel: [
        { name: 'AgencyCode', index: 'AgencyCode', width: 6, align: 'left', sortable: true, sorttype: 'string', stype: 'text', classes: 'defaultpointer' },
        { name: 'AgencyName', index: 'AgencyName', width: 11, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'QuoteCode', index: 'QuoteCode', width: 6, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'InsuredName', index: 'InsuredName', width: 11, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'PackageTypeCode', index: 'PackageTypeCode', width: 7, align: 'left', sortable: true, classes: 'defaultpointer' },
        { name: 'Status', index: 'Status', width: 3, align: 'left', formatter: changeToolTip, classes: 'defaultpointer' },
        { name: 'EffectiveDate', index: 'EffectiveDate', width: 7, align: 'left', classes: 'defaultpointer' },
        { name: 'UpadateDate', index: 'UpadateDate', width: 7, align: 'left', classes: 'defaultpointer'}],
    height: '100%',
    rowNum: 20,
    rowList: [20, 20, 50],
    sortname: "EffectiveDate",
    sortorder: "desc",
    viewrecords: true,
    imgpath: "../../Content/Images/",
    caption: '',
    loadonce: true,
    pager: "#AgencyQuotesPager",
    emptyrecords: "No quotes have been submitted",
    onSelectRow: function (ids) {
        $.cookie('lasttab', $('#subTabs').tabs('option', 'selected'), { expires: 1 });
        if (ids != null) {
            var data = $("#AgencyQuotesGrid").getRowData(ids);
            $("#AgencyQuotesGrid").trigger(window.location.href = '/Admin/QuoteRouter/?id=' + data.AgencyCode + '&code=' + data.QuoteCode + '&type=' + encodeURIComponent(data.PackageType))
        }
    },
    loadComplete: function () { $("#AgencyQuotesGrid").setGridWidth($('#AgencyQuotesContainer').width() - 40, true), $('.ui-jqgrid').css('font-size', 14); jQuery("#AgencyQuotesGrid").trigger("reloadGrid"); },
    onSortCol: function (index, columnIndex, sortOrder) {
        var col = $("#grid_summarygrid").getGridParam('colNames');
        var label = "Ordered by " + col[columnIndex] + " " + sortOrder + "ending";

        $("#gridsort").text(label);
    }
}).navGrid($('#AgencyQuotesPager'), { edit: false, add: false, del: false, search: true });
});

I expect the columns to sort, but they are not. The column arrows change and the grid pops up the "loading..." but nothing changes. I appreciate any help.

Answer 1

loadComplete is triggered every time the grid loads, which includes local loads, sorting, pagination, etc. You registered an event handler which then immediately reloads the grid (by calling trigger("reloadGrid")) which causes the grid to clear itself and revert to its initial state. Remove the reloadGrid trigger and it should respect the client-side sorting.

loadComplete: function () {
    [...]
    jQuery("#AgencyQuotesGrid").trigger("reloadGrid");
}