jquery - is it possible to have html inside of a jqgrid treegrid cell

Question

i have a jqgrid treegrid cell and i want to have content inside of a cell that has links and other html formatting.

is this possible with jqgrid treegrid ? I don't see anything mentioned in the documentation

Answer 1

The most things which you know from jqGrid having simple table data still valid for the tree grid. So you can use custom formatters or custom attribute formatter (cellattr) to place HTML in the cells. You can place HTML fragments in the JSON or XML input if needed.

Look at the small demo:

It is only important to understand, that the tree grid don't support data paging, so you should set rowNum parameter to the large enough value like 10000.

I recommend you to examine the tree grid contain. You will see hidden columns 'level', 'parent', 'isLeaf', 'expanded', 'loaded' and 'icon' as the last grid columns. Moreover you will see that all tree nodes (expanded and not expanded) are already added to the grid. Not yet expanded nodes are just hidden.

The code of the tree grid used in the demo is

$("#tree").jqGrid({
    url: 'AdjacencyTreeWithHTML.json',
    datatype:'json',
    mtype:'GET',
    colNames: ["ID", '<span style="color:Tomato">Description</span>', "Total"],
    colModel: [
        {name:'id', index:'id', width: 1, hidden: true, key: true},
        {name:'desc', width:180, sortable:false},
        {name:'num', width:80, sortable:false, align:'center',
         cellattr: function (rowId, tv, rawObject, cm, rdata) {
            return Number(tv) <=100 ? 'style="background-color:LightGreen"' :
                                      'style="background-color:Tomato"';
        }}
    ],
    treeGridModel:'adjacency',
    height:'auto',
    rowNum: 10000,
    treeGrid: true,
    ExpandColumn:'desc',
    caption:"TreeGrid Test"
});

where 'AdjacencyTreeWithHTML.json':

{
    "total": "1",
    "page": "1",
    "records": "2",
    "rows": [
           {"id": "1", "cell":  ["1",  "Super <b>Item</b>",     "300", "0", "",  "false", "true", "true"]},
           {"id": "2", "cell":  ["2",  "<a href='http://www.google.com'>Google</a>", "100", "1", "1", "false", "false", "true"]},
           {"id": "3", "cell":  ["3",  "Sub Item 1",     "50",  "2", "2", "true",  "true",  "true"]},
           {"id": "4", "cell":  ["4",  "Sub Item 2",     "25",  "2", "2", "false", "false", "true"]},
           {"id": "5", "cell":  ["5",  "Sub-sub Item 1", "25",  "3", "4", "true",  "true",  "true"]},
           {"id": "6", "cell":  ["6",  "Sub Item 3",     "25",  "2", "2", "true",  "true",  "true"]},
           {"id": "7", "cell":  ["7",  "<span style='background-color:LightGreen; color:Tomato'>Item 2</span>", "200", "1", "1", "false", "true", "true"]},
           {"id": "8", "cell":  ["8",  "Sub Item 1",     "100", "2", "7", "false", "false", "true"]},
           {"id": "9", "cell":  ["9",  "Sub-sub Item 1", "50",  "3", "8", "true",  "true",  "true"]},
           {"id": "10", "cell": ["10", "Sub-sub Item 2", "50",  "3", "8", "true",  "true",  "true"]},
           {"id": "11", "cell": ["11", "Sub Item 2",     "100", "2", "7", "true",  "true",  "true"]}
    ]
}