jqgrid tooltip for header cells only

Question

How can i add tooltip to my jqgrid header cells? in case of multiple grids in the same page.

This is my code:

var initialized = [false,false,false];
    $('#tabs').tabs
    (
        {
            show: function(event, ui)
                {
                    if(ui.index == 0 && !initialized[0])
                    {
                        init_confirm_payment();
                        initialized[0] = true;
                    }
                    else if(ui.index == 1 && !initialized[1])
                    {
                        init_signatory1_payment();
                        initialized[1] = true;
                    }
                    else if(ui.index == 2 && !initialized[2])
                    {
                        init_signatory2_payment();
                        initialized[2] = true;
                    }
                }
        }
    );



        function init_table1()
        {
            jQuery("#cpayment").jqGrid({
                url:'loadgrid.jsp?type=1',
                datatype: "xml",
                loadonce:true ,
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col11','col22','col33','col44'],
                colModel:[
                    {name:'col11',xmlmap:'col11', width:80, align:"right",sorttype:"int"},
                    {name:'col22',xmlmap:'col22', width:70, align:"right",sorttype:"int"},
                    {name:'col33',xmlmap:'col33', width:120, align:"right",sorttype:"string"},
                    {name:'col44:'col44', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true              
            });


        }

        function init_table2()
        {
            jQuery("#payment1").jqGrid({
                url:'loadgrid.jsp?type=2',
                datatype: "xml",
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col111','col222','col333','col444'],
                colModel:[
                    {name:'col111',xmlmap:'col111', width:80, align:"right",sorttype:"int"},
                    {name:'col222',xmlmap:'col222', width:70, align:"right",sorttype:"int"},
                    {name:'col333',xmlmap:'col333', width:120, align:"right",sorttype:"string"},
                    {name:'col444',xmlmap:'col444', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true              
            });
        }

        function init_table3()
        {
            jQuery("#payment2").jqGrid({
                url:'loadgrid.jsp?type=3',
                datatype: "xml",
                direction:"rtl",
                height: '100%',
                width: '100%',
                headertitles: true ,
                colNames:['col1','col2','col3','col4'],
                colModel:[
                    {name:'col1',xmlmap:'col1', width:80, align:"right",sorttype:"int"},
                    {name:'col2',xmlmap:'col2', width:70, align:"right",sorttype:"int"},
                    {name:'col3',xmlmap:'col3', width:120, align:"right",sorttype:"string"},
                    {name:'col4xmlmap:'col4', width:60, align:"right",sorttype:"float"},                        
                ],                  
                multiselect: false,
                autowidth: true,
                forceFit: false,
                shrinkToFit: false,
                loadonce:true                    
            });
        }

        function test()
        {
            var thd = jQuery("thead:first", $("#cpayment").hdiv)[0];
            jQuery("tr th:eq(" + 3 + ")", thd).attr("title", "bla bla");

            var thd1 = jQuery("thead:first", $("#payment1").hdiv)[0];
            jQuery("tr th:eq(" + 3 + ")", thd1).attr("title", "bla bla1");
        }
    </script>


</head>
<body>
<form>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">&nbsp;tab1&nbsp;</a></li>
            <li><a href="#tabs-2">&nbsp;tab2&nbsp;</a></li>
            <li><a href="#tabs-3">&nbsp;tab3&nbsp;</a></li>
        </ul>

        <div id="tabs-1">
            <table id="cpayment"></table>
        </div>

        <div id="tabs-2">
            <table id="payment1"></table>
        </div>

        <div id="tabs-3">
            <table id="payment2"></table>
        </div>
    </div>
    <input type="button" onClick="test()">
</form>        
</body>

Thank's In Advance.

Hepsiba

Answer 1

Just include headertitles:true option in your jqGrid definition.

UPDATED: If you want set custom tooltip on a column header you can do following:

var setTooltipsOnColumnHeader = function (grid, iColumn, text) {
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];
    jQuery("tr.ui-jqgrid-labels th:eq(" + iColumn + ")", thd).attr("title", text);
};

setTooltipsOnColumnHeader($("#list"), 1, "bla bla");

You should take in the consideration, that the column number iColumn is the 0-based absolute index of the column. Every from the options rownumbers:true, multiselect:true or subGrid:true include an additional column at the beginning, so the corresponding iColumn index should be increased.

UPDATED 2: For more information about the structure of dives, internal grid.hDiv elements and the classes used by jqGrid see this answer.

Zelaya

@Oleg: thank's for your reply, when i add "headertitles:true" i can see the header tooltip but i see whats inisde of colNames:[] data, my question is how can i see tooltip with other data then what is inside th colNames? – Hepsiba

@user590586: I updated my answer to show how you can set custom tooltip on the column head. – Zelaya

@Oleg:I tested your answer now , but it's not working for me, i get "thd" value as undefined. is there a reason for that? – Hepsiba

@user590586: probably the working example ok-soft-gmbh.com/jqGrid/ToolTips.htm can help you to find an error. Examin tooltio of the column header 'Inv No'. It should be "bla bla". – Zelaya

@Oleg: o.k got it working , but my problem is how to handle this if i have 3 grids in the same page? – Hepsiba

@user590586: The code use jQuery with the second (context) parameter. So it should work with more as one grids on the same page. If you has a problem you should post the code which reproduce the problem. Then one can either find a bug in your code or a bug in jqGrid. So just post the code. – Zelaya

@user590586: I updated the code of setTooltipsOnColumnHeader: one should use grid[0].grid.hDiv as the context. You code which you posted has many syntax errors like name:'col44:'col44' instead of name:'col44',xmlmap:'col44', name:'col4xmlmap:'col4' instead of name:'col4',xmlmap:'col4', commas at the end of colModel definition (,]) and so on. Look at ok-soft-gmbh.com/jqGrid/ToolTipInTab.htm. It shows at least correct tooltips for the both table headres. – Zelaya

Answer 2

In my case I don't have index of the column to which I would like to set the tooltip. I have modified the above answer by @Oleg as below.

   //grid object, column id, tooltip text
var setTooltipsOnColumnHeader = function (grid, iColumn, text) {
    var thd = jQuery("thead:first", grid[0].grid.hDiv)[0];    
    jQuery("tr.ui-jqgrid-labels", thd).find("[id='"+iColumn+"']").attr("title",text);
};

Muncey

Answer 3

To add tooltip just call this methode on loadcomplete:

addToolTipForColumnheader('YourGridID');

function addToolTipForColumnheader(gridID){
    var columnNameList=$('#'+gridID)[0].p.colNames;
    for (var i = 0; i < columnNameList.length; i++){
        var columnName=$('#'+gridID)[0].p.colModel[i].name;
        $('#'+gridID+'_'+columnName).attr("title", $('#'+gridID)[0].p.colNames[i]);
    }
}

Poulter