http://www.trirand.com/blog/?p.....e-headers/

Best Regards

Tony

    // add tooltip on the column headers

    var grid = jQuery('#list').jqGrid({…});

    var thd = $("thead:first", grid.hDiv).get(0);

    for (var i = 0; i < cn.length; i++) {

        $("tr th:eq(" + (i + 1) + ")", thd).attr("title", cn[i]);

    }

Hi,

I used the above code to create header tooltips but failed to get it working in Firefox 3.5. This is my slightly adjusted code that works fine in IE8, Safari and Chrome:

gridComplete: function() {
    var thd = $("thead:first", grid.hDiv).get(0);
    for (var i = 0; i < myColums.length; i++) {
        $("tr th:eq(" + i + ")", thd).attr("title", myColums[i]);
    }
}

No errors in Firefox and no tooltip either. Does anyone has a fix for this issue?

I'll try what you suggested.

Glen

such strange look has long headers in old version of IE (in IE 6). How to fix the problem in IE6 I don’t now currently. Probably Tony could help you. In more modern versions of IE, the text in column headers will be cut off like you want. To add tooltips to headers I use code like

    // add tooltip on the column headers

    var grid = jQuery('#list').jqGrid({...});

    var thd = $("thead:first", grid.hDiv).get(0);

    for (var i = 0; i < cn.length; i++) {

        var tmp = "tr th:eq(" + (i + 1) + ")";

        $("tr th:eq(" + (i + 1) + ")", thd).attr("title", cn[i]);

    }

    $("tr th:eq(8)", thd).attr("title", "Ist Standardtest?");

where cn is colNames array (array with column headers). If you use empty colNames array and the give the same information in lable of colModel, you should change the code a little.

In my opinion tooltips on column headers could be implemented in jqGrid per default (what think Tony about that). But if you want to change tooltip for a some column to another text as the column name, you can use code like following

$("tr th:eq(8)", thd).attr("title", "Bla bla");

How to change default text of tooltip Tony wrote you before. Here is an code example:

jQuery('#list').jqGrid({

…

        loadComplete: function() {

            var ids = grid.getDataIDs();

            for (var i = 0; i < ids.length; i++) {

                var id = ids[i];

                var UserName = grid.getCell(id, 'UserName');

                var Telefon = grid.getCell(id, 'Telefon');

                var Mobile = grid.getCell(id, 'Mobile');

                var Email = grid.getCell(id, 'Email');

                var Location = grid.getCell(id, 'Location');

                var toolTip = UserName;

                if (Location !== '') toolTip += '\nLocation: ' + Location;

                if (Telefon !== '') toolTip += '\nTel: ' + Telefon;

                if (Mobile !== '') toolTip += '\nMobile: ' + Mobile;

                if (Email !== '') toolTip += '\nE-Mail: ' + Email;

                grid.setCell(id, 'UserName', '', '', { title: toolTip });

                // one can use grid.getRowData(id)

                // instead of grid.getCell

            }

        },

…

In the code fragment column UserName is visible and columns Telefon,Mobile,Email, Location - hidden. Information from the hidden columns used to set tooltip on the visible cells.

Best regards

Oleg

[Image Can Not Be Found]

As you can see, the headers don't get cut off.

Here are settings from my jqGrid() setup:

    height: 'auto',
    width: '1024px',
    cellEdit: true,
    autowidth: true,
    shrinkToFit: true,

and the column model:

{name:'P2010HrsAchieved',index:'P2010HrsAchieved',label:'2010 Billable Hrs YTD Achieved',width:150,search:false,resizable:false,editable:true},
{name:'P2010RevGoalCurrency',index:'P2010RevGoalCurrency',label:'2010 Revenue Goal Currency',width:150,search:false,resizable:false,editable:true},
{name:'P2010RevGoal',index:'P2010RevGoal',label:'2010 Revenue Goal',width:150,search:false,resizable:false,editable:true},

Is my only option to manually set the column size?

Thanks,

Glen

Not sure if I understand. The text in the heading column shod behave as the data. Also which version is used?

Could you please send a link to the problem or post a code?

Thanks

Best Regards

Tony

For case 2, you are right…

In a related question, I'm finding that the headings for each column do not cut off. So, if the column is too narrow, the text continues on and overwrites the header of the next column. Is there any way to fix this?

Glen

In the current implementation (case 1) it is not possible to use formatter for this purpose, beqouse of the rendering engine, which call first the formatter and then we construct the tooltip.

One possible solution is to use grid complete event and then you can loop througth the rows  (you should get the ids) and set the title attribute of the coulmn.

For case 2 I think that this is the default behaviour of the grid or I'm missiing something

Best Regards

Tony

Assume I have 3 columns of data:  A, B, C

What I want to to hide columns B and C, but use their data in a tool tip on column A.

Can this be done using a custom formatter?

How would I access the other columns, and how do I set the tool tip?

Question 2:

For column D, the text may be too long to show in a column. I want to only show, say, 50 characters in the cell. The full text would be shown in the tooltip.

Can this be done using a custom formatter?

Thanks,

Glen