javascripthtmljqgridjavascript-objectsjqgrid-formatter

add icons inside JQ grid cell attr title

I have 2 icons need to show in cell attribute title like below image, On click of icon need to perform some action.

Design: enter image description here

I tried with: 

colModel: [
                    //{name: 'id', index: 'id', width: 65, align: 'center', sorttype: 'int'},
                    {name: 'invdate', index: 'invdate', width: 80, align: 'center', sorttype: 'date',
                        formatter: 'date', formatoptions: {newformat: 'd-M-Y', reformatAfterEdit: true}, datefmt: 'd-M-Y'},
                    {name: 'name', index: 'name', width: 70,
                        cellattr: function (rowId, val, rawObject, cm, rdata) {
                            return 'title="<i class = fa fa-edit></i>"';
                        }}
]

On hover of cell not getting font awesome icon, instead of that getting <i class = fa fa-edit></i>

Dummy Developed Screen: enter image description here

Used bootstrap 3.3.7 and font awesome 4.7 and Jquery UI css

How to add icons..?

Solution

  • It's unclear what version of jqGrid you use and from which fork of jqGrid (free jqGrid, commercial Guriddo jqGrid JS or an old jqGrid in version <=4.7). It's unclear which CSS framework you use: jQuery UI, Bootstrap or both. Thus I guess that you use jQuery UI. In the case you need to use tooltip to display the title information in another way. For example the code

    $grid.tooltip({
    items: "td[title]",
    content: function() {
        var element = $(this),
            title = element.attr("title");
        if (title) {
            return '<span class="fa fa-lg fa-fw fa-edit"></span>' +
                title;
        }
    }
});

    be used in the demo https://jsfiddle.net/OlegKi/yvbt6w54/60/. The results looks like on the picture below: enter image description here