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

1. Sorting is not working for all columns
2. I want to display the column size as per the content for which I have set autoResizable: true and autoresizeOnLoad: true , still column width is not set as per content

Below is my jqGrid code written on document.Ready function

jQuery("#jqgrid").jqGrid({
            url: '@Url.Action("GetClassList", "Class")',
            datatype: 'json',
            height: 'auto',
            colNames: ['ClassID','CourseID', '@objLocalizer["Class_Title_GridCol"]','@objLocalizer["ViewCourseDetails"]','@objLocalizer["ViewClassSchedule"]', '@objLocalizer["Class_AssignUser"]','@objLocalizer["ClassCreatedBy"]','@objLocalizer["ClassCreatedDate"]'],
            colModel: [

                 {
                     name: 'Class.ClassID',
                     index: 'Class.ClassID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'Class.CourseID',
                     index: 'Class.CourseID',
                     sortable: true,
                     hidden: true
                 },
                 {
                     name: 'ClassLang.Title',
                     index: 'ClassLang.Title',
                     sortable: true,
                     formatter: addLink,

                 },
                 {
                     name: 'CourseDetails',
                     index: 'CourseDetails',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddCourseDetailsLink
                 },
                 {
                     name: 'ClassSchedule',
                     index: 'ClassSchedule',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter:AddViewClassScheduleLink
                 },
                 {
                     name: 'AssignUser',
                     index: 'AssignUser',
                     sortable: false,
                     align: 'center',
                     title: false,
                     formatter: AddAssignUserLink
                 },
                 {
                     name: 'UserName',
                     index: 'UserName',
                     align: 'center',
                     sortable: true
                 },
                 {
                     name: 'Class.WhenCreated',
                     index: 'Class.WhenCreated',
                     align: 'center',
                     formatter:'date',
                     sortable: true
                 }],

            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pjqgrid',
            sortname: "Title",
            sortorder: "desc",
            toolbarfilter: true,
            viewrecords: true,
            multiSort: true,
            sortable: true,
            loadonce: true,
            ignoreCase: true,
            gridComplete: function () {

                $("#progbar").css('width', '100%')
                $("#progess").hide();
                $("#grid").css("visibility", 'visible');

            },
            editurl: " ",
            caption: "",
            multiselect: false,
            autowidth: true,

        });

I have also added the below function to expand the grid as per the available tabs

    $(window).on('resize.jqGrid', function () {
        $("#jqgrid").jqGrid('setGridWidth', $("#content").width());
    })

HTML Markup

<div class="well well-sm well-light" id="content">
    <div id='divResult'>
        @{
            await Html.RenderPartialAsync("~/ViewsBackend/Class/_ClassTab.cshtml");
        }
    </div>

    <section id="widget-grid" class="">
        <div class="row">
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div id="grid">
                    <table id="jqgrid"></table>
                    <div id="pjqgrid"></div>
                    <br>
                </div>
                <br>
            </article>
        </div>
    </section>
</div>

Edit 1 :- Custom formatters

function addLink(cellvalue, options, rowObject) {

            return "<a href='#' style='height:25px;width:120px;' type='button'  onclick=CallActionMethod(" + "'" + rowObject.Class.ClassID + "'" + ")>" + rowObject.ClassLang.Title + "</a>";

    }

    function AddAssignUserLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["Class_AssignUser"]' onclick='AssignUser(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-users fa-lg' aria-hidden='true'></i></a>";
    }

    function AddCourseDetailsLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewCourseDetails"]' onclick='CourseDetails(" + rowObject.Class.CourseID + ")'\"><i class='fa fa-file fa-lg' aria-hidden='true'></i></a>";

    }

    function AddViewClassScheduleLink(cellvalue, options, rowObject){

            return "<button class='btn btn-xs btn-default' data-placement='center' title='@objLocalizer["ViewClassSchedule"]' onclick='ViewClassSchedule(" + rowObject.Class.ClassID + ")'\"><i class='fa fa-calendar fa-lg' aria-hidden='true'></i></a>";

    }

These methods are called from custom formatters

 function CallActionMethod(cellvalue) {
        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: cellvalue },
            success: function (data) {
                document.location.href = "@Url.Action("ClassDetails", "Class")";
            }
        });
    }

    function ViewClassSchedule(ClassID){

        $.ajax({

            type: "POST",
            url: '@Url.Action("SetClassDetailsClassID", "Class")',
            data: { cellvalue: ClassID },
            success: function (data) {
                document.location.href = "@Url.Action("ClassSchedule", "Class")";
            }
        });
    }

    function AssignUser(ClassID) {

        $.ajax({
            type: "POST",
            url: '@Url.Action("AssignUser", "Class")',
            data: { classid: ClassID },
            success: function (data) {

                jQuery(".modal-content").html('');
                jQuery(".modal-content").html(data);
                jQuery("#AssignUserModal").modal('show');

            }
        });
    }

    function CourseDetails(CourseID)
    {

        $.ajax({

            type: "POST",
            url: '@Url.Action("setcourseid", "Course")',
            data: { cellvalue: CourseID },
            success: function (data) {

                document.location.href = "@Url.Action("CourseDetails", "Course")";
            }
        });

    }

Screenshot of jqGrid with updated version

Any help on this appreciated !

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/