Why is my free-jqgrid showing no data?

Question

CONTEXT

I'm working on migrating a very large app with many customized grids to jqgrid-free. All of the grids work in the existing code, but much of the existing work does not translate well which was expected, but is frustrating. Why does the following grid definition show no data and yet give zero errors?

CODE

{
            datastr: val,
            altRows: true,
            datatype: 'jsonstring',
            sortable: false,
            width: Global.bodyWidth() - 14,
            colNames: [],
            rowNum: 10000,
            colModel: col_model,
            onCellSelect: function(id){
                $this.grid_select_id_array = [id];
                $this.setDefaultMenu();
            },
            ondblClickRow: function() {
                $this.onGridDblClickRow();
            },
            gridview: true,
            treeGrid: true,
            treeGridModel: 'adjacency',
            treedatatype: 'local',
            ExpandColumn: 'name',
            multiselect: false,
            jsonReader: {
                repeatitems: false,
                root: function( obj ) {
                    return obj;
                },
                page: function( obj ) {
                    return 1;
                },
                total: function( obj ) {
                    return 1;
                },
                records: function( obj ) {
                    return obj.length;
                }
            }
        }

FIDDLE

Here's a fiddle to show in more detail what the data looks like: See fiddle at: https://jsfiddle.net/catbadger/mhvzerdg/18

Answer 1

I'd suggest you to fill the data in the grid during creating the grid. It's more effective as to call always setData method directly after creating the grid. Moreover, free jqGrid allows to create TreeGrid using datatype: "local" and data as the input data. The option jsonReader and many other will be unneeded. You can use just

var grid_setup = {
        altRows: true,
        width: $('body').width(),
        treeGrid: true,
        treeGridModel: 'adjacency',
        ExpandColumn: 'name',
        multiselect: false
    };
grid = new TTGrid('grid_here',grid_setup,columns, "", result_data);

see https://jsfiddle.net/OlegKi/mhvzerdg/19/

UPDATED: If you want to understand why your original code not work you can examine another demo https://jsfiddle.net/OlegKi/mhvzerdg/20/, which just fixes the option treedatatype: 'local' to treedatatype: 'jsonstring' and changes

this.setData = function( data ) {
    if ( this.grid ) {
        this.grid.clearGridData();
        this.setGridParam({data: data});
        this.reloadGrid();
    } else {
        throw('ERROR: Grid is not ready yet.');
    }
}

to

this.setData = function( data ) {
    if ( this.grid ) {
        this.grid.clearGridData();
        if (this.grid.getGridParam("treeGrid")) {
            this.setGridParam({
                datatype: "jsonstring",
                datastr: data
            });
        } else {
            this.setGridParam({data: data});
        }
        this.reloadGrid();
    } else {
        throw('ERROR: Grid is not ready yet.');
    }
}

I still recommend you to follow my first demo and fill the grid during creating.