jqGrid - TreeGrid alternate sort

Question

I have a treegrid that is working fine. The grid sorts columns within the hierarchy and that works fine. However, I need to be able to "break" the tree's hierarchy and sort like a non-treegrid would sort. Is there a way to do this without loading two jqGrids (one with treegrid and one without treegrid)?

When I say I want to "break" the hierarchy, I basically want to turn treegrid off and just load the data in a plain non-treegrid grid. I can load two grids, but I'd like to just turn off the treegrid in the existing grid.

I am using treegrid using local json data:

$('#heatmap').jqGrid({            

        datatype: 'jsonstring',

        datastr: [
{id: "0", initalColumn: "0", 0: "National", 1: "65", 2: "69", 3: "73", 4: "73", 5:     "69", 6: "73", 7: "77", level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true},
{id: "1", initalColumn: "1", 0: "Central", 1: "63", 2: "68", 3: "71", 4: "71", 5: "65", 6: "73", 7: "75", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "2", initalColumn: "2", 0: "Store 1", 1: "64", 2: "69", 3: "70", 4: "70", 5: "63", 6: "73", 7: "74", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "3", initalColumn: "3", 0: "Store 2", 1: "60", 2: "65", 3: "76", 4: "73", 5: "68", 6: "74", 7: "77", level: "2", parent: "1", isLeaf: true, expanded: true, loaded: true},
{id: "4", initalColumn: "4", 0: "East", 1: "64", 2: "70", 3: "72", 4: "74", 5: "71", 6: "75", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "5", initalColumn: "5", 0: "Store 3", 1: "64", 2: "73", 3: "74", 4: "77", 5: "72", 6: "77", 7: "78", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "6", initalColumn: "6", 0: "Store 4", 1: "67", 2: "71", 3: "72", 4: "75", 5: "71", 6: "79", 7: "79", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "7", initalColumn: "7", 0: "Store 5", 1: "62", 2: "66", 3: "70", 4: "72", 5: "69", 6: "70", 7: "75", level: "2", parent: "4", isLeaf: true, expanded: true, loaded: true},
{id: "8", initalColumn: "8", 0: "West", 1: "66", 2: "69", 3: "75", 4: "73", 5: "70", 6: "73", 7: "77", level: "1", parent: "0", isLeaf: false, expanded: true, loaded: true},
{id: "9", initalColumn: "9", 0: "Store 6", 1: "59", 2: "67", 3: "73", 4: "69", 5: "68", 6: "71", 7: "74", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "10", initalColumn: "10", 0: "Store 7", 1: "64", 2: "68", 3: "73", 4: "73", 5: "67", 6: "71", 7: "76", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true},
{id: "11", initalColumn: "11", 0: "Store 8", 1: "71", 2: "69", 3: "78", 4: "75", 5: "72", 6: "74", 7: "79", level: "2", parent: "8", isLeaf: true, expanded: true, loaded: true}]
,
            treeGridModel: 'adjacency',
            treeGrid: true,               
            ExpandColumn: '0',
            ExpandColClick: false,
            gridComplete: function(){ if(typeof GridComplete == 'function'){GridComplete();} },
            beforeSelectRow: function(rowid, e) { return false; },
            onSelectRow: function(rowid){if(typeof GridClick == 'function'){GridClick(rowid);} },
            scroll: false,
            scrollOffset: 18,
            scrollrows:false,
            rownumbers: false,   
            pager:'#dummypager',          
            rowNum: 1000,
            jsonReader: {
                repeatitems: false,
                root: function (obj) { return obj; },
                page: function () { return 1; },
                total: function () { return 1; },
                records: function (obj) { return obj.length; }
            },  
            colNames: ["0","","Col1","Col2","Col3","Col4","Col5","Col6","Col7"],
            colModel: [{ name: "initalcolumn", hidden: true},{ name: "0", sortable: true, title: false, width:250, sorttype: "string"},{ name: "1", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter1},{ name: "2", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter2},{ name: "3", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter3},{ name: "4", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter4},{ name: "5", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter5},{ name: "6", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter6},{ name: "7", sortable: true, title: false,  sorttype: "int", align:"right", formatter: formatter7}],                                    
        gridview: true,
        forceFit: false,            
        shrinkToFint: true,
        height: 'auto',
        hoverrows: false,    
        hidegrid: false,        
        autowidth: true,   
        deselectAfterSort: true,
        headertitles: false,                 
        title: false
        })

Answer 1

I think what you need to do is to hold the array which you use for datastr parameter in a variable. The variable could be used to create either Tree Grid or a "standard" grid. You should recreate the grid with respect of GridUnload method if you want switch from Tree Grid to the standard grid. In the answer you will find the demo which demonstrate how to use GridUnload.