Getting sortcolumn "undefined" with dynamic column binding

Question

I am binding jqgrid with dynamic column binding but by following this am not getting SortColumn or sidx. But when i tried with static column binding it is working fine. my code for jqgrid binding is

jQuery("#dataList").jqGrid({
        url: gridDataUrl,
        datatype: "json",
        colNames: columnNames,
        colModel: colModel,
        autowidth: true,
        width: 'auto',
        height: 'auto',
        rowNum: 10,
        rowList: [10, 20, 30],
        scrolling: false,
        shrinktofit: true,
        pager: '#pager',
       // scrollrows: true,
        sortname: 'Name',
        rownumbers: false,
        rownumWidth: 30,
        viewrecords: true,
        sortorder: "aesc",
        multiselect: false,
        imgpath: gridimgpath,
        editurl: "/Admin/PerformCRUDAction" + "?lookupId=" + $('#LookUp').val(),
        inlineData: {
            jsondata: function () {
                var selRowId = $("#dataList").jqGrid('getGridParam', 'selrow');
                getActualRowData(selRowId);
                var jsonOfLog = JSON.stringify(myKeyValuePairs);
                return jsonOfLog;
            }
        },
        onSelectRow: null
    }).navGrid("#pager",
    { refresh: false, add: false, edit: false, del: false, search: false },
        {}, // settings for edit
        {}, // settings for add
        {}, // settings for delete
        {} // Search options. Some options can be set on column level
 );

column model getting from ajax call is

 var colModel= [
                    { index: 'Id', name: 'Id', align: 'center', 'hidden': true, editable: false },
                { index: 'Value', name: 'Value', align: 'center', editable: true, editrules: { custom: true, custom_func: myvaluecheck } },
                 { index: 'Name', name: 'Name', align: 'center', editable: true, editrules: { custom: true, custom_func: CheckName } },
                {
                    name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions',
                    formatoptions: {
                        keys: true,
                        onEdit: null,
                        onSuccess: null,
                        onError: null,
                        afterSave: null,
                        afterRestore: null,
                        delOptions: {
                            onclickSubmit: function (rp_ge, rowid) {
                                var selRowId = $('#dataList').jqGrid('getGridParam', 'selrow');
                                var celValue = $('#dataList').jqGrid('getCell', selRowId, 'Id');
                                Delete(celValue);
                                debugger;
                                rp_ge.processing = true;
                                $("#dataList").delRowData(rowid);
                                $("#delmod" + grid[0].id).hide();
                                if (grid[0].p.lastpage > 1) {
                                    grid.trigger("reloadGrid", [{ page: grid[0].p.page }]);
                                }
                                return true;
                            },
                            processing: true
                        }
                    }
                }

code on server side is

public JsonResult GetGridData(GridSettings gridSettings,string sord,string sidx)
    {}

Answer 1

Maybe, when click any button to sort, you need retrieve your array of keyvalues, sort it, and rebind your data grid.

Here's a example:

How to sort an array of objects with jquery or javascript