Why does this technique not work to enable my "editable:true" column to sort properly?

Question

QUESTION: How do I enable my "editable:true" column to sort properly?

The following link seemed to provide an "onclick" handler function to allow editable columns to be sorted. (https://stackoverflow.com/a/9290716/652078)

But, even when using it, I receive the following error when I click on the column:

'handler' is null or not an object message when I click on the column

Below, I've provided the column definition and the "click" handler code that I borrowed from the above link.

-Is there anything out-of-date regarding this solution that would prevent it from working?

-Or, does my column definition preclude such a "onclick" handler from working?

Thanks for any help!

Here is the column definition:

    {
        name: 'recType',           
        label: 'recType',           
        index: 'recType',                                               
        width: 100, 
        fixed: true,  
        keys:   true,     
        editable: true, 
        edittype: "select",  
        editoptions: {value: rectypelist}, 
        stype: 'select', 
        formatter: 'select'
    },       

The click event function (technique described in the above link)...

    $(".ui-jqgrid-htable th").click(function()  //.on('click', 'th', function(e)   // 
    {
        var $grid = contentB1Grid;
        $.each($grid[0].grid.headers, function () {
            var $th = $(this.el), i, l, clickHandler, clickHandlers = [],
                currentHandlers = $._data($th[0], "events"),   //$th.data('events'),
                clickBinding = currentHandlers.click;

            if ($.isArray(clickBinding)) {
                for (i = 0, l = clickBinding.length; i < l; i++) {
                    clickHandler = clickBinding[i].handler;
                    clickHandlers.push(clickHandler);
                    $th.unbind('click', clickHandler);
                }
            }
            $th.click(function () {
                var p = $grid[0].p, savedRow = p.savedRow, j, len = savedRow.length;
                if (len > 0) {
                    // there are rows in cell editing or inline editing
                    if (p.cellEdit) {
                        // savedRow has the form {id:iRow, ic:iCol, name:nm, v:value}
                        // we can call restoreCell or saveCell
                        //$grid.jqGrid("restoreCell", savedRow[0].id, savedRow[0].ic);
                        $grid.jqGrid("saveCell", savedRow[0].id, savedRow[0].ic);
                    } else {
                        // inline editing
                        for (j = len - 1; j >= 0; j--) {
                            // call restoreRow or saveRow
                            //$grid.jqGrid("restoreRow", savedRow[j].id);
                            $grid.jqGrid("saveRow", savedRow[j].id);
                        }
                    }
                }
            });
            l = clickHandlers.length;
            if (l > 0) {
                for (i = 0; i < l; i++) {
                    $th.bind('click', clickHandlers[i]);
                }
            }
        });   
    });

Answer 1

My editable column is actually sorting "correctly"...

Recall that the column to be sorted is an editable "dropdown" (or listbox) column.

I was jumping thru hoops - based on various posts regarding the inability to sort on "editable" columns. This included my try at using a snippet from one of Oleg's posted answers addressing such an issue.

But, as it turns out, the real problem was that sorting is performed upon the string value of the dropdown list "key" value, rather than the display "value". (fwiw, the "key" happens to be a numeric code).

--So, again, the $(".ui-jqgrid-htable th").click(function() I was trying was irrelevant to the actual problem. (although, I still don't know why I was getting the "handler is null or not an object" javascript error)

And, so, that essentially answers the question as to "Why does this technique not work to enable my “editable:true” column to sort properly?".

Now, I need to research the question : How do I configure my editable listbox column - so that the sorting is performed upon the "display" value, rather than the "key" value?

UPDATE: I solved this issue (answered my own question, again) in How can I configure this JQGrid column definition so the sort is performed on the listbox entry's "display" value, rather than the "key" value?

--In any case, thank you to anyone who took time to at least view my earlier posted question.

:-)