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

Resplendent

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"]}
    ]
}

Aitchbone

what about using the formatter in the colmodel on the client side (instead of putting html inside your json) ?? – Resplendent

@ooo: It is better of course. You question was "is it possible to have html inside of a jqgrid treegrid cell?" which can be interpreted in different ways. So in my example I showed that all ways to place HTML in the jqGrid cell work with the tree grid. Which advantages has different ways is another question. I think you have already enough experience with jqGrid, so you known the advantages/disadvantages. – Aitchbone

thanks for the reply . . i am using formatters on the client side and it seems to do the trick . . thanks for your help – Resplendent

@oleg, is this feature broken in 4.15.2? in this grid, html for first column comes from JSON data but second column is created with formatter – Auxin

@AaA: I tried to hold minimal compatibility to previous versions of jqGrid, but I have to make minimal changes. For example starting with 4.15.0 I changes the default value of autoencode option to prevent to prevent Cross Site Scipting (XSS) by default. I suppose that you can fix your problem by adding autoencode: false option to jqGrid. To text XSS error I recommend you to enter <script>alert("hi!")</script> in your grid during editing the data. – Aitchbone

@Oleg, Thank you again. autoencode: false fixed my issue, fortunately all my grids are read-only and editing is done in a separate dialogbox. – Auxin

@Oleg, Thank you again. autoencode: false fixed my issue – Killerdiller

Answer 2

A better way to achieve this is by using the custom formatter, just write a simple function which adds the HTML you need, like this:

function leadForm(cellvalue,options,rowObject){
    return '<span style="color:#F00">'+cellvalue+'</span>'
}

and link it to the cell in the colmodel, as explained in the reference

link to reference: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:custom_formatter

Woodworker

woops, i didn't notice leora's further comments. all credits belongs to her :) – Woodworker

Answer 3

Look at the HTML source that it generates. If it is just a <table> object, which I suspect it is, then you can put whatever HTML you want in there.

Inrush