jqGrid Tree Node Structure for Task and Sub-Task

Question

jqGrid script

<script type="text/javascript">

var call_url = "<?php echo SOME_URL ?>";
jQuery("#grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
         treeGrid: true,
                treeGridModel: "adjacency",
                ExpandColumn: 'TASK_NAME',
    rowNum: 20,
    rowList: [20,30],
    colNames:['Task#','Project ID','Task Name', 'Created By', 'Start Date', 'End Date', 'Status', 'Action'],
    colModel:[
        {name:'TASK_ID',index:'TASK_ID', align:'center',search:false,key:true},
        {name:'PROJ_ID',index:'PROJ_ID',search:false, align:"center"},
        {name:'TASK_NAME',index:'TASK_NAME', search:false},
        {name:'TASK_CREATED_BY',index:'TASK_CREATED_BY',search:false,align:"center" },
        {name:'TASK_START_DATE',index:'TASK_START_DATE',search:false ,align:"center"},
        {name:'TASK_END_DATE',index:'TASK_END_DATE',search:false,align:"center" },
                {name:'TASK_STATUS',index:'TASK_STATUS',search:false,align:"center" },
        {name:'ACTION',index:'id', search:false,align:'center',sortable:false, formatter: 'actions',
                formatoptions: {
                    keys: true,
                    editformbutton: false,
                    delOptions: { url: delete_task_url}
                }},
    ],
        prmNames: { id: "TASK_ID" },
    pager: "#page",
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    sortname: 'TASK_ID',
    caption: "Task List",
    gridComplete: function () {

            var recs = $("#grid").getGridParam("records");
            $( ".mycontent" ).remove();
            if (recs == 0 || recs == null) {
                $('#grid').after("<div class='mycontent' style='color:red;text-align:center'>No Record Found</div>");
            }

        }

        }).navGrid('#page',{ edit:false,add:false,del:false,search:false,cloneToTop:true,refresh:false},
        {

        },{
    //add options

    },{

    //msg: "do you really want delete this keyword? This delete affect on Eqms filter"

    });

        jQuery("#grid").jqGrid('filterToolbar', { autosearch: true  });
    var topPagerDiv = $('#grid_toppager')[0]; 
        jQuery("#grid_toppager_center", topPagerDiv).remove();

</script>

I have a list of Task(Parent) and SubTasks(Child) assigned to Tasks. On the grid, I need to show them in tree node format so that if a parent task consists of child task, user can click and it will show the sub-tasks created under that specific task.

Task and Sub-task list

Here Sub-Task One and Sub-Task Two will be under Task-1 and when clicked on it, will be loaded and showed with edit/delete options as its coming right now.

Response from server:

