Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_TopicIcon
Adding title attribute to Grid Table Headers
04/02/2010
11:52
Avatar
Klaus
Member
Members
Forum Posts: 68
Member Since:
18/11/2009
sp_UserOfflineSmall Offline

Hello!

I've added the title-attribute to the grid table header cells (th) so that the browser also displays a tooltip for the headers and not only for the cells.

Note: a special handling for table headers displaying checkboxes requires using the .label attribute (or is there a better way to avoid wrong tooltips for such special header columns)

in grid.base.js:
  …
  for(i=0;i<this.p.colNames.length;i++) {
    var tooltip = ts.p.colModel[i].label ? " title='"+ts.p.colModel[i].label+"'" : "";
    thead += "<th role='columnheader' class='ui-state-default ui-th-column ui-th-"+dir+"'" + tooltip + ">";
  …

Kind regards,
Klaus.

05/02/2010
11:21
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Thanks Klaus - I will consider your recommendation.

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

15/02/2010
22:03
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hi Klaus!

I find your idee very good! I have a lot of tables with a long header and short contain. So I choose a short width for such columns, but place tooltips generaly on all headers of jqGrid columns. To do so, I use following own small function:

Testportal.setTooltipsOnAllColumnHeaders = function(grid) {

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

    var colNames = grid.getGridParam('colNames');

    if (colNames !== undefined && colNames !== null) {

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

            var name = colNames[i];

            if (name !== undefined && name.length != 0)

                $("tr th:eq(" + i + ")", thd).attr("title", name);

        }

    }

};

Because sometimes it is needed a tooltip another as column header, I use one more short function

Testportal.setTooltipsOnColumnHeader = function(grid,iColumn,text) {

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

    $("tr th:eq(" + iColumn + ")", thd).attr("title", text);

};

to overwride header's tooltip.

The idea of Klaus is very good, but the implementation works only if one use “label” property of colModel. Corresponds to jqGrid documentation the column header can also come from colNames array or from “name” property of colModel. If colNames exists, its names have preference. If no colNames defined, jqGrid fills colNames array itself corresponding on described rules (from “label” or “name” property) and at the place suggested by Klaus we can use this array (see line 1268 of grid.base.js):

for (i = 0; i < this.p.colNames.length; i++) {

    var curName = ts.p.colNames[i], curModel = ts.p.colModel[i];

    thead += "<th role='columnheader' class='ui-state-default ui-th-column ui-th-" + dir + "'"

             + (curName.length != 0 ? " title='" + curName + "'" : "") + ">";

    idn = curModel.index || curModel.name;

    thead += "<div id='jqgh_" + curModel.name + "' " + tdc + ">" + curName;

    if (idn == ts.p.sortname) {

        ts.p.lastsort = i;

    }

    thead += imgs + "</div></th>";

}

This code works, by the way, also if “rn” column exists (rownumbers property is true).

Personally I see only advantages in tooltips on column headers and place there on all my tables. To be more flexible, it would be probably to define additional parameter of grid, which defines wither a tooltips for headers should be set. Another parameter defines whether tooltips should set to any table cell (currently default behavior). It’s conceivable to introduce a new columnTooltip parameter in the colModel (like currently exists “label” property).

I find that in forums exist a lot of questions about tooltips on table cells and headers. Introducing corresponding parameters and easy functions to get/set such tooltips close the discussion and save your Tony time for reading forum and writing responds.

Best regards
Oleg

17/02/2010
11:43
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Sure - will do it.

Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

02/03/2010
17:14
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline

Hello,

Also this is done with option.

More details here:

http://github.com/tonytomov/jq.....33abcece95

Best Regards

Tony

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

03/03/2010
03:42
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

Hello Tony,

what I like in jqGrid mostly is that the development politic is user friendly. I mean, that you implement features which be asked. Because of that, it's pleasantly to use jqGrid.

Thanks and best regards
Oleg

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
79 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information