Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
empty treegrid with client side data
12/04/2009
09:50
Avatar
idosius
Member
Members
Forum Posts: 6
Member Since:
07/04/2009
sp_UserOfflineSmall Offline

Hi all,

jqGrid is a marvelous plugin and it has been working well for me up to now. Unfortunately, I seem to have hit a brick wall. I would really appreciate your help to get around it.

I've been trying to get a treegrid to work with client side data by adding it with setTreeRow, but to no avail. All I get is the table header and absolutely no data in it.

Please see my code below. Any help would be greatly appreciated.

Thanks in advance,

Ido

<html>
  <head>
    <link type="text/css" href="css/custom-theme/ui.all.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" media="screen" href="themes/basic/grid.css" />

  </head>
  <body>
    <script src="jquery/jquery-1.3.2.js"></script>
    <script src="jquery/grid.locale-en.js"></script>
    <script src="jquery/grid.base.js"></script>
    <script src="jquery/grid.subgrid.js"></script>
    <script src="jquery/grid.treegrid.js"></script>

    <table id="list" class="scroll"></table>
   
    <script>
    jQuery(document).ready(function(){
      jQuery("#list").jqGrid({
        datatype: 'clientSide',
        treeGrid: true,
        treeGridModel : 'adjacency',
        ExpandColumn : 'invid',
        colNames:['Inv No','Amount'],
        colModel :[
          {name:'invid',index:'invid', width:55, sorttype:'int'},
          {name:'amount',index:'amount', width:80, align:'right',sorttype:'float'},
        ],
        imgpath: 'themes/basic/images',
        height:'auto'
      });
     
      // populate the table with some values
      for (var i=0; i<50; i++) {
        jQuery("#list").setTreeRow(i, {
          invid: i,
          amount: "300.00",
          level: 0,
          parent: null,
          isLeaf: true,
          expanded: false
        });
      }
   
    });
    </script>
 
  </body>
</html>

13/04/2009
02:56
Avatar
idosius
Member
Members
Forum Posts: 6
Member Since:
07/04/2009
sp_UserOfflineSmall Offline

OK, I realized I made a mistake - one cannot use setTreeRow before doing addRowData. However, when I do add data with addRowData I don't get a tree structure but a flat table. Anyone know why?

Thanks,

Ido

13/04/2009
07:29
Avatar
idosius
Member
Members
Forum Posts: 6
Member Since:
07/04/2009
sp_UserOfflineSmall Offline

After doing some digging and conversing with myself also outside this forum Smile, may I ask if treegrids are supported for client side data at all?

14/04/2009
04:22
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Will try to add this missing feature.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

14/04/2009
04:41
Avatar
idosius
Member
Members
Forum Posts: 6
Member Since:
07/04/2009
sp_UserOfflineSmall Offline

Thanks! In the meanwhile this should also be written in the documentation, unless it's there already.

Best Regards,

Ido

17/04/2009
07:45
Avatar
Craig Stuntz
Columbus, OH, USA
Member
Members
Forum Posts: 16
Member Since:
16/04/2009
sp_UserOfflineSmall Offline

This is working correctly for me. I am using a tree grid and populating it with data on the client side. I'm using the adjacency model. Which part is not working for you?

19/04/2009
03:11
Avatar
idosius
Member
Members
Forum Posts: 6
Member Since:
07/04/2009
sp_UserOfflineSmall Offline

I tried using both adjacency and nested models and it didn't work. Would you mind sharing your code? It could really help me out.

Thanks,

Ido

20/04/2009
09:20
Avatar
Craig Stuntz
Columbus, OH, USA
Member
Members
Forum Posts: 16
Member Since:
16/04/2009
sp_UserOfflineSmall Offline

Would you mind sharing your code? It could really help me out.


Here, I made you a demo:

$(document).ready(function() {
    TreeDemo.setupGrid($("#tree"));
});