{"page":"1","total":1,"records":"7","rows":[{"cell":["1","438","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","<a href='someurl'><span class='ui-icon ui-icon-pencil'><\/span><\/a>"]}}

Also I am not willing to show all the task and its sub-task when the page loads as it might create performance issue when there will be too many tasks.

I have tried the code mentioned here for Tree Node, but somehow can not make it work.

After passing the params in desired format, still the output is

enter image description here

Thanks.

In which form have you native information about the parent `TASK_ID` of the item in the table? How many rows exists in the grid totally (approximately). You should understand that jqGrid don't supports paging of TreeGrid. In general the row data should have values for *additional columns* `level`, `parent`, `isLeaf` and optionally `expanded`, `loaded`, `icon`. You have to set the values (at least the part from there) on the server side or inside of `beforeProcessing`. — Oleg, Nov 24 '14 at 08:24
@Oleg pls see updated question. The number of rows could vary and so I want to load expended nodes only. It would be helpful if you can let me know how to add `additional columns level, parent, isLeaf and optionally expanded, loaded, icon`. — Slimshadddyyy, Nov 24 '14 at 08:31
If you opens any TreeGrid demo, for example [the old demo](http://www.ok-soft-gmbh.com/jqGrid/LocalAdjacencyTree8.htm) from [the answer](http://stackoverflow.com/a/7332627/315935), and examine the structure of every line using Developer Tools you will see columns `level`, `parent`, `isLeaf`, `expanded`, `loaded`, `icon` which appends the standard columns. So you need extend the data to `["1","111","Task One","User 1","10-NOV-14","11-NOV-14","Active","","0","null","false","false"]` for example — Oleg, Nov 24 '14 at 08:40
I recommend you to return date `"10-NOV-14"` in ISO format like `"2014-11-10"` and to use `formatter: "date"` to display the date in the form like you need: `formatoptions: {newformat: "d-M-y"}` — Oleg, Nov 24 '14 at 08:44
@Oleg I have changed the data to this `{"page":"1","total":1,"records":"7","rows":[{"cell":["1","438","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","0", "null", true, false, true,"<\/span><\/a>"]}}` and included `treeGrid: true, treeGridModel: 'nested', ExpandColumn : 'name',` in my jqgrid options. Am I still missing something as its not working yet. — Slimshadddyyy, Nov 24 '14 at 08:54
The format of `treeGridModel: 'nested'` is absolutely another. My example was for **`treeGridModel: 'adjacency'`**. Moreover I don't understand why you includes `"<\/span><\/a>"` in the data. The text will be just ignored by `formatter: 'actions'`. Additionally I recommend you to remove all `index` properties from `colModel` - the items not required and the values different as `name` values are mostly the source of errors. — Oleg, Nov 24 '14 at 09:23
What are the additional columns we are defining here for `"","0","null","false","false"` params. I assume `level,parent,isleaf,expanded and loaded`. Moreover when I click on expand icon it shows duplicate records instead of showing only child records. — Slimshadddyyy, Nov 24 '14 at 09:44
Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/Slimshadddyyy.htm) from **UPDATED** part of my answer. — Oleg, Nov 24 '14 at 09:53
If you want to load not all data at once then the server should follow [the documentation](http://www.trirand.com/jqgridwiki/doku.php?id=wiki:adjacency_model#what_we_post) and to return **only children nodes** based on the id of parent node (`parentid` parameter and if needed also `nodeid` and `n_level`). — Oleg, Nov 24 '14 at 09:59

Oleg · Accepted Answer · 2014-11-24T09:53:13.473

0

You need just extend the data returned from the server to something like

{"page":"1","total":1,"records":"7","rows":[
    {"cell":["1","111","Task One","User 1","10-NOV-14","11-NOV-14","Active","","0","null","false","false"]},
    {"cell":["2","111","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","","1","1","true","true"]},
    {"cell":["3","111","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","","1","1","true","true"]}
]}

Event better would be to use ISO 8601 date format like "2014-11-10" instead of "10-NOV-14" and to convert the dates to desired format using formatter: "date", formatoptions: {newformat: "d-M-y"} properties in the corresponding columns of colModel.

UPDATED: The corresponding demo is here. I personally would recommend you to set the column used in ExpandColumn: 'TASK_NAME' as the first visible column of TreeGrid.

edited Nov 24 '14 at 09:53

answered Nov 24 '14 at 08:50

Oleg

220,925
34
403
798

I have followed your demo and here is my returned format `{"page":"1","total":1,"records":"7","rows":[ {"cell":["1","438","One","User 1","11-NOV-14","20-NOV-14","Active","", "0","null","false","false","true"]}, {"cell":["7","438","Sub-Task One","User 1","10-NOV-14","11-NOV-14","Active","", "1","1","true","true","true"]}, {"cell":["8","438","Sub Task Two","User 1","10-NOV-14","11-NOV-14","Active","", "1","1","true","true","true"]} ]}`. But still it shows me something different. The image is updated in my question. – Slimshadddyyy Nov 24 '14 at 10:33
@Slimshadddyyy: Sorry, but I don't think that you did really what you posted. Look at [the demo](http://www.ok-soft-gmbh.com/jqGrid/Slimshadddyyy0.htm) where I just included the response which you posted and removed `formatter: "date"`. Compare *exactly* your code with my code and verify that your data are correctly sorted (exactly like your posted). All children have to follow its direct parents. – Oleg Nov 24 '14 at 10:54
My bad. That works perfect. But if I have levels 0,1,2 how can i show them in your demo and how to check if parent contains any child ? – Slimshadddyyy Nov 24 '14 at 11:05
@Slimshadddyyy: To check if parent contains any child you should get the information from your data source. :-) If the data have levels 0,1,2 you need just use the values in data returned from the server. Typically `level` value can be calculated based on `parent`. You need just calculate the "deep" of the item by getting its parent, the parent of the parent and so on till you have `null` in the last parent. So as I wrote in my first comment: all depends from the native information about the parent `TASK_ID` of the item. You should prepare the data for TreeGrid base on it. – Oleg Nov 24 '14 at 11:22
I understood what you said. But if i want to show third level task i.e. `Task One > Sub-Task One > Sub-Task Two`. Currently the demo has only two level showing. – Slimshadddyyy Nov 24 '14 at 11:26
@Slimshadddyyy: Sorry, but I can't permanently create demos for you. I wrote all already in my previous comment. You should just understand the meaning of `level`, `parent`, `isLeaf`, `expanded`, and `loaded` and use the correct values in the JSON response. [The demo](http://www.ok-soft-gmbh.com/jqGrid/Slimshadddyyy0_.htm) uses [the JSON data](http://www.ok-soft-gmbh.com/jqGrid/Slimshadddyyy0_.json). – Oleg Nov 24 '14 at 11:35

jqGrid Tree Node Structure for Task and Sub-Task

1 Answers1