0

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
        })
dankorz
  • 228
  • 3
  • 8
  • Could you describe more detailed which Tree Grid you has? Do you have Tree Grid with local data or load the data from the server? Do you load the grid contain at once with `true` in the hidden `loaded` column or you gat the data from the server on every node expanding? Could you explain more detailed how you imagine the grid with "breaked" tree's hierarchy? Is it will no more a Tree Grid? – Oleg Nov 09 '11 at 17:39
  • @Oleg I have edited my question to describe my situation in more detail. – dankorz Nov 09 '11 at 20:22

1 Answers1

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.

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798