TreeDemo = {
    data: { A: ["A1", "A2"], B: ["B1", "B2"] },
    setupGrid: function(grid) {
        grid.jqGrid({
            colNames: ['Name'],
            colModel: [
                  { name: 'Name', index: 'Name', width: "250em" }
                ],
            datatype: TreeDemo.treeData,
            loadui: "none",
            sortname: 'Number',
            treeGrid: true,
            treeGridModel: "adjacency",
            sortorder: "asc"
        })
    },
    treeData: function(postdata) {
        var items = postdata.nodeid ? TreeDemo.data[postdata.nodeid] : TreeDemo.data;
        var i = 0;
        var rows = new Array();
        for (val in items) {
            var isLeaf = postdata.nodeid != undefined;
            rows[i] = {
                Name: val,
                Id: val,
                level: postdata.nodeid ? 1 : 0,
                parent: postdata.nodeid || null,
                isLeaf: isLeaf ? "true" : "false",
                expanded: "false"
            }
            i++;
        }
        $("#tree")[0].addJSONData({
            Total: 1,
            Page: 1,
            Records: 2,
            Rows: rows
        });
    }
};

Please feel free to add this to the tree documentation.

22/04/2009
07:49
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Thanks Craig. Definitley will do that.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

10/05/2009
21:18
Avatar
J_jack_K
Member
Members
Forum Posts: 3
Member Since:
11/05/2009
sp_UserOfflineSmall Offline

Hi,

I've used the same Craig solution and all work fine.

I have only a problem: if I open the node the tree grid add correclty the new rows but when I colse it they don't disappare.

When I  open the node again it's load again the row and duplicate them.

Here a piece of my code:

jQuery('#amm_organizations_grid').jqGrid({
treeGrid: true, 
height:'auto',
treedatatype: 'json',
treeModel : 'adjacency',
ExpandColClick : false,
datatype: function(postdata) {
var gridJson=jsonToTree(postdata,ecx_global['JsonOrganizzazioni']);
var thegrid = jQuery(”#amm_organizations_grid”)[0];
thegrid.addJSONData(gridJson);
},
colNames: ['Organizzazione','Utenti'],
colModel: [
{name:'code', index:'code', width:200, sortable:false}, 
{name:'usersNumber', index:'usersNumber', width:70, sortable:false}],
jsonReader:  {
root: "rows",
id: "id",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
pager: jQuery('#amm_organizations_grid_pager'),
viewrecords: true,
imgpath: '/ECXMSResources/jquery-plugins/jqGrid/themes/steel/images'
});

Json returned from jsonToTree the first time:

{”total”:1,”page”:1,”rows”:[
{"code":"root","id":"1","usersNumber":"","level":0,
"parent":"NULL","isLeaf":"false","expanded":"false"}],
”records”:1}

Json returned from jsonToTree the opening the first node (id=1):

{”total”:1,”page”:1,”rows”:[
{"code":"org_1.0.0","id":"333","usersNumber":"","level":1,
"parent":"1","isLeaf":"false","expanded":"false"}, {"code":"org_1.1.1","id":"334","usersNumber":"","level":1,
"parent":"1","isLeaf":"false","expanded":"false"}
],”records”:2}

Some Ideas?

10/05/2009
21:33
Avatar
J_jack_K
Member
Members
Forum Posts: 3
Member Since:
11/05/2009
sp_UserOfflineSmall Offline

P.S. I'm using the Stable 3.4.3 Version

10/05/2009
22:17
Avatar
J_jack_K
Member
Members
Forum Posts: 3
Member Since:
11/05/2009
sp_UserOfflineSmall Offline

SOLVED:

I've used treeModel to set the adjacency mode (as wrote in Treegrids decumentation).

Using treeGridModel instead all work fine.

27/02/2010
22:11
Avatar
MattyCiii
Member
Members
Forum Posts: 4
Member Since:
27/02/2010
sp_UserOfflineSmall Offline

Try as I might, I simply cannot get this ( the Craig Stuntz example) to work with jqGrid 3.6.4.  

I know I have the basics of jqGrid working correctly (all the dependancies, etc), because I have a separate example working fine (a jqGrid built from JSON).

Possibly related, it seems the jqGrid demos "New in version 3.4 --> Tree Grid Adjacency Model " demo does not work, at least in MacOS Safari 4.0.4, MacOS FireFox 3.6, and Win 7 FireFox 3.6.  

Any thoughts? 

~Matt

31/03/2010
17:32
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Thenks. I will try it.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

27/05/2010
01:26
Avatar
acornel
Member
Members
Forum Posts: 9
Member Since:
27/05/2010
sp_UserOfflineSmall Offline

I have the same problem: the Craig Stuntz example does not work (even it is a straightforward example). I have tested it on version 3.6.4 and 3.6.5 and on IE / FF ... and no chance (nothing displayed).

The demo examples on the website are working fine ... so maybe it is a problem related to addJSONData (same asa addRowData)?

Thank you in advance for your answer!

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
29 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information