jQuery Grid Plugin - jqGrid

Dear Oleg,

         mr treegrid has 2000 records, the treegrid is to only display the data (not for adding or editing the nodes), so i need the pagination bcz we can't scroll down to see the 1000th records or do u have any other solution ???

vasanth said:

OlegK said:

Hello vasanth,

you asked about the existing features of tree grid. I unswered you. You wrote that you have 2000 records, but you don't describe how the data is organized (deep level, how many subnodes you have for one node). In the standard implementation of the tree grid if the user click on the node to see the childrens of the node the jqGrid send the request to the server which include the id of the expanding node. So the server should send back all child nodes. I hope it will be not 1000 items. So I recomend you just set rowNum to 10000 and use grid without pagination. On the other side it would be very helpful for the user if you add searching toolbar to the grid. The user will be able to find the items which he/she need very quickly without scrolling.

If you write about the paginating of the data you should understand its the implementation problem. Let us you use adjacency model. Then the node has the parent id inside. So to display the node one have to have its parent and the parent of the prent. What should be done in the data are on another page? So the page must contain not only the nodes, but some additional information about its all parents. If the expanding node has a few subnodes one should display some additional root nodes. Who should decide which nodes should be included in the page? I explaned all this so that you could understand the probelms in the tree grid pagination and see that no simple solution could exist here.

Best regards
Oleg

---

Dear Oleg,

        Thanks a lot for your explanation abt the tree grid pagination issue. i will try the searching toolbar to the grid. once again thanks a lot to your support and quick response

Dear Oleg,

         I have added the Tool bar search in the tree grid but its not working for local data and if set the treegrid as false. it works fine in the sense it will act as a plan grid. Is the tool bar search won't work for local data, please find my code for you referenceand help me pls

$(document).ready (function () {
            var mydata = [
                { id:"AA", name:"012356",   num:"07/15/2009", debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
                  level:"0", parent:"",  isLeaf:false, expanded:false },
                { id:"AB", name:"001", num:"07/15/2009",   debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
                  level:"1", parent:"AA", isLeaf:false, expanded:false },
                { id:"AC", name:"124", num:"07/15/2009",debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
                  level:"2", parent:"AB", isLeaf:true,  expanded:false },
                { id:"AD", name:"002", num:"07/11/2009",debit:"121212",credit:"Adam Opel GmbH", balance:"LAMBDA SENSOR", enbl:"Bosch",
                  level:"1", parent:"AA", isLeaf:true,  expanded:false },
                { id:"AE", name:"012456", num:"01/13/2009",debit:"454545 ",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
                  level:"0", parent:"",  isLeaf:false, expanded:true },
                { id:"AF", name:"000", num:"04/1/2011",debit:"454545",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
                  level:"1", parent:"AE", isLeaf:true,  expanded:false },
                { id:"AG", name:"001", num:"08/15/2009",debit:"454545",credit:"General Motors LLC", balance:"LINKAGE, WIPER", enbl:"Bosch",
                  level:"1", parent:"AE", isLeaf:true,  expanded:false },
                { id:"AI", name:"0X2345", num:"07/15/2010",debit:"2424",credit:"GM Manufacturing Poland", balance:"MOTOR-REAR WIPER", enbl:"Bosch",
                  level:"0", parent:"",  isLeaf:true,  expanded:false }
                ],
                grid = $("#treegrid");

            grid.jqGrid({
                datatype: "local",
                data: mydata, // will not used at the loading,
                              // but during expanding/collapsing the nodes
                colNames:["id","Contract#","Eff Date","Part#","Legal Entity","Part Description","Buyer Name"],
                colModel:[
                    {name:'id', index:'id', width:1, hidden:true, key:true},
                    {name:'name', index:'name', width:180},
                    {name:'num', index:'acc_num', width:80, align:"center"},
                    {name:'debit', index:'debit', width:80, align:"right"},
                    {name:'credit', index:'credit', width:80,align:"right"},
                    {name:'balance', index:'balance', width:80,align:"right"},
                    {name:'enbl', index:'enbl', width: 60, align:'center'}                     
                ],
                height:'100%',
                rowNum: 1000,
                //pager : "#ptreegrid",
               // rowList : [5,10,20],
                sortname: 'id',
                viewrecords: true,
                treeGrid: true,
                treeGridModel: 'adjacency',
                treedatatype: "local",
                ExpandColumn: 'name',               
                //altRows:true,
                //altclass:'myAltRowClass',
                caption: "Search Screen Output",                       
                loadComplete : function(){
                    $("#treegrid").setGridWidth(1085,true);
                    $("#treegrid").setGridHeight(470,true);  
                },
                gridComplete: function ()
                {
                    $(".treeclick","#treegrid").each(function() {
                        if($(this).hasClass("tree-plus"))
                            $(this).trigger("click");

                    });
                }

            });
            // we have to use addJSONData to load the data
            grid[0].addJSONData({
                total: 1,
                page: 1,
                records: mydata.length,
                rows: mydata
            });

            grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: false, defaultSearch : "cn"});
            
        });