free-jggrid treeGrid expands at bottom of the table

Question

I want to use a treeGrid for eBay categories.

All categories started collapsed (pic: collapsed categories)

After klicking on Stamps the subcategories expands at the bottom of the table and not below Stamps (pic: expanded category Stamps)

My table definition:

$('#list').jqGrid({
cmTemplate:{sortable:false, autoResizable: true},
multiSort: false,
url:'/admin/ebay/kategorien/get_jqgrid',
datatype:'json',
mtype:'POST',
jsonReader:{ repeatitems: false },
colModel:[{name:'id',index:'id',width:1,hidden:true,key:true},
          {name:'name', label:'Name', width:200},
          {name:'site_id', label:'Site', width:60},
          {name:'cat_id', label:'Kat.-ID', width:60},
          {name:'leaf_category', label:'Erlaubt', width:60},
          {name:'in_use', label:'Benutzen', width:64,
           formatter:'checkbox', align:'center', stype:'select',
           editoptions:{value:':Alle;-:-;+:+'}}],
pager:'#pager', 
height:'auto',
autowidth:false,
shrinkToFit:false,
guiStyle: 'bootstrap',
viewrecords:true,
gridview:true,
loadComplete: function () {
$(this).triggerHandler('resize.jqGrid');
},
editurl:'/admin/ebay/kategorien/edit',
iconSet:'fontAwesome',
treeGrid:true,
treeGridModel:'adjacency',
ExpandColumn:'name',
ExpandColClick:'true',
caption:'eBay-Kategorien'
});

Data example:

{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"20081",
 "cat_level":"1",
 "name":"Antiques",
 "parent_id":"20081",
 "leaf_category":"0",
 "in_use":"0",
 "id":"20081",
 "level":0,
 "parent":"null",
 "isLeaf":"false",
 "expanded":"false"
},
{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"260",
 "cat_level":"1",
 "name":"Stamps",
 "parent_id":"260",
 "leaf_category":"0",
 "in_use":"0",
 "id":"260",
 "level":0,
 "parent":"null",
 "isLeaf":"false",
 "expanded":"false"
},
{
 "site_id":"0",
 "cat_version":"114",
 "cat_id":"181423",
 "cat_level":"2",
 "name":"Africa",
 "parent_id":"260",
 "leaf_category":"0",
 "in_use":"0",
 "id":"181423",
 "level":1,
 "parent":"260",
 "isLeaf":"false",
 "expanded":"false"
},

I tested and searched much but i can't find a solution... What i doing wrong and how can i solve this?

JSON data, which you posted, don't corresponds the pictures. Could you update either JSON data or the pictures. It's good to prepare the demo (in jsfiddle, for example) which reproduce the problem. Typical error, which corresponds your picture is wrong order if items in the input. jqGrid (and free jqGrid) requires that the order of input nodes (returned from `url`) exactly corresponds **expanded** items. I suppose that *the children* of "Stamps" node are **after "Video Games & Consoles" instead of after "Stamps"**. I recommend you to remove unneeded hidden `id` column additionally. — Oleg, Sep 14 '16 at 17:09

score 0 · Accepted Answer · answered Sep 14 '16 at 20:43

JSON data, which you posted, don't corresponds the pictures. Could you update either JSON data or the pictures. It's good to prepare the demo (in jsfiddle, for example) which reproduce the problem. Typical error, which corresponds your picture is wrong order if items in the input. jqGrid (and free jqGrid) requires that the order of input nodes (returned from url) exactly corresponds expanded items. It's important to understand that jqGrid loads and places the nodes of TreeGrid in the same order. Then it hides collapsed nodes together with all children.

I suppose that the children of "Stamps" node are after "Video Games & Consoles" instead of after "Stamps". You should verify and fix the order of loaded items.

I recommend you to remove unneeded hidden id column additionally. The options height:'auto', autowidth:false and gridview:true are default in free jqGrid and can be removed. The option pager:'#pager' is not needed typically for TreeGrid, but it you need it for navGrid, for example then you can change pager:'#pager' to pager: true, remove unneeded empty <div id="pager"></div> and skip '#pager' in navGrid or inlineNav. Free jqGrid will generate the pager div automatically and navGrid or inlineNav will use the pager automatically too.

free-jggrid treeGrid expands at bottom of the table

1 Answers1