jqgrid Cannot read property 'rows' of undefined

Question

I'm trying to add a custom scrollbar to my jqgrid table, on loadComplete method, like this: $(".ui-jqgrid-bdiv").mCustomScrollbar();

It works just fine for me, but in case with frozen columns I get this error: Cannot read property 'rows' of undefined

Maybe someone can help me with this issue? Thanks

Here is my code:

const colModel = [
    {
        name: "select",
        width: 35,
        frozen: true,
    },
    {
        name: "name",
        width: 80,
        label: "NAME",
        fixed: true,
        frozen: true,
    },
    {
        name: "date_saved",
        width: 130,
        label: "DATE SAVED"
    },
    {
        name: "company",
        width: 130,
        label: "COMPANY"
    },
];

export const refreshSavedContacts = () => 
    $.getJSON('/endpoint')
        .success(({ data }) => $("#jqGrid").jqGrid('clearGridData').jqGrid('setGridParam', { data }).trigger('reloadGrid'))
        .error((error) => console.error("error: " + error));

export const savedContacts = () => {
    $("#jqGrid").jqGrid({
        autoencode: false,
        colModel,
        sortIconsBeforeText: true,
        viewsortcols: [true, "vertical", true],
        autowidth: true,
        shrinkToFit: false,
        cmTemplate: { editable: true, autoResizable: true },
        iconSet: "jQueryUI",
        autoResizing: { compact: true },
        inlineEditing: { keys: true, position: "afterSelected" },
        sortname: "invdate",
        sortorder: "desc",
        height: 230,
        multiselect: true,
        multiselectPosition: "none",
        loadComplete: () => $(".ui-jqgrid-bdiv").mCustomScrollbar(),
    })
    $("#jqGrid").jqGrid('setFrozenColumns');
}

Answer 1

You use the not supported version of jqGrid - free-jqGrid, I suggest you to switch to the supported one Guriddo jqGrid.

Using custom scrollbar with frozen columns require to overwrite the grid scroll function. I'm not sure if the original scroll code is changed in free-jqGrid, but you must look at the function scrollGrid.

Actually you should scroll the frozen div when the body div is scrolled. In Guriddo jqGrid this is like this (in scrollGrid function).

if(p.frozenColumns) {
    $(grid.fbDiv).scrollTop( grid.bDiv.scrollTop );
}

Additionally you should look at setFrozenColumns method in order to change the code when the horizontal scrolling is in action.

With other words it is not a trivial task.