sorting/filtering issue with jqGrid

Question

I was using jqGrid 4.5.3. version which I have upgraded to free jqGrid version 4.13.6. After upgrading I am facing following issues

Answer 1

You can fix your code to the following

$(window).on("resize", maximizeGrid);
$grid.on("jqGridAfterLoadComplete", function () {
    var colModel = $(this).jqGrid("getGridParam", "colModel"), i, cm;

    // reset widthOrg to the new values after autoResizeAllColumns
    for (i = 0; i < colModel.length; i++) {
        cm = colModel[i];
        cm.widthOrg = cm.width;
    }
    maximizeGrid();
});

$grid.jqGrid({
    datatype: "json",
    url: "/echo/json/",
    mtype: "POST",
    postData: {
        json: JSON.stringify(serverResponse)
    },
    colModel: [
        {
            name: 'ClassID',
            key: true,
            jsonmap: 'Class.ClassID',
            hidden: true
        },
        {
            name: 'Title',
            formatter: addLink,
            jsonmap: 'ClassLang.Title'
        },
        {
            name: 'CourseDetails',
            sortable: false,
            align: 'center',
            formatter:AddCourseDetailsLink,
            title: false
        },
        {
            name: 'ClassSchedule',
            sortable: false,
            align: 'center',
            formatter:AddViewClassScheduleLink,
            title: false
        },
        {
            name: 'AssignUser',
            sortable: false,
            align: 'center',
            formatter: AddAssignUserLink,
            title: false
        },
        {
            name: 'UserName',
            align: 'center'
        },
        {
            name: 'WhenCreated',
            jsonmap: 'Class.WhenCreated',
            align: 'center',
            formatter:'date'
        }
    ],
    iconSet: "fontAwesome",
    rowNum: 10,
    rowList: [10, 20, 30],
    pager: true,
    sortname: "Title",
    sortorder: "desc",
    viewrecords: true,
    multiSort: true,
    sortable: true,
    loadonce: true,
    additionalProperties: ['Class', 'ClassLang'],
    autoencode: true,
    cmTemplate: {
        autoResizable: true
    },
    autoresizeOnLoad: true,
    autowidth: true,
    autoResizing: {
        //resetWidthOrg: true,
        compact: true
    }
});

See the demo https://jsfiddle.net/OlegKi/b15pmdcg/4/. You can read more details More details about widthOrg in the issue. The same issue explains new resetWidthOrg: true property of autoResizing.

I'd recommend you to consider to use custom buttons of the formatter: "actions" (see the wiki article for details)

{
    name: "act", label: "Details", template: "actions", width: 70,
    formatoptions: { editbutton: false, delbutton: false }
}

and the option

actionsNavOptions: {
    courseDetailsicon: "fa-file",
    courseDetailstitle: "show course details",
    classScheduleicon: "fa-calendar",
    classScheduletitle: "class schedule",
    assignUsericon: "fa-users",
    assignUsertitle: "Assign user to class",
    custom: [
        { action: "courseDetails", position: "first",
            onClick: function (options) {
                alert("Course Details, rowid=" + options.rowid);
            } },
        { action: "classSchedule", position: "first",
            onClick: function (options) {
                alert("Class Schedule, rowid=" + options.rowid);
            } },
        { action: "assignUser",
            onClick: function (options) {
                alert("Assign User, rowid=" + options.rowid);
            } }
    ]
}

One can see the results on another demo https://jsfiddle.net/OlegKi/rmsz529L/3/

By the way, you can use the same demos with Boostrap CSS instead of jQuery UI CSS. You will need just add guiStyle: "bootstrap" option of jqGrid:

https://jsfiddle.net/OlegKi/b15pmdcg/8/

https://jsfiddle.net/OlegKi/rmsz529L/2